clerk-tanstack-patterns

Create a createServerFn that calls auth() from @clerk/tanstack-react-start/server, throw redirect({ to: '/sign-in' }) when isAuthenticated is false, and call that server function in the route's beforeLoad. Child routes of a guarded layout route inherit the protection automatically.

Import auth from @clerk/tanstack-react-start/server inside your createServerFn handler and await it to get isAuthenticated, userId, and orgId. Throw an error or redirect when the user is not authenticated, then return the auth data for loaders or components.

This happens when clerkMiddleware is not registered in src/start.ts. Add clerkMiddleware() to the requestMiddleware array passed to createStart so the Clerk context is available to all server functions.

Server-side auth() and clerkMiddleware come from the @clerk/tanstack-react-start/server subpath, while client hooks like useAuth and useUser come from the package root. Mixing these import paths causes runtime errors.

Return the userId from beforeLoad and access it in the loader through the context argument. The loader can then query your database scoped to that userId, and the component reads results via Route.useLoaderData().

Call auth() from @clerk/tanstack-react-start/server inside the API route handler and return a 401 Response when isAuthenticated is false. Extract userId or sessionId from the auth result for authorized requests.