Protected routes example

src/routeTree.gen.ts

@@ -9,50 +9,93 @@
 // Additionally, you should also exclude this file from your linter and/or formatter to prevent it from being checked or modified.
 
 import { Route as rootRouteImport } from './routes/__root'
+import { Route as ProtectedRouteImport } from './routes/_protected'
 import { Route as IndexRouteImport } from './routes/index'
+import { Route as ProtectedAdminIndexRouteImport } from './routes/_protected/admin/index'
 
+const ProtectedRoute = ProtectedRouteImport.update({
+  id: '/_protected',
+  getParentRoute: () => rootRouteImport,
+} as any)
 const IndexRoute = IndexRouteImport.update({
   id: '/',
   path: '/',
   getParentRoute: () => rootRouteImport,
 } as any)
+const ProtectedAdminIndexRoute = ProtectedAdminIndexRouteImport.update({
+  id: '/admin/',
+  path: '/admin/',
+  getParentRoute: () => ProtectedRoute,
+} as any)
 
 export interface FileRoutesByFullPath {
   '/': typeof IndexRoute
+  '/admin/': typeof ProtectedAdminIndexRoute
 }
 export interface FileRoutesByTo {
   '/': typeof IndexRoute
+  '/admin': typeof ProtectedAdminIndexRoute
 }
 export interface FileRoutesById {
   __root__: typeof rootRouteImport
   '/': typeof IndexRoute
+  '/_protected': typeof ProtectedRouteWithChildren
+  '/_protected/admin/': typeof ProtectedAdminIndexRoute
 }
 export interface FileRouteTypes {
   fileRoutesByFullPath: FileRoutesByFullPath
-  fullPaths: '/'
+  fullPaths: '/' | '/admin/'
   fileRoutesByTo: FileRoutesByTo
-  to: '/'
-  id: '__root__' | '/'
+  to: '/' | '/admin'
+  id: '__root__' | '/' | '/_protected' | '/_protected/admin/'
   fileRoutesById: FileRoutesById
 }
 export interface RootRouteChildren {
   IndexRoute: typeof IndexRoute
+  ProtectedRoute: typeof ProtectedRouteWithChildren
 }
 
 declare module '@tanstack/react-router' {
   interface FileRoutesByPath {
+    '/_protected': {
+      id: '/_protected'
+      path: ''
+      fullPath: '/'
+      preLoaderRoute: typeof ProtectedRouteImport
+      parentRoute: typeof rootRouteImport
+    }
     '/': {
       id: '/'
       path: '/'
       fullPath: '/'
       preLoaderRoute: typeof IndexRouteImport
       parentRoute: typeof rootRouteImport
     }
+    '/_protected/admin/': {
+      id: '/_protected/admin/'
+      path: '/admin'
+      fullPath: '/admin/'
+      preLoaderRoute: typeof ProtectedAdminIndexRouteImport
+      parentRoute: typeof ProtectedRoute
+    }
   }
 }
 
+interface ProtectedRouteChildren {
+  ProtectedAdminIndexRoute: typeof ProtectedAdminIndexRoute
+}
+
+const ProtectedRouteChildren: ProtectedRouteChildren = {
+  ProtectedAdminIndexRoute: ProtectedAdminIndexRoute,
+}
+
+const ProtectedRouteWithChildren = ProtectedRoute._addFileChildren(
+  ProtectedRouteChildren,
+)
+
 const rootRouteChildren: RootRouteChildren = {
   IndexRoute: IndexRoute,
+  ProtectedRoute: ProtectedRouteWithChildren,
 }
 export const routeTree = rootRouteImport
   ._addFileChildren(rootRouteChildren)

src/routes/_protected.tsx

@@ -0,0 +1,28 @@
+import { auth, clerkClient } from '@clerk/tanstack-react-start/server'
+import { createFileRoute, redirect } from '@tanstack/react-router'
+import { createServerFn } from '@tanstack/react-start'
+
+// Server function to check auth and redirect to login if not authenticated
+const checkAuth = createServerFn().handler(async () => {
+  try {
+    const { isAuthenticated, userId } = await auth()
+    if (!isAuthenticated) {
+      throw redirect({ to: '/' })
+    }
+
+    // Get the user's full `Backend User` object
+    const user = await clerkClient().users.getUser(userId)
+
+    return { userId, firstName: user?.firstName }
+  } catch (error) {
+    throw redirect({ to: '/' })
+  }
+})
+
+// Protected route with auth check
+export const Route = createFileRoute('/_protected')({
+  beforeLoad: async () => await checkAuth(),
+  loader: async ({ context }) => {
+    return { userId: context.userId, firstName: context.firstName }
+  },
+})

src/routes/_protected/admin/index.tsx

@@ -0,0 +1,16 @@
+import { UserButton } from '@clerk/tanstack-react-start';
+import { createFileRoute, useLoaderData } from '@tanstack/react-router'
+
+export const Route = createFileRoute('/_protected/admin/')({
+  component: RouteComponent,
+})
+
+function RouteComponent() {
+  const { firstName } = useLoaderData({ from: '/_protected' });
+  return (
+    <div>
+      <p>Hello {firstName}!</p>
+      <UserButton />
+    </div>
+  )
+}