clerk-tanstack-patterns

Protect TanStack React Start routes and server functions with Clerk authentication.

1|Updated Apr 11, 2026

Search Tags:#tanstack #auth #clerk #route-guards #vinxi #tanstack-react-start

Ready to run

npx skills add https://github.com/RajAryanIITBHU/bny --skill clerk-tanstack-patterns-rajaryaniitbhu

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: clerk-tanstack-patterns
Source: https://github.com/RajAryanIITBHU/bny/tree/main/.continue/skills/clerk-tanstack-patterns
Command: npx skills add https://github.com/RajAryanIITBHU/bny --skill clerk-tanstack-patterns-rajaryaniitbhu

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Provides clear, server-first authentication patterns to protect TanStack React Start routes, API endpoints, and server functions so unauthenticated users are redirected or denied access rather than leaking protected data or causing runtime errors.

Core Features & Use Cases

Protect routes using beforeLoad guards that call server-side auth and throw redirects for unauthenticated access.
Secure server functions using createServerFn with auth checks and return user context for loaders and components.
Ensure Vinxi integration by registering clerkMiddleware and propagating auth context to loaders and API routes.
Use Case: Protect a dashboard layout so all child routes inherit authentication without repeating checks, and surface org-scoped data only when an org is active.

Quick Start

Register clerkMiddleware in your start.ts and add a beforeLoad guard that calls a server function using auth and throws a redirect to /sign-in for unauthenticated users.

Frequently Asked Questions about clerk-tanstack-patterns

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I protect TanStack React Start routes with Clerk authentication?▼

Protect TanStack React Start routes by registering clerkMiddleware in your start.ts file and adding beforeLoad guards that call server-side auth, throwing redirects to /sign-in for unauthenticated users.

How do I secure server functions in TanStack Start using Clerk?▼

Secure TanStack Start server functions by using createServerFn with Clerk auth checks, returning user context for loaders and components to ensure unauthenticated access is denied before runtime execution.

Does Clerk middleware work with Vinxi and TanStack Start?▼

Yes, Clerk middleware works with Vinxi and TanStack Start by registering clerkMiddleware in start.ts, which propagates auth context to loaders and API routes for server-side protection.

What is the best way to protect a dashboard layout in TanStack Start without repeating auth checks?▼

The best way to protect a dashboard layout is using a beforeLoad guard with Clerk auth that throws redirects for unauthenticated users, allowing child routes to inherit authentication without repeating checks.

Why does my TanStack Start route leak protected data without Clerk auth guards?▼

TanStack Start routes leak protected data without auth guards because server functions and loaders execute without authentication checks, requiring beforeLoad guards that throw redirects or return 401 to prevent access.