Clerk Tanstack Patterns
This skill covers authentication patterns for TanStack React Start, showing how to protect routes with beforeLoad guards, implement auth in server functions, and configure Clerk middleware on Vinxi. Learn the mental model of two-layer auth flow and avoid common setup mistakes.
Clerk Tanstack Patterns demonstrates how to integrate Clerk authentication with TanStack React Start using server functions and route guards.
AI-generated summary based on this skill's SKILL.md
Install
clerk/skills/clerk-tanstack-patterns · repository language: Shell
git clone https://github.com/clerk/skills
cp -r skills ~/.claude/skills/clerk-tanstack-patternsgenerated, unverified - the skill's exact subdirectory could not be determined; check the repository on GitHub
Frequently asked questions
AI-generated answers based on this skill's SKILL.md and metadata
How to use Clerk and Tanstack together?
Clerk Tanstack Patterns teaches integration between Clerk authentication and TanStack React Start. The skill covers protecting routes using beforeLoad guards, implementing auth within server functions, and configuring Clerk middleware on Vinxi. You'll learn a two-layer auth flow mental model that separates client and server concerns, enabling secure authenticated data fetching across your application.
What are Clerk authentication patterns for Tanstack?
Clerk Tanstack Patterns emphasizes two key layers: route protection via beforeLoad guards and server-side auth validation in functions. The skill demonstrates how to configure Clerk middleware on Vinxi to intercept requests, validate tokens server-side, and prevent common setup mistakes. This architecture ensures auth checks happen at both entry points and data boundaries.
Can you show Clerk Tanstack example code?
Clerk Tanstack Patterns provides code examples for integrating Clerk with TanStack React Start. Examples cover beforeLoad route guards for client-side protection, server function implementations with auth checks, and Vinxi middleware configuration. The skill walks through real patterns rather than isolated snippets, showing how pieces fit into a complete auth flow.
What are best practices for Clerk + Tanstack patterns?
Clerk Tanstack Patterns highlights best practices including: implementing two-layer auth (route + server function), using beforeLoad guards to protect routes early, validating auth state in server functions before data access, and properly configuring Clerk middleware on Vinxi. The skill helps you avoid common setup mistakes by teaching the mental model behind secure auth architecture.
How do I set up authenticated data fetching with Clerk and Tanstack?
Clerk Tanstack Patterns covers setup by showing how to protect routes with beforeLoad guards, then validate auth in server functions where data fetching happens. Configure Clerk middleware on Vinxi to handle token validation at the infrastructure level. This layered approach ensures only authenticated users reach protected data endpoints and server functions execute with verified auth context.
What is the mental model for Clerk Tanstack auth flow?
Clerk Tanstack Patterns teaches a two-layer auth flow: the first layer uses beforeLoad guards to protect route entry, preventing unauthenticated users from accessing pages. The second layer validates auth in server functions before sensitive operations. This separation ensures client-side UX flows smoothly while server-side remains secure, with Clerk middleware on Vinxi enforcing token validity across requests.