OverviewHistoryStatsSecurity
npx skills add ...
Documentation
SKILL.md
npx skills add clerk/skills --skill clerk-tanstack-patterns
TanStack React Start auth patterns with @clerk/tanstack-react-start
npx skills add clerk/skills --skill clerk-tanstack-patterns
| Task | Reference |
|---|---|
| Protect routes with beforeLoad | references/router-guards.md |
| Auth in createServerFn | references/server-functions.md |
| Pass auth to loaders | references/loaders.md |
| Configure Vinxi + clerkMiddleware | references/vinxi-server.md |
| Reference | Description |
|---|---|
references/router-guards.md | beforeLoad auth redirect |
references/server-functions.md | createServerFn with auth() |
references/loaders.md | Auth context in loaders |
references/vinxi-server.md | clerkMiddleware() setup |
.env:
src/start.ts (Vinxi entry):
src/routes/__root.tsx — wrap with <ClerkProvider>:
TanStack Start runs on Vinxi. Auth flows through two layers:
createServerFn + auth() from @clerk/tanstack-react-start/serverbeforeLoad on route definitions, throws redirect for unauthenticatedBoth layers are server-executed. Client hooks (useAuth, useUser) are React hooks for the browser side.
| Symptom | Cause | Fix |
|---|---|---|
auth() returns empty | Missing clerkMiddleware in start.ts | Add to requestMiddleware array |
redirect not thrown | Using return instead of throw | throw redirect(...) in TanStack |
Wrong import for auth | Mixing client/server imports | Server: @clerk/tanstack-react-start/server |
| Loader context missing userId | Not passing from beforeLoad | Return from beforeLoad, access via context |
ClerkProvider missing | Forgot root wrapping | Add to __root.tsx shell component |
clerk-setup - Initial Clerk installclerk-custom-ui - Custom flows & appearanceclerk-orgs - B2B organizationsimport { ClerkProvider } from '@clerk/tanstack-react-start'
function RootDocument({ children }: { children: React.ReactNode }) {
return (
<html lang="en">
<body>
<ClerkProvider>
{children}
</ClerkProvider>
</body>
</html>
)
}import { createFileRoute, redirect } from '@tanstack/react-router'
import { createServerFn } from '@tanstack/react-start'
import { auth } from '@clerk/tanstack-react-start/server'
const authStateFn = createServerFn().handler(async () => {
const { isAuthenticated, userId } = await auth()
if (!isAuthenticated) {
throw redirect({ to: '/sign-in' })
}
return { userId }
})
export const Route = createFileRoute('/dashboard')({
beforeLoad: async () => await authStateFn(),
})