Skip to content

Commit 4437739

Browse files
birkskyumautofix-ci[bot]
birkskyum
and
autofix-ci[bot]
authored
docs: start auth.js example (#5962)
* docs: start auth.js example * ci: apply automated fixes * bump start-authjs * add auth.js to docs --------- Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>
1 parent 97afc67 commit 4437739

38 files changed

+1493
-1
lines changed

‎docs/start/config.json‎

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -301,6 +301,10 @@
301301
"label": "Material UI",
302302
"to": "framework/react/examples/start-material-ui"
303303
},
304+
{
305+
"label": "Basic + Auth.js",
306+
"to": "framework/solid/examples/start-basic-authjs"
307+
},
304308
{
305309
"label": "Basic + Static rendering",
306310
"to": "framework/react/examples/start-basic-static"
@@ -331,9 +335,13 @@
331335
"to": "framework/solid/examples/start-supabase-basic"
332336
},
333337
{
334-
"label": "Bare + Convex + Better Auth",
338+
"label": "Basic + Convex + Better Auth",
335339
"to": "framework/solid/examples/start-convex-better-auth"
336340
},
341+
{
342+
"label": "Basic + Auth.js",
343+
"to": "framework/solid/examples/start-basic-authjs"
344+
},
337345
{
338346
"label": "Basic + Static rendering",
339347
"to": "framework/solid/examples/start-basic-static"

‎docs/start/framework/react/guide/authentication.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@ You have several options for authentication in your TanStack Start application:
1616
1. **[Clerk](https://clerk.dev)** - Complete authentication platform with UI components
1717
2. **[WorkOS](https://workos.com)** - Enterprise-focused with SSO and compliance features
1818
3. **[Better Auth](https://www.better-auth.com/)** - Open-source TypeScript library
19+
4. **[Auth.js](https://authjs.dev/)** - Open-source library supporting 80+ OAuth providers
1920

2021
**DIY Implementation Benefits:**
2122

‎docs/start/framework/solid/guide/authentication.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@ You have several options for authentication in your TanStack Start application:
1616
1. **[Clerk](https://clerk.dev)** - Complete authentication platform with UI components
1717
2. **[WorkOS](https://workos.com)** - Enterprise-focused with SSO and compliance features
1818
3. **[Better Auth](https://www.better-auth.com/)** - Open-source TypeScript library
19+
4. **[Auth.js](https://authjs.dev/)** - Open-source library supporting 80+ OAuth providers
1920

2021
**DIY Implementation Benefits:**
2122

‎examples/react/start-basic-authjs/.env.example‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
# Auth.js Configuration
2+
AUTH_SECRET=your-secret-key-here-min-32-chars-long
3+
4+
# Auth.js URL (must include the auth path)
5+
AUTH_URL=http://localhost:10000/api/auth
6+
7+
# Auth0 Configuration (https://manage.auth0.com)
8+
# Auth.js auto-reads these env vars for the Auth0 provider
9+
AUTH_AUTH0_ID=your-auth0-client-id
10+
AUTH_AUTH0_SECRET=your-auth0-client-secret
11+
AUTH_AUTH0_ISSUER=https://your-tenant.auth0.com

‎examples/react/start-basic-authjs/.gitignore‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
node_modules
2+
dist
3+
.env
4+
*.local
5+
.DS_Store
6+
.tanstack

‎examples/react/start-basic-authjs/package.json‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
{
2+
"name": "tanstack-router-react-example-basic-authjs",
3+
"private": true,
4+
"sideEffects": false,
5+
"type": "module",
6+
"scripts": {
7+
"dev": "vite dev",
8+
"build": "vite build",
9+
"preview": "vite preview",
10+
"start": "pnpx srvx --prod -s ../client dist/server/server.js"
11+
},
12+
"dependencies": {
13+
"@auth/core": "^0.41.1",
14+
"@tanstack/react-router": "^1.139.3",
15+
"@tanstack/react-router-devtools": "^1.139.3",
16+
"@tanstack/react-start": "^1.139.3",
17+
"start-authjs": "^1.0.0",
18+
"react": "^19.0.0",
19+
"react-dom": "^19.0.0",
20+
"tailwind-merge": "^2.6.0"
21+
},
22+
"devDependencies": {
23+
"@tailwindcss/postcss": "^4.1.15",
24+
"@types/node": "^22.5.4",
25+
"@types/react": "^19.0.8",
26+
"@types/react-dom": "^19.0.3",
27+
"postcss": "^8.5.1",
28+
"tailwindcss": "^4.1.15",
29+
"typescript": "^5.7.2",
30+
"vite": "^7.1.7",
31+
"@vitejs/plugin-react": "^4.6.0",
32+
"vite-tsconfig-paths": "^5.1.4"
33+
}
34+
}

‎examples/react/start-basic-authjs/postcss.config.mjs‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
export default {
2+
plugins: {
3+
'@tailwindcss/postcss': {},
4+
},
5+
}

‎examples/react/start-basic-authjs/src/components/DefaultCatchBoundary.tsx‎

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
import {
2+
ErrorComponent,
3+
Link,
4+
rootRouteId,
5+
useMatch,
6+
useRouter,
7+
} from '@tanstack/react-router'
8+
import type { ErrorComponentProps } from '@tanstack/react-router'
9+
10+
export function DefaultCatchBoundary({ error }: ErrorComponentProps) {
11+
const router = useRouter()
12+
const isRoot = useMatch({
13+
strict: false,
14+
select: (state) => state.id === rootRouteId,
15+
})
16+
17+
console.error('DefaultCatchBoundary Error:', error)
18+
19+
return (
20+
<div className="min-w-0 flex-1 p-4 flex flex-col items-center justify-center gap-6">
21+
<ErrorComponent error={error} />
22+
<div className="flex gap-2 items-center flex-wrap">
23+
<button
24+
onClick={() => {
25+
router.invalidate()
26+
}}
27+
className={`px-2 py-1 bg-gray-600 dark:bg-gray-700 rounded-sm text-white uppercase font-extrabold`}
28+
>
29+
Try Again
30+
</button>
31+
{isRoot ? (
32+
<Link
33+
to="/"
34+
className={`px-2 py-1 bg-gray-600 dark:bg-gray-700 rounded-sm text-white uppercase font-extrabold`}
35+
>
36+
Home
37+
</Link>
38+
) : (
39+
<Link
40+
to="/"
41+
className={`px-2 py-1 bg-gray-600 dark:bg-gray-700 rounded-sm text-white uppercase font-extrabold`}
42+
onClick={(e) => {
43+
e.preventDefault()
44+
window.history.back()
45+
}}
46+
>
47+
Go Back
48+
</Link>
49+
)}
50+
</div>
51+
</div>
52+
)
53+
}

‎examples/react/start-basic-authjs/src/components/NotFound.tsx‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
import { Link } from '@tanstack/react-router'
2+
3+
export function NotFound({ children }: { children?: any }) {
4+
return (
5+
<div className="space-y-2 p-2">
6+
<div className="text-gray-600 dark:text-gray-400">
7+
{children || <p>The page you are looking for does not exist.</p>}
8+
</div>
9+
<p className="flex items-center gap-2 flex-wrap">
10+
<button
11+
onClick={() => window.history.back()}
12+
className="bg-emerald-500 text-white px-2 py-1 rounded-sm uppercase font-black text-sm"
13+
>
14+
Go back
15+
</button>
16+
<Link
17+
to="/"
18+
className="bg-cyan-600 text-white px-2 py-1 rounded-sm uppercase font-black text-sm"
19+
>
20+
Start Over
21+
</Link>
22+
</p>
23+
</div>
24+
)
25+
}

‎examples/react/start-basic-authjs/src/routeTree.gen.ts‎

Lines changed: 122 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,122 @@
1+
/* eslint-disable */
2+
3+
// @ts-nocheck
4+
5+
// noinspection JSUnusedGlobalSymbols
6+
7+
// This file was automatically generated by TanStack Router.
8+
// You should NOT make any changes in this file as it will be overwritten.
9+
// Additionally, you should also exclude this file from your linter and/or formatter to prevent it from being checked or modified.
10+
11+
import { Route as rootRouteImport } from './routes/__root'
12+
import { Route as ProtectedRouteImport } from './routes/protected'
13+
import { Route as LoginRouteImport } from './routes/login'
14+
import { Route as IndexRouteImport } from './routes/index'
15+
import { Route as ApiAuthSplatRouteImport } from './routes/api/auth/$'
16+
17+
const ProtectedRoute = ProtectedRouteImport.update({
18+
id: '/protected',
19+
path: '/protected',
20+
getParentRoute: () => rootRouteImport,
21+
} as any)
22+
const LoginRoute = LoginRouteImport.update({
23+
id: '/login',
24+
path: '/login',
25+
getParentRoute: () => rootRouteImport,
26+
} as any)
27+
const IndexRoute = IndexRouteImport.update({
28+
id: '/',
29+
path: '/',
30+
getParentRoute: () => rootRouteImport,
31+
} as any)
32+
const ApiAuthSplatRoute = ApiAuthSplatRouteImport.update({
33+
id: '/api/auth/$',
34+
path: '/api/auth/$',
35+
getParentRoute: () => rootRouteImport,
36+
} as any)
37+
38+
export interface FileRoutesByFullPath {
39+
'/': typeof IndexRoute
40+
'/login': typeof LoginRoute
41+
'/protected': typeof ProtectedRoute
42+
'/api/auth/$': typeof ApiAuthSplatRoute
43+
}
44+
export interface FileRoutesByTo {
45+
'/': typeof IndexRoute
46+
'/login': typeof LoginRoute
47+
'/protected': typeof ProtectedRoute
48+
'/api/auth/$': typeof ApiAuthSplatRoute
49+
}
50+
export interface FileRoutesById {
51+
__root__: typeof rootRouteImport
52+
'/': typeof IndexRoute
53+
'/login': typeof LoginRoute
54+
'/protected': typeof ProtectedRoute
55+
'/api/auth/$': typeof ApiAuthSplatRoute
56+
}
57+
export interface FileRouteTypes {
58+
fileRoutesByFullPath: FileRoutesByFullPath
59+
fullPaths: '/' | '/login' | '/protected' | '/api/auth/$'
60+
fileRoutesByTo: FileRoutesByTo
61+
to: '/' | '/login' | '/protected' | '/api/auth/$'
62+
id: '__root__' | '/' | '/login' | '/protected' | '/api/auth/$'
63+
fileRoutesById: FileRoutesById
64+
}
65+
export interface RootRouteChildren {
66+
IndexRoute: typeof IndexRoute
67+
LoginRoute: typeof LoginRoute
68+
ProtectedRoute: typeof ProtectedRoute
69+
ApiAuthSplatRoute: typeof ApiAuthSplatRoute
70+
}
71+
72+
declare module '@tanstack/react-router' {
73+
interface FileRoutesByPath {
74+
'/protected': {
75+
id: '/protected'
76+
path: '/protected'
77+
fullPath: '/protected'
78+
preLoaderRoute: typeof ProtectedRouteImport
79+
parentRoute: typeof rootRouteImport
80+
}
81+
'/login': {
82+
id: '/login'
83+
path: '/login'
84+
fullPath: '/login'
85+
preLoaderRoute: typeof LoginRouteImport
86+
parentRoute: typeof rootRouteImport
87+
}
88+
'/': {
89+
id: '/'
90+
path: '/'
91+
fullPath: '/'
92+
preLoaderRoute: typeof IndexRouteImport
93+
parentRoute: typeof rootRouteImport
94+
}
95+
'/api/auth/$': {
96+
id: '/api/auth/$'
97+
path: '/api/auth/$'
98+
fullPath: '/api/auth/$'
99+
preLoaderRoute: typeof ApiAuthSplatRouteImport
100+
parentRoute: typeof rootRouteImport
101+
}
102+
}
103+
}
104+
105+
const rootRouteChildren: RootRouteChildren = {
106+
IndexRoute: IndexRoute,
107+
LoginRoute: LoginRoute,
108+
ProtectedRoute: ProtectedRoute,
109+
ApiAuthSplatRoute: ApiAuthSplatRoute,
110+
}
111+
export const routeTree = rootRouteImport
112+
._addFileChildren(rootRouteChildren)
113+
._addFileTypes<FileRouteTypes>()
114+
115+
import type { getRouter } from './router.tsx'
116+
import type { createStart } from '@tanstack/react-start'
117+
declare module '@tanstack/react-start' {
118+
interface Register {
119+
ssr: true
120+
router: Awaited<ReturnType<typeof getRouter>>
121+
}
122+
}

0 commit comments

Comments
 (0)