skills.rest
clerk
clerkOFFICIAL
Explore all skills by this author →
Website𝕏@ClerkGitHub

clerk-tanstack-patterns

Implement Clerk authenticated routing patterns for TanStack Start apps.

66|4|Updated Jan 6, 2026
Search Tags:#routing#tanstack#middleware#patterns#auth#server-function#react-start
One-click install
npx skills add https://github.com/clerk/skills --skill clerk-tanstack-patterns-clerk
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: clerk-tanstack-patterns
Source: https://github.com/clerk/skills/tree/main/skills/frameworks/clerk-tanstack-patterns
Command: npx skills add https://github.com/clerk/skills --skill clerk-tanstack-patterns-clerk

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

TanStack Start apps often require robust authentication and route protection across server and client boundaries. This Skill provides ready-made patterns to guard routes with beforeLoad, implement auth in createServerFn, and pass authentication state into loaders, all while wiring Clerk's server context via Vinxi middleware.

Core Features & Use Cases

  • Protect routes with beforeLoad using server-side auth
  • Auth in createServerFn and pass userId to loaders
  • Configure Vinxi + clerkMiddleware for consistent auth context
  • Support layout-level guards and nested routes with shared auth state
  • Ideal for apps integrating Clerk with TanStack Start patterns

Quick Start

Install the Clerk-tanstack-patterns starter and wire Clerk authentication into your TanStack Start app to enable protected routes and authenticated data loading.

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

Protect routes in TanStack Start by applying Clerk authentication inside beforeLoad route guards. This validates server-side auth context before navigation completes, blocking unauthorized access to secured pages.

How do I use createServerFn with Clerk to pass userId to loaders?▼

Use createServerFn with Clerk to securely extract and pass userId to route loaders. This pattern maintains authentication state across server and client boundaries during authenticated data fetching.

How do I configure Clerk middleware in a Vinxi project?▼

Configure Clerk middleware in Vinxi by wiring clerkMiddleware into the project setup. This establishes a consistent server-side authentication context available across all server functions and loaders.

Can I apply layout-level auth guards for nested routes in TanStack Start?▼

Layout-level auth guards support nested routes by sharing Clerk authentication state down the route tree. This prevents duplicating route protection logic across individual child components.

Do I need Clerk's server package to secure TanStack Start apps?▼

Yes, securing TanStack Start apps requires Clerk's server package for authentication, alongside TanStack Start's server utilities. Proper project wiring is necessary to enable beforeLoad guards and protected loaders.

Related Skills

Explore More Software Engineering Skills→
RajAryanIITBHURajAryanIITBHU

clerk-tanstack-patterns

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

Community
Intermediate
AppleLampsAppleLamps

new-api-route

Scaffold Next.js App Router API routes with templated GET and POST handlers.

Community
Intermediate
RoyMcCrainRoyMcCrain
1

clerk-tanstack-patterns

Protect TanStack React Start routes with Clerk authentication and beforeLoad guards.

Community
Advanced
Mohamedghaly140Mohamedghaly140

clerk-nextjs-patterns

Implement Clerk authentication patterns for Next.js middleware, server actions, and caching.

Community
Advanced