skills.rest
MichaelFrieze
MichaelFriezeCOMMUNITY
Explore all skills by this author →
Website𝕏@MichaelFriezeGitHub

clerk-tanstack-patterns

Protect TanStack React Start routes with Clerk authentication guards.

Updated Aug 23, 2026
Search Tags:#authentication#tanstack start#clerk#beforeLoad#route guard#createServerFn#loader context
One-click install
npx skills add https://github.com/MichaelFrieze/riffatlas --skill clerk-tanstack-patterns-michaelfrieze
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: clerk-tanstack-patterns
Source: https://github.com/MichaelFrieze/riffatlas/tree/main/.agents/skills/clerk-tanstack-patterns
Command: npx skills add https://github.com/MichaelFrieze/riffatlas --skill clerk-tanstack-patterns-michaelfrieze

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Protecting TanStack React Start routes with Clerk auth can be error-prone, especially when mixing server-only authentication with client routing and loaders.

Core Features & Use Cases

  • beforeLoad route guards: Use a server-side auth check to redirect unauthenticated users to the sign-in route.
  • createServerFn authentication: Call Clerk auth from server functions and return safe auth context (like userId) to the router.
  • Loader context propagation: Pass auth results from beforeLoad into loaders so components can render user-specific data without repeating auth logic.
  • Vinxi + Clerk middleware setup: Ensure request middleware is configured so server functions can correctly read auth state.

Quick Start

Add the Vinxi requestMiddleware clerkMiddleware() in src/start.ts, wrap your app shell with ClerkProvider in your root route, then implement a createServerFn auth check that throws redirect({ to: '/sign-in' }) and call it from your route's beforeLoad.

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

To protect TanStack Start routes with Clerk authentication, implement a server-side createServerFn auth check that throws a redirect to the sign-in route within your route's beforeLoad guard.

Why do I need clerkMiddleware in TanStack Start for server functions?▼

You need clerkMiddleware in TanStack Start to ensure server functions correctly read auth state, allowing createServerFn to securely access Clerk authentication context during server-side execution.

How do I pass Clerk auth context to TanStack route loaders?▼

Pass Clerk auth context to TanStack route loaders by returning safe auth data like userId from beforeLoad, propagating it into the loader context so components render user-specific data without repeating auth logic.

Can I use Clerk beforeLoad guards for SSR-safe route protection?▼

Yes, you can use Clerk beforeLoad guards for SSR-safe route protection by importing server-only auth checks from @clerk/tanstack-react-start/server and throwing TanStack redirects to block unauthenticated access.

What is the best way to handle unauthenticated access in TanStack Start?▼

The best way to handle unauthenticated access in TanStack Start is throwing a TanStack redirect to the sign-in route from a server-side createServerFn called during the beforeLoad phase.

Does this Clerk TanStack pattern support organization-scoped UI?▼

Yes, this Clerk TanStack pattern supports organization-scoped UI by passing organization and user auth results from the beforeLoad guard into the loader context for component rendering.

Related Skills

Explore More Software Engineering Skills→
koushik-haitkoushik-hait

clerk-tanstack-patterns

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

Community
Intermediate
Endsi3gEndsi3g

clerk-react-router-patterns

Wire Clerk authentication into React Router v7 loaders and middleware.

Community
Intermediate
RajAryanIITBHURajAryanIITBHU

clerk-tanstack-patterns

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

Community
Intermediate
clerkclerk
66

clerk-nuxt-patterns

Protects Nuxt 3 apps with Clerk authentication middleware and Nitro server route guards.

Official
Intermediate