clerk-tanstack-patterns

Protect TanStack Start routes and server functions with Clerk authentication.

Updated Jun 20, 2026
One-click install
npx skills add https://github.com/sudarshan-krishnan/Sentinel_AIHackathon_Berkley_2026 --skill clerk-tanstack-patterns-sudarshan-krishnan
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: clerk-tanstack-patterns
Source: https://github.com/sudarshan-krishnan/Sentinel_AIHackathon_Berkley_2026/tree/main/app/.agents/skills/clerk-tanstack-patterns
Command: npx skills add https://github.com/sudarshan-krishnan/Sentinel_AIHackathon_Berkley_2026 --skill clerk-tanstack-patterns-sudarshan-krishnan

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill helps developers implement reliable Clerk authentication patterns in TanStack React Start apps so routes, loaders, server functions, and API endpoints stay protected and consistent.

Core Features & Use Cases

  • Route Protection: Guard individual routes or entire route groups with beforeLoad and redirect unauthenticated users.
  • Server-Side Auth Checks: Use createServerFn with auth() to validate sessions inside server functions and API handlers.
  • Loader Context: Pass userId or orgId through route context so loaders can fetch user-scoped or org-scoped data.
  • App Setup: Configure clerkMiddleware() in Vinxi and wrap the root route with ClerkProvider.
  • Use Case: A dashboard app can protect /dashboard, load only the signed-in user’s data, and return a 401 from protected API routes when authentication is missing.

Quick Start

Use this skill to add Clerk authentication to a TanStack Start app by protecting routes with beforeLoad, wiring server-side auth checks with auth(), and configuring clerkMiddleware and ClerkProvider in the app shell.

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 Start routes with Clerk authentication?

Protect TanStack Start routes by using the `beforeLoad` function to validate user sessions and redirect unauthenticated users. This guards individual routes or entire route groups against unauthorized access.

How does server-side auth work in TanStack Start server functions?

Server-side auth in TanStack Start works by calling `auth()` inside `createServerFn` to validate sessions. This ensures server functions and API handlers securely verify authentication before executing protected logic.

Can I pass user context through TanStack Start loaders?

Yes, you can pass `userId` or `orgId` through route context so loaders can fetch user-scoped or org-scoped data. This ensures loaders have the necessary authenticated context to retrieve specific data.

Do I need clerkMiddleware to set up Clerk in a TanStack Start app?

Yes, configuring `clerkMiddleware()` in Vinxi is required for app setup. You also need to wrap the root route with `ClerkProvider` to properly initialize Clerk authentication flows in your TanStack Start application.

Why do my protected API routes return 401 errors in TanStack Start?

Protected API routes return 401 errors when authentication is missing because server-side auth checks via `auth()` fail to validate the session. Implementing `createServerFn` with `auth()` ensures these routes reject unauthenticated requests.

What is the best way to guard route groups in TanStack Start?

The best way to guard route groups is using `beforeLoad` with redirect-based protection. This pattern ensures unauthenticated users are redirected away from protected layouts before the route renders.