clerk-tanstack-patterns

Original：🇺🇸 English

Translated

2 scriptsChecked / no sensitive code detected

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.

4installs

Sourceclerk/skills

Added on2026-04-07

NPX Install

npx skill4agent add clerk/skills clerk-tanstack-patterns

SKILL.md Content

View Translation Comparison →

TanStack React Start Patterns

What Do You Need?

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

References

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

Setup

npm install @clerk/tanstack-react-start

.env

:

CLERK_PUBLISHABLE_KEY=pk_...
CLERK_SECRET_KEY=sk_...

src/start.ts

(Vinxi entry):

typescript

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>

:

tsx

import { ClerkProvider } from '@clerk/tanstack-react-start'

function RootDocument({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>
        <ClerkProvider>
          {children}
        </ClerkProvider>
      </body>
    </html>
  )
}

Mental Model

TanStack Start runs on Vinxi. Auth flows through two layers:

Server layer —

createServerFn

+

auth()

from

@clerk/tanstack-react-start/server

Router layer —
```
beforeLoad
```
on route definitions, throws
```
redirect
```
for unauthenticated

Both layers are server-executed. Client hooks (

useAuth

,

useUser

) are React hooks for the browser side.

Minimal Pattern