skills.rest
koushik-hait
koushik-haitCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

clerk-tanstack-patterns

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

Updated Apr 7, 2026
Search Tags:#tanstack start#clerk#route guards#createServerFn#vinxi middleware#auth redirect#org-based access
One-click install
npx skills add https://github.com/koushik-hait/xigenis-landingpage-v1 --skill clerk-tanstack-patterns-koushik-hait
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: clerk-tanstack-patterns
Source: https://github.com/koushik-hait/xigenis-landingpage-v1/tree/main/.agents/skills/clerk-tanstack-patterns
Command: npx skills add https://github.com/koushik-hait/xigenis-landingpage-v1 --skill clerk-tanstack-patterns-koushik-hait

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill solves the problem of protecting TanStack React Start routes and server functions with proper Clerk authentication so unauthenticated users can be redirected and authenticated user context can be safely reused.

Core Features & Use Cases

  • Route protection with beforeLoad guards: Uses a server-side createServerFn that calls Clerk auth() and throws redirect({ to: '/sign-in' }) when unauthenticated.
  • Auth in server functions: Implements authenticated server handlers that call auth() to obtain userId (and optionally orgId) and then safely return data.
  • Single-check layout protection: Demonstrates using a layout-level route guard so child routes inherit the authentication result without repeating the guard logic.
  • Org-aware loading: Fetches organization-scoped data in loader/server function logic and handles missing org selection by returning empty state or redirecting.
  • Correct Clerk integration wiring: Shows required setup via clerkMiddleware() in start.ts and wrapping the app with ClerkProvider in the root component.

Quick Start

Ask the skill to generate a beforeLoad auth guard for the /dashboard route that calls auth() from @clerk/tanstack-react-start/server and throws a redirect to /sign-in when the user is unauthenticated.

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 calling Clerk's server-side auth() inside a createServerFn handler during beforeLoad, throwing redirect({ to: '/sign-in' }) when the request is unauthenticated.

What is the best way to secure a server function in TanStack Start using Clerk?▼

Securing a server function involves calling auth() from @clerk/tanstack-react-start/server to extract the userId and optionally orgId, returning data only when the user is authenticated.

How do I set up Clerk middleware in a Vinxi-based TanStack Start app?▼

Setup requires adding clerkMiddleware() to requestMiddleware in start.ts and wrapping the root component with ClerkProvider to enable server-side authentication context.

Can I protect all child routes with a single layout-level auth guard?▼

Yes, applying a layout-level route guard with beforeLoad allows child routes to inherit the authentication result, eliminating the need to repeat auth checks across individual pages.

How do I handle org-aware data loading with Clerk in TanStack Start?▼

Org-aware loading fetches organization-scoped data inside loaders by checking orgId from auth(), redirecting or returning an empty state when the user has no organization selected.

Related Skills

Explore More Software Engineering Skills→
hashintelhashintel
35

tanstack-start

Scaffold TanStack Start routing, API routes, and AI integrations for React apps.

Official
Intermediate
funnys1rfunnys1r

alpha

Authenticates Binance Alpha API requests to fetch ticker, trades, and klines data.

Community
Advanced
RajAryanIITBHURajAryanIITBHU

clerk-tanstack-patterns

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

Community
Intermediate
RoyMcCrainRoyMcCrain
1

clerk-tanstack-patterns

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

Community
Advanced