Stats
Actions
Tags
From features
Provides TanStack React Start auth patterns using @clerk/tanstack-react-start: createServerFn, beforeLoad guards, loaders, and Vinxi clerkMiddleware setup.
How this skill is triggered — by the user, by Claude, or both
Slash command
/features:clerk-tanstack-patternsThis skill is limited to the following tools:
The summary Claude sees in its skill listing — used to decide when to auto-load this skill
| Task | Reference |
evals/evals.jsonreferences/loaders.mdreferences/router-guards.mdreferences/server-functions.mdreferences/vinxi-server.mdtemplates/tanstack-basic-auth/package.jsontemplates/tanstack-basic-auth/src/router.tsxtemplates/tanstack-basic-auth/src/routes/__root.tsxtemplates/tanstack-basic-auth/src/routes/index.tsxtemplates/tanstack-basic-auth/src/start.tstemplates/tanstack-basic-auth/tsconfig.jsontemplates/tanstack-basic-auth/vite.config.ts| 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 organizationsnpx claudepluginhub clerk/skills --plugin mobileProvides React SPA auth patterns using @clerk/react for Vite/CRA: ClerkProvider setup, useAuth/useUser/useClerk hooks, React Router protected routes, custom sign-in flows.
Guides setup, configuration, and usage of TanStack Start full-stack React framework with SSR, streaming, server functions, routes, middleware, and Vite. For app creation, deployment, auth, Tailwind integration, and Next.js migrations.
Provides Clerk SDK patterns for Next.js authentication: server auth checks, client hooks, middleware protection, and user data access.