clerk-tanstack-patterns

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

1|Updated Jun 13, 2017
One-click install
npx skills add https://github.com/RoyMcCrain/dotsfile --skill clerk-tanstack-patterns
Or copy as Structured Prompt for Agent
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.