Setting the chapter. One moment.
Skills
Chapter 18 of 22
TanStack React Start auth patterns with @clerk/tanstack-react-start - createServerFn, beforeLoad guards, loaders, Vinxi server.
1 minute · 161 words · 9 sections
22 chapters · 80 min
| 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 |
npm install @clerk/tanstack-react-start.env:
CLERK_PUBLISHABLE_KEY=pk_...
CLERK_SECRET_KEY=sk_...src/start.ts (Vinxi entry):
import { clerkMiddleware } from '@clerk/tanstack-react-start/server'
import { createStart } from '@tanstack/react-start'
export const startInstance = createStart(() => {
return {
requestMiddleware: [clerkMiddleware()],
}
})src/routes/__root.tsx — wrap with <ClerkProvider>:
import { ClerkProvider } from '@clerk/tanstack-react-start'
function RootDocument({ children }: { children: React.ReactNode }) {
return (
<html lang="en">
<body>
<ClerkProvider>
{children}
</ClerkProvider>
</body>
</html>
)
}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.
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(),
})| 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 organizationsInstall this repository
npx skills add clerk/skills/plugin marketplace add clerk/skillsSkills install per repository, not per chapter — the CLI has no documented per-skill form, so we do not print one.
TanStack React Start auth patterns with @clerk/tanstack-react-start - createServerFn, beforeLoad guards, loaders, Vinxi server. Triggers on: TanStack auth, createServerFn clerk, beforeLoad protection, TanStack Start middleware.
The verbatim description from this skill’s front matter — the string an agent matches on to decide whether to load it.
WebFetchskills/frameworks/clerk-tanstack-patterns/SKILL.mdmain, last pushed 6 August 2026.SKILL.md, not by matching a directory convention. 5 distinct layouts observed: .agents/skills/*/SKILL.md, skills/core/*/SKILL.md, skills/features/*/SKILL.md, skills/frameworks/*/SKILL.md, skills/mobile/*/SKILL.md.h1 and no skipped levels:.claude-plugin/marketplace.json by Clerk, declaring 4 plugins. It is read for editorial metadata only — never as the skill index, which is always the repository tree./clerk/skills.md, and each chapter at its own .md URL.12 files · 16 KB
Everything this skill ships beside its prose. All of it is set here, as subchapters of chapter 18.
Documentation the agent loads on demand, rather than up front.
Templates, schemas and fixtures the skill draws on.
Everything else published alongside the skill.