Update the Clerk + TanStack Start template for TanStack Start RC

template-tanstack-start-clerk/package.json

@@ -12,13 +12,13 @@
     "format": "prettier --write ."
   },
   "dependencies": {
-    "@clerk/tanstack-react-start": "0.24.0",
+    "@clerk/tanstack-react-start": "^0.26.0",
     "@convex-dev/react-query": "0.0.0-alpha.11",
     "@tanstack/react-query": "^5.89.0",
-    "@tanstack/react-router-devtools": "^1.131.44",
+    "@tanstack/react-router-devtools": "^1.133.1",
+    "@tanstack/react-router": "^1.132.47",
     "@tanstack/react-router-with-query": "^1.130.17",
-    "@tanstack/react-router": "^1.131.44",
-    "@tanstack/react-start": "^1.131.44",
+    "@tanstack/react-start": "^1.133.2",
     "convex": "^1.27.0",
     "react-dom": "^19.1.1",
     "react": "^19.1.1",
@@ -29,6 +29,7 @@
     "@types/node": "^24.5.1",
     "@types/react-dom": "^19.1.9",
     "@types/react": "^19.1.13",
+    "@vitejs/plugin-react": "^5.0.3",
     "autoprefixer": "^10.4.21",
     "concurrently": "~9.2.1",
     "prettier": "^3.6.2",

template-tanstack-start-clerk/src/routeTree.gen.ts

@@ -117,3 +117,13 @@ const rootRouteChildren: RootRouteChildren = {
 export const routeTree = rootRouteImport
   ._addFileChildren(rootRouteChildren)
   ._addFileTypes<FileRouteTypes>()
+
+import type { getRouter } from './router.tsx'
+import type { startInstance } from './start.ts'
+declare module '@tanstack/react-start' {
+  interface Register {
+    ssr: true
+    router: Awaited<ReturnType<typeof getRouter>>
+    config: Awaited<ReturnType<typeof startInstance.getOptions>>
+  }
+}

template-tanstack-start-clerk/src/router.tsx

@@ -1,11 +1,11 @@
-import { createRouter as createTanStackRouter } from '@tanstack/react-router'
+import { createRouter } from '@tanstack/react-router'
 import { routeTree } from './routeTree.gen'
 import { routerWithQueryClient } from '@tanstack/react-router-with-query'
 import { ConvexProvider, ConvexReactClient } from 'convex/react'
 import { ConvexQueryClient } from '@convex-dev/react-query'
 import { QueryClient } from '@tanstack/react-query'
 
-export function createRouter() {
+export function getRouter() {
   const CONVEX_URL = (import.meta as any).env.VITE_CONVEX_URL!
   if (!CONVEX_URL) {
     throw new Error('missing VITE_CONVEX_URL envar')
@@ -20,15 +20,15 @@ export function createRouter() {
       queries: {
         queryKeyHashFn: convexQueryClient.hashFn(),
         queryFn: convexQueryClient.queryFn(),
-        gcTime: 5000
+        gcTime: 5000,
       },
     },
   })
   convexQueryClient.connect(queryClient)
 
   // @snippet start example
   const router = routerWithQueryClient(
-    createTanStackRouter({
+    createRouter({
       routeTree,
       defaultPreload: 'intent',
       scrollRestoration: true,
@@ -48,9 +48,3 @@ export function createRouter() {
 
   return router
 }
-
-declare module '@tanstack/react-router' {
-  interface Register {
-    router: ReturnType<typeof createRouter>
-  }
-}

template-tanstack-start-clerk/src/routes/__root.tsx

@@ -18,22 +18,18 @@ import { TanStackRouterDevtools } from '@tanstack/react-router-devtools'
 import { createServerFn } from '@tanstack/react-start'
 import { QueryClient } from '@tanstack/react-query'
 import * as React from 'react'
-import { getAuth } from '@clerk/tanstack-react-start/server'
-import { getWebRequest } from '@tanstack/react-start/server'
+import { auth } from '@clerk/tanstack-react-start/server'
 import appCss from '~/styles/app.css?url'
 import { ConvexQueryClient } from '@convex-dev/react-query'
 import { ConvexReactClient } from 'convex/react'
 import { ConvexProviderWithClerk } from 'convex/react-clerk'
 
 const fetchClerkAuth = createServerFn({ method: 'GET' }).handler(async () => {
-  const request = getWebRequest()
-  if (!request) throw new Error('No request found')
-
-  const auth = await getAuth(getWebRequest())
-  const token = await auth.getToken({ template: 'convex' })
+  const { getToken, userId } = await auth()
+  const token = await getToken({ template: 'convex' })
 
   return {
-    userId: auth.userId,
+    userId,
     token,
   }
 })

template-tanstack-start-clerk/src/routes/_authed.tsx

@@ -1,4 +1,4 @@
-import { createFileRoute } from '@tanstack/react-router'
+import { createFileRoute, useLocation } from '@tanstack/react-router'
 import { SignIn } from '@clerk/tanstack-react-start'
 
 export const Route = createFileRoute('/_authed')({
@@ -8,10 +8,12 @@ export const Route = createFileRoute('/_authed')({
     }
   },
   errorComponent: ({ error }) => {
+    const location = useLocation()
+
     if (error.message === 'Not authenticated') {
       return (
         <div className="flex items-center justify-center p-12">
-          <SignIn routing="hash" forceRedirectUrl={window.location.href} />
+          <SignIn routing="hash" forceRedirectUrl={location.href} />
         </div>
       )
     }

template-tanstack-start-clerk/src/start.ts

@@ -0,0 +1,8 @@
+import { clerkMiddleware } from '@clerk/tanstack-react-start/server'
+import { createStart } from '@tanstack/react-start'
+
+export const startInstance = createStart(() => {
+  return {
+    requestMiddleware: [clerkMiddleware()],
+  }
+})

template-tanstack-start-clerk/vite.config.ts

@@ -2,6 +2,7 @@ import { tanstackStart } from '@tanstack/react-start/plugin/vite'
 import { defineConfig } from 'vite'
 import tsConfigPaths from 'vite-tsconfig-paths'
 import tailwindcss from '@tailwindcss/vite'
+import viteReact from '@vitejs/plugin-react'
 
 export default defineConfig({
   server: {
@@ -13,5 +14,6 @@ export default defineConfig({
       projects: ['./tsconfig.json'],
     }),
     tanstackStart(),
+    viteReact(),
   ],
 })