skills.rest
awfixers-stuff
awfixers-stuffOFFICIAL
Explore all skills by this author →
Website𝕏@awfixerGitHub

clerk-tanstack-patterns

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

Updated Aug 23, 2026
Search Tags:#tanstack#middleware#loaders#auth#clerk#tanstack-start#vinxi
One-click install
npx skills add https://github.com/awfixers-stuff/opencode-config --skill clerk-tanstack-patterns-awfixers-stuff
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: clerk-tanstack-patterns
Source: https://github.com/awfixers-stuff/opencode-config/tree/main/skills/clerk-tanstack-patterns
Command: npx skills add https://github.com/awfixers-stuff/opencode-config --skill clerk-tanstack-patterns-awfixers-stuff

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Protects TanStack React Start applications from unauthorized access by providing clear, repeatable patterns for middleware configuration, server-side auth checks, and route-level guards so developers can secure routes, loaders, and API endpoints consistently.

Core Features & Use Cases

  • Route Guards with beforeLoad: Server-run beforeLoad checks that call auth() and throw redirect to block unauthenticated access.
  • Authenticated Server Functions: createServerFn handlers that call auth(), validate isAuthenticated, and return userId/orgId for downstream loaders or components.
  • Loader and Org-aware Patterns: Pass auth-derived context (userId, orgId) from beforeLoad into loaders to fetch user- or org-scoped data and conditionally handle missing orgs. Use case: Protect a /dashboard layout and its child routes on a Vinxi-hosted TanStack Start app by registering clerkMiddleware, wrapping the root with ClerkProvider, and using createServerFn-based guards that supply loader context.

Quick Start

Add a server-side beforeLoad guard that calls auth() via createServerFn and throws redirect to /sign-in when 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?▼

Protecting TanStack Start routes involves registering clerkMiddleware, wrapping the root with ClerkProvider, and using createServerFn-based beforeLoad guards that call auth() and throw redirects to block unauthenticated access.

How does Clerk auth work with TanStack Start loaders?▼

Clerk auth integrates with TanStack Start loaders by passing auth-derived context, such as userId and orgId, from beforeLoad into loaders to fetch user- or org-scoped data and conditionally handle missing organizations.

Can I use Clerk middleware with createServerFn in a Vinxi app?▼

Yes, Clerk middleware works with createServerFn in Vinxi-hosted TanStack Start apps by configuring clerkMiddleware and calling auth() within createServerFn handlers to validate authentication and return userId or orgId for downstream components.

What is the best way to secure API routes in TanStack Start using Clerk?▼

Securing API routes in TanStack Start with Clerk involves using createServerFn handlers that call auth(), validate isAuthenticated, and return userId or orgId for downstream loaders or components, ensuring consistent authorized access.

Do I need ClerkProvider to secure TanStack Start server endpoints?▼

Yes, wrapping the root with ClerkProvider is required to secure TanStack Start server endpoints. This setup enables clerkMiddleware registration and server-side auth() calls from @clerk/tanstack-react-start/server.

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
koushik-haitkoushik-hait

clerk-react-router-patterns

Integrate Clerk authentication into React Router v7 loaders, actions, and SSR.

Community
Intermediate
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