AutoGineer
Generated banner for Clerk Tanstack Patterns
Generated logo for Clerk Tanstack Patterns

Clerk Tanstack Patterns

ClerkOfficialCreated by clerk

  • Skill
  • Tool integration
  • Software development
  • MIT
  • Low risk
  • Has scripts
Download ZIP

From the author

TanStack React Start auth patterns with @clerk/tanstack-react-start - createServerFn, beforeLoad guards, loaders, Vite plugin, server middleware. Triggers on: TanStack auth, createServerFn clerk, beforeLoad protection, TanStack Start middleware.
— the description by clerk

AutoGineer summary

Written by AutoGineer from the skill’s own files, not by the author

This skill provides patterns for implementing authentication in TanStack React Start applications using the Clerk SDK. It covers the necessary server-side setup, including request middleware configuration, and demonstrates how to secure routes using beforeLoad guards and createServerFn. It also explains how to pass authenticated user context into loaders and provides a mental model for how auth flows between the server and router layers.

What it does

  • Configures Clerk request middleware within the TanStack Start instance.
  • Implements route-level protection using beforeLoad guards.
  • Secures server functions with auth() checks.
  • Passes authenticated user or organization context to route loaders.
  • Wraps applications with the ClerkProvider for client-side auth state.
  • Provides troubleshooting steps for common auth integration pitfalls.

When to use it

  • When building a new TanStack React Start application that requires user authentication.
  • When you need to protect specific routes or layouts from unauthenticated access.
  • When you need to access authenticated user data within server functions or loaders.
  • When configuring the initial authentication middleware for a TanStack project.

Advantages

  • Seamless integration with TanStack Start's server-side architecture.
  • Enforces security at the server layer before route rendering.
  • Provides a clear pattern for passing auth context to data loaders.
  • Reduces boilerplate for common auth-related redirects and checks.

Usage examples

“How do I protect a dashboard route in TanStack Start using Clerk?”
The agent provides a pattern using a createServerFn that calls auth() and throws a redirect if the user is unauthenticated, which is then invoked in the route's beforeLoad.
“How can I access the user ID in my TanStack loader?”
The agent demonstrates how to return the userId from a beforeLoad guard, which then becomes available in the loader's context object.

Install

  1. Download the skill as a ZIP:

    https://autogineer.com/agent-skills/clerk/clerk-tanstack-patterns/download

  2. Unzip it into the cross-client skills folder of your project:

    mkdir -p .agents/skills && unzip clerk-tanstack-patterns.zip -d .agents/skills

Documentation by clerk

TanStack React Start Patterns

What Do You Need?

TaskReference
Protect routes with beforeLoadreferences/router-guards.md
Auth in createServerFnreferences/server-functions.md
Pass auth to loadersreferences/loaders.md
Configure Vite + Clerk middlewarereferences/server-setup.md

References

ReferenceDescription
references/router-guards.mdbeforeLoad auth redirect
references/server-functions.mdcreateServerFn with auth()
references/loaders.mdAuth context in loaders
references/server-setup.mdVite and request middleware setup

Setup

npm install @clerk/tanstack-react-start

.env:

VITE_CLERK_PUBLISHABLE_KEY=pk_...
CLERK_SECRET_KEY=sk_...

src/start.ts (request middleware):

import { clerkMiddleware } from '@clerk/tanstack-react-start/server'
import { createCsrfMiddleware, createStart } from '@tanstack/react-start'

const csrfMiddleware = createCsrfMiddleware({
  filter: (ctx) => ctx.handlerType === 'serverFn',
})

export const startInstance = createStart(() => {
  return {
    requestMiddleware: [csrfMiddleware, 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>
  )
}

Mental Model

TanStack Start uses the tanstackStart() Vite plugin. Register CSRF protection before Clerk request middleware in src/start.ts; auth then 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

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

SymptomCauseFix
auth() throws "without configuring the middleware"Missing clerkMiddleware in start.tsAdd it after CSRF middleware in requestMiddleware
redirect not thrownUsing return instead of throwthrow redirect(...) in TanStack
Wrong import for authMixing client/server importsServer: @clerk/tanstack-react-start/server
Loader context missing userIdNot passing from beforeLoadReturn from beforeLoad, access via context
ClerkProvider missingForgot root wrappingAdd 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

Files

templates/tanstack-basic-auth/package.json

{
	"name": "clerk-tanstack-start",
	"private": true,
	"type": "module",
	"scripts": {
		"dev": "vite dev",
		"build": "vite build"
	},
	"dependencies": {
		"@clerk/tanstack-react-start": "latest",
		"@tanstack/react-router": "latest",
		"@tanstack/react-router-devtools": "latest",
		"@tanstack/react-start": "latest",
		"react": "^19.0.0",
		"react-dom": "^19.0.0"
	},
	"devDependencies": {
		"@vitejs/plugin-react": "^4.0.0",
		"typescript": "^5.6.0",
		"vite": "^7.0.0",
		"vite-tsconfig-paths": "^5.0.0"
	}
}

Requirements and compatibility

Works with: Claude Code, Claude apps, OpenAI Codex, GitHub Copilot, Cursor, Gemini CLI, Kiro, OpenCode, Goose, Amp, Roo Code, JetBrains Junie, Factory Droid, Devin (ex-Windsurf), Mistral Vibe, OpenHands, Letta

“Works with” means the tool reads the open Agent Skills format; a skill written for one tool may use features others lack.

Needs: Declares allowed tools, Needs Node.js

Security

What our scanner noticed· Low risk

  • Scripts that your agent may run

This skill includes scripts that your agent may run. Read them before you use it.

A static scan is not a guarantee. Skills are third-party content: review a skill before you let an agent use it.

Attribution and licence

Created by
clerk
Publisher
Clerk (Official)
Source
clerk/skills · skills/clerk-tanstack-patterns · commit c5d2c0d
Licence
MIT License (redistribution allowed)
  • ATTRIBUTION.md (written by AutoGineer)
Synced

AutoGineer is not affiliated with or endorsed by clerk or Clerk.

Download ZIP

The ZIP holds the skill’s files, its licence files and an ATTRIBUTION.md. Download clerk-tanstack-patterns.zip