Skip to content

Commit da1b95e

Browse files
fomalhautbfomalhautb
authored
React SDK (stack-auth#462)
1 parent e63d414 commit da1b95e

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

42 files changed

+2182
-555
lines changed

‎examples/demo/src/app/page-client.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
11
'use client';
22

33
import { useStackApp, useUser } from '@stackframe/stack';
4-
import { Button, Link, Typography } from '@stackframe/stack-ui';
4+
import { Button, Typography } from '@stackframe/stack-ui';
5+
import Link from 'next/link';
56
import { useRouter } from 'next/navigation';
67

78
export default function PageClient() {

‎examples/docs-examples/src/app/page-client.tsx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,9 @@
11
'use client';
22

3-
import { useRouter } from 'next/navigation';
43
import { useStackApp, useUser } from '@stackframe/stack';
5-
import { Button, Link } from '@stackframe/stack-ui';
4+
import { Button } from '@stackframe/stack-ui';
5+
import Link from 'next/link';
6+
import { useRouter } from 'next/navigation';
67

78
export default function PageClient() {
89
const user = useUser();

‎examples/js-example/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
"description": "",
66
"main": "index.js",
77
"scripts": {
8-
"dev": "dotenv -e .env.development -e .env.local -- vite --port 8119",
8+
"dev": "dotenv -e .env.development -e .env.local -- vite --port 8119 --force",
99
"clean": "rimraf dist && rimraf node_modules"
1010
},
1111
"keywords": [],

‎examples/js-example/stack.ts‎

Lines changed: 2 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,6 @@
1-
import { StackClientApp } from "@stackframe/js";
1+
/// <reference types="vite/client" />
22

3-
// Add type declaration for Vite's import.meta.env
4-
declare global {
5-
interface ImportMeta {
6-
env: {
7-
VITE_STACK_API_URL: string;
8-
VITE_STACK_PROJECT_ID: string;
9-
VITE_STACK_PUBLISHABLE_CLIENT_KEY: string;
10-
};
11-
}
12-
}
3+
import { StackClientApp } from "@stackframe/js";
134

145
export const stackClientApp = new StackClientApp({
156
baseUrl: import.meta.env.VITE_STACK_API_URL,

‎examples/react-example/.env.development‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
# Contains the credentials for the internal project of Stack's default development environment setup.
2+
# Do not use in a production environment, instead replace it with actual values gathered from https://app.stack-auth.com.
3+
4+
VITE_STACK_API_URL=http://localhost:8102
5+
VITE_STACK_PROJECT_ID=internal
6+
VITE_STACK_PUBLISHABLE_CLIENT_KEY=this-publishable-client-key-is-for-local-development-only

‎examples/react-example/README.md‎

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
# React + TypeScript + Vite
2+
3+
This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
4+
5+
Currently, two official plugins are available:
6+
7+
- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
8+
- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
9+
10+
## Expanding the ESLint configuration
11+
12+
If you are developing a production application, we recommend updating the configuration to enable type aware lint rules:
13+
14+
- Configure the top-level `parserOptions` property like this:
15+
16+
```js
17+
export default tseslint.config({
18+
languageOptions: {
19+
// other options...
20+
parserOptions: {
21+
project: ['./tsconfig.node.json', './tsconfig.app.json'],
22+
tsconfigRootDir: import.meta.dirname,
23+
},
24+
},
25+
})
26+
```
27+
28+
- Replace `tseslint.configs.recommended` to `tseslint.configs.recommendedTypeChecked` or `tseslint.configs.strictTypeChecked`
29+
- Optionally add `...tseslint.configs.stylisticTypeChecked`
30+
- Install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and update the config:
31+
32+
```js
33+
// eslint.config.js
34+
import react from 'eslint-plugin-react'
35+
36+
export default tseslint.config({
37+
// Set the react version
38+
settings: { react: { version: '18.3' } },
39+
plugins: {
40+
// Add the react plugin
41+
react,
42+
},
43+
rules: {
44+
// other rules...
45+
// Enable its recommended rules
46+
...react.configs.recommended.rules,
47+
...react.configs['jsx-runtime'].rules,
48+
},
49+
})
50+
```

‎examples/react-example/eslint.config.js‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
import js from '@eslint/js'
2+
import globals from 'globals'
3+
import reactHooks from 'eslint-plugin-react-hooks'
4+
import reactRefresh from 'eslint-plugin-react-refresh'
5+
import tseslint from 'typescript-eslint'
6+
7+
export default tseslint.config(
8+
{ ignores: ['dist'] },
9+
{
10+
extends: [js.configs.recommended, ...tseslint.configs.recommended],
11+
files: ['**/*.{ts,tsx}'],
12+
languageOptions: {
13+
ecmaVersion: 2020,
14+
globals: globals.browser,
15+
},
16+
plugins: {
17+
'react-hooks': reactHooks,
18+
'react-refresh': reactRefresh,
19+
},
20+
rules: {
21+
...reactHooks.configs.recommended.rules,
22+
'react-refresh/only-export-components': [
23+
'warn',
24+
{ allowConstantExport: true },
25+
],
26+
},
27+
},
28+
)

‎examples/react-example/index.html‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<title>Stack Auth React Example</title>
8+
</head>
9+
<body>
10+
<div id="root"></div>
11+
<script type="module" src="/src/main.tsx"></script>
12+
</body>
13+
</html>

‎examples/react-example/package.json‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
{
2+
"name": "react-example",
3+
"private": true,
4+
"version": "0.0.0",
5+
"type": "module",
6+
"scripts": {
7+
"dev": "vite --force --port 8120",
8+
"build": "tsc -b && vite build",
9+
"clean": "rimraf dist && rimraf node_modules",
10+
"lint": "eslint .",
11+
"preview": "vite preview"
12+
},
13+
"dependencies": {
14+
"@stackframe/react": "workspace:*",
15+
"react": "^19.0.0",
16+
"react-dom": "^19.0.0",
17+
"react-router-dom": "^7.2.0"
18+
},
19+
"devDependencies": {
20+
"@eslint/js": "^9.19.0",
21+
"@types/react": "^19.0.8",
22+
"@types/react-dom": "^19.0.3",
23+
"@vitejs/plugin-react": "^4.3.4",
24+
"eslint": "^9.19.0",
25+
"eslint-plugin-react-hooks": "^5.0.0",
26+
"eslint-plugin-react-refresh": "^0.4.18",
27+
"globals": "^15.14.0",
28+
"typescript": "~5.7.2",
29+
"typescript-eslint": "^8.22.0",
30+
"vite": "^6.1.0"
31+
}
32+
}

‎examples/react-example/src/App.tsx‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
import { StackHandler, StackProvider, StackTheme } from "@stackframe/react";
2+
import { Suspense } from "react";
3+
import { BrowserRouter, Route, Routes, useLocation } from "react-router-dom";
4+
import { stackClientApp } from "./stack";
5+
6+
function HandlerRoutes() {
7+
const location = useLocation();
8+
9+
return (
10+
<StackHandler app={stackClientApp} location={location.pathname} fullPage />
11+
);
12+
}
13+
14+
function App() {
15+
return (
16+
<Suspense fallback={null}>
17+
<BrowserRouter>
18+
<StackProvider app={stackClientApp}>
19+
<StackTheme>
20+
<Routes>
21+
<Route path="/handler/*" element={<HandlerRoutes />} />
22+
<Route path="/" element={<div>hello world</div>} />
23+
</Routes>
24+
</StackTheme>
25+
</StackProvider>
26+
</BrowserRouter>
27+
</Suspense>
28+
);
29+
}
30+
31+
export default App;

0 commit comments

Comments
 (0)