Skip to content

Commit 4a1d748

Browse files
wobsorianonikosdouvlisbrkalowheatlikeheatwavedstaley
authored
feat(tanstack-react-start): Introduce middleware and support for TanStack Start RC (#6859)
Co-authored-by: Nikos Douvlis <[email protected]> Co-authored-by: Bryce Kalow <[email protected]> Co-authored-by: Heat Hamilton <[email protected]> Co-authored-by: Dylan Staley <[email protected]> Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> Co-authored-by: Jacek Radko <[email protected]> Co-authored-by: Clerk Cookie <[email protected]> Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
1 parent aa7210c commit 4a1d748

File tree

23 files changed

+355
-495
lines changed

23 files changed

+355
-495
lines changed

‎.changeset/spotty-cooks-march.md‎

Lines changed: 72 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,72 @@
1+
---
2+
"@clerk/tanstack-react-start": minor
3+
---
4+
5+
Added support for [TanStack Start v1 RC](https://tanstack.com/blog/announcing-tanstack-start-v1)! Includes a new `clerkMiddleware()` global middleware replacing the custom server handler.
6+
7+
Usage:
8+
9+
1. Create a `src/start.ts` file and add `clerkMiddleware()` to the list of request middlewares:
10+
11+
```ts
12+
// src/start.ts
13+
import { clerkMiddleware } from '@clerk/tanstack-react-start/server'
14+
import { createStart } from '@tanstack/react-start'
15+
16+
export const startInstance = createStart(() => {
17+
return {
18+
requestMiddleware: [clerkMiddleware()],
19+
}
20+
})
21+
```
22+
23+
2. Add `<ClerkProvider>` to your root route
24+
25+
```tsx
26+
// src/routes/__root.tsx
27+
import { ClerkProvider } from '@clerk/tanstack-react-start'
28+
29+
export const Route = createRootRoute({...})
30+
31+
function RootDocument({ children }: { children: React.ReactNode }) {
32+
return (
33+
<ClerkProvider>
34+
<html>
35+
<head>
36+
<HeadContent />
37+
</head>
38+
<body>
39+
{children}
40+
<Scripts />
41+
</body>
42+
</html>
43+
</ClerkProvider>
44+
)
45+
}
46+
```
47+
48+
The `getAuth()` helper is now `auth()` and can now be called within server routes and functions, without passing a Request object:
49+
50+
```ts
51+
import { auth } from '@clerk/tanstack-react-start/server'
52+
53+
const authStateFn = createServerFn().handler(async () => {
54+
const { userId } = await auth()
55+
56+
if (!userId) {
57+
throw redirect({
58+
to: '/sign-in',
59+
})
60+
}
61+
62+
return { userId }
63+
})
64+
65+
export const Route = createFileRoute('/')({
66+
component: Home,
67+
beforeLoad: async () => await authStateFn(),
68+
loader: async ({ context }) => {
69+
return { userId: context.userId }
70+
},
71+
})
72+
```

‎.github/workflows/ci.yml‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -292,7 +292,7 @@ jobs:
292292
'astro',
293293
'expo-web',
294294
'tanstack-react-start',
295-
'tanstack-react-router',
295+
# 'tanstack-react-router',
296296
'vue',
297297
'nuxt',
298298
'react-router',

‎integration/templates/tanstack-react-start/package.json‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -8,9 +8,9 @@
88
"start": "vite start --port=$PORT"
99
},
1010
"dependencies": {
11-
"@tanstack/react-router": "1.131.27",
12-
"@tanstack/react-router-devtools": "1.131.27",
13-
"@tanstack/react-start": "1.131.27",
11+
"@tanstack/react-router": "1.132.31",
12+
"@tanstack/react-router-devtools": "1.132.31",
13+
"@tanstack/react-start": "1.132.31",
1414
"react": "18.3.1",
1515
"react-dom": "18.3.1",
1616
"tailwind-merge": "^2.5.4"
@@ -20,9 +20,10 @@
2020
"@types/node": "^22.5.4",
2121
"@types/react": "^19.0.8",
2222
"@types/react-dom": "^19.0.3",
23+
"@vitejs/plugin-react": "^4.3.4",
2324
"tailwindcss": "^4.0.8",
2425
"typescript": "^5.7.2",
25-
"vite": "^6.0.11",
26+
"vite": "^7.1.7",
2627
"vite-tsconfig-paths": "^5.1.4"
2728
}
2829
}

‎integration/templates/tanstack-react-start/src/router.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
1-
import { createRouter as createTanStackRouter } from '@tanstack/react-router';
1+
import { createRouter } from '@tanstack/react-router';
22
import { routeTree } from './routeTree.gen';
33

4-
export function createRouter() {
5-
const router = createTanStackRouter({
4+
export function getRouter() {
5+
const router = createRouter({
66
routeTree,
77
defaultPreload: 'intent',
88
defaultErrorComponent: err => <p>{err.error.stack}</p>,
@@ -15,6 +15,6 @@ export function createRouter() {
1515

1616
declare module '@tanstack/react-router' {
1717
interface Register {
18-
router: ReturnType<typeof createRouter>;
18+
router: ReturnType<typeof getRouter>;
1919
}
2020
}

‎integration/templates/tanstack-react-start/src/routes/user.tsx‎

Lines changed: 2 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,9 @@
11
import { createFileRoute, redirect } from '@tanstack/react-router';
22
import { createServerFn } from '@tanstack/react-start';
3-
import { getAuth } from '@clerk/tanstack-react-start/server';
4-
import { getWebRequest } from '@tanstack/react-start/server';
3+
import { auth } from '@clerk/tanstack-react-start/server';
54

65
const fetchClerkAuth = createServerFn({ method: 'GET' }).handler(async () => {
7-
const request = getWebRequest();
8-
if (!request) throw new Error('No request found');
9-
10-
const { userId } = await getAuth(request);
6+
const { userId } = await auth();
117

128
return {
139
userId,

‎integration/templates/tanstack-react-start/src/server.tsx‎

Lines changed: 0 additions & 14 deletions
This file was deleted.

‎integration/templates/tanstack-react-start/src/start.ts‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
import { clerkMiddleware } from '@clerk/tanstack-react-start/server';
2+
import { createStart } from '@tanstack/react-start';
3+
4+
export const startInstance = createStart(() => {
5+
return {
6+
requestMiddleware: [clerkMiddleware()],
7+
};
8+
});

‎integration/templates/tanstack-react-start/vite.config.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import { tanstackStart } from '@tanstack/react-start/plugin/vite';
22
import { defineConfig } from 'vite';
33
import tsConfigPaths from 'vite-tsconfig-paths';
44
import tailwindcss from '@tailwindcss/vite';
5+
import viteReact from '@vitejs/plugin-react';
56

67
export default defineConfig({
78
plugins: [
@@ -10,5 +11,6 @@ export default defineConfig({
1011
}),
1112
tanstackStart(),
1213
tailwindcss(),
14+
viteReact(),
1315
],
1416
});

‎packages/tanstack-react-start/package.json‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -76,13 +76,13 @@
7676
"tslib": "catalog:repo"
7777
},
7878
"devDependencies": {
79-
"@tanstack/react-router": "1.131.49",
80-
"@tanstack/react-start": "1.131.49",
79+
"@tanstack/react-router": "1.132.0",
80+
"@tanstack/react-start": "1.132.0",
8181
"esbuild-plugin-file-path-extensions": "^2.1.4"
8282
},
8383
"peerDependencies": {
84-
"@tanstack/react-router": "^1.131.0 <1.132.0",
85-
"@tanstack/react-start": "^1.131.0 <1.132.0",
84+
"@tanstack/react-router": "^1.132.0",
85+
"@tanstack/react-start": "^1.132.0",
8686
"react": "catalog:peer-react",
8787
"react-dom": "catalog:peer-react"
8888
},

‎packages/tanstack-react-start/src/__tests__/__snapshots__/exports.test.ts.snap‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -68,9 +68,9 @@ exports[`root public exports > should not change unexpectedly 1`] = `
6868

6969
exports[`server public exports > should not change unexpectedly 1`] = `
7070
[
71+
"auth",
7172
"clerkClient",
72-
"createClerkHandler",
73-
"getAuth",
73+
"clerkMiddleware",
7474
]
7575
`;
7676

0 commit comments

Comments
 (0)