---
id: gh-clerk-tanstack-patterns
name: "clerk-tanstack-patterns"
url: https://skills.yangsir.net/skill/gh-clerk-tanstack-patterns
author: clerk
domain: ai-app-building-integration
tags: ["clerk", "tanstack-react-start", "authentication", "web-development", "frontend"]
install_count: 15400
rating: 4.50 (120 reviews)
github: https://github.com/clerk/skills/tree/main/skills/frameworks/clerk-tanstack-patterns
---

# clerk-tanstack-patterns

> 此 Skill 提供了将 Clerk 认证服务集成到 TanStack React Start 应用的模式和最佳实践。它帮助开发者轻松实现路由保护、服务器函数认证以及加载器中的认证上下文传递，有效避免了常见的集成陷阱，加速了安全可靠的 Web 应用开发。

**Stats**: 15,400 installs · 4.5/5 (120 reviews)

## Before / After 对比

### 认证集成效率

**Before**:

在 TanStack React Start 框架中手动配置 Clerk 认证，需要深入理解其服务器和路由层的工作机制，容易遇到 `auth()` 返回空、重定向失败等问题，耗费大量时间进行调试和排查。

**After**:

通过 Clerk TanStack Patterns 提供的标准化模式和中间件，开发者可以快速、准确地集成认证功能，显著减少了配置和调试时间，确保认证流程的顺畅和安全。

| Metric | Before | After | Change |
|---|---|---|---|
| 认证配置时间 | 120分钟 | 15分钟 | -87% |

## Readme

# 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:

1. **Server layer** — `createServerFn` + `auth()` from `@clerk/tanstack-react-start/server`
2. **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

```typescript
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(),
})
```

## Common Pitfalls

| 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 |

## See Also

- `clerk-setup` - Initial Clerk install
- `clerk-custom-ui` - Custom flows & appearance
- `clerk-orgs` - B2B organizations

## Docs

[TanStack React Start SDK](https://clerk.com/docs/tanstack-react-start/getting-started/quickstart)


---
*Source: https://skills.yangsir.net/skill/gh-clerk-tanstack-patterns*
*Markdown mirror: https://skills.yangsir.net/api/skill/gh-clerk-tanstack-patterns/markdown*