clerk-tanstack-patterns

Name: clerk-tanstack-patterns
Availability: InStock
Author: RoyMcCrain

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

1|Updated Jun 13, 2017

Search Tags:#tanstack #middleware #auth #clerk #react-start #route-guard

Ready to run

npx skills add https://github.com/RoyMcCrain/dotsfile --skill clerk-tanstack-patterns

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: clerk-tanstack-patterns
Source: https://github.com/RoyMcCrain/dotsfile/tree/main/claude/skills/clerk-tanstack-patterns
Command: npx skills add https://github.com/RoyMcCrain/dotsfile --skill clerk-tanstack-patterns

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Developers need a straightforward way to enforce Clerk authentication across TanStack React Start projects, handling server‑side guards, loaders, and API routes without repetitive boilerplate.

Core Features & Use Cases

Route Guard Templates: Ready‑to‑use beforeLoad checks that redirect unauthenticated users.
Server Function Helpers: Pre‑defined createServerFn patterns for auth, org data, and protected API handlers.
Vinxi Middleware Integration: Simple setup of clerkMiddleware in the start file to enable auth() throughout the server.

Quick Start

Add a beforeLoad guard using Clerk's auth() to protect the /dashboard route.

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 in TanStack React Start using Clerk authentication?▼

To protect routes in TanStack React Start, add `beforeLoad` checks to your route definitions using `auth()` from `@clerk/tanstack-react-start/server` to redirect unauthenticated users. This enforces server-side route guards without repetitive boilerplate.

What is the best way to set up Clerk middleware in a Vinxi start file?▼

Setting up Clerk middleware in a Vinxi start file requires adding `clerkMiddleware` to the start file. This integrates Clerk and enables the `auth()` function throughout the server-side environment for secure route protection.

Can I use Clerk auth to secure server functions and API endpoints in TanStack React Start?▼

Yes, you can secure server functions and API endpoints in TanStack React Start using Clerk. The Skill provides pre-defined `createServerFn` patterns for auth, organization data, and protected API handlers to enforce authentication.

How does Clerk authentication work with TanStack loaders?▼

Clerk authentication works with TanStack loaders by applying server-side `beforeLoad` checks. These guards evaluate the user's authentication state and automatically redirect unauthenticated users away from protected routes.

Do I need Clerk middleware to use auth() in TanStack React Start?▼

Yes, you need Clerk middleware to use `auth()` in TanStack React Start. Adding `clerkMiddleware` in the Vinxi start file is a required setup step to enable `auth()` throughout the server environment for route guards.