Clerk React Router Patterns
Master Clerk authentication in React Router v7 and v8 apps with server-side loaders, middleware integration, and protected route patterns. This skill covers rootAuthLoader setup, getAuth usage in loaders and actions, client-side hooks, organization switching, and common SSR pitfalls specific to each React Router version.
Clerk React Router Patterns teaches you to add Clerk authentication to React Router v7/v8 apps using loaders, middleware, and protected routes.
AI-generated summary based on this skill's SKILL.md
Install
clerk/skills/clerk-react-router-patterns · repository language: Shell
git clone https://github.com/clerk/skills
cp -r skills ~/.claude/skills/clerk-react-router-patternsgenerated, unverified - the skill's exact subdirectory could not be determined; check the repository on GitHub
npx skillfed install clerk/skills/clerk-react-router-patternsFrequently asked questions
AI-generated answers based on this skill's SKILL.md and metadata
How do I add Clerk to a React Router app?
Clerk React Router Patterns guides you through integrating Clerk authentication into React Router v7 and v8 applications. Start by wrapping your app with ClerkProvider, then use rootAuthLoader in your router configuration to handle authentication state server-side. This approach ensures protected routes have access to Clerk's auth context before rendering, preventing flash-of-unauthenticated-content issues and enabling proper SSR support.
What's the best way to set up Clerk protected routes in React Router?
Clerk React Router Patterns recommends using rootAuthLoader combined with route-level guards. Define your protected routes with loaders that call getAuth() to verify authentication status before rendering. If unauthenticated, redirect to your sign-in page. For organization-specific routes, check organization membership in the loader. This pattern works consistently across React Router v7 and v8 and prevents unauthorized access at the routing layer.
How to use Clerk with React Router—what are the key integration steps?
Clerk React Router Patterns covers wrapping your root component with ClerkProvider, configuring rootAuthLoader to initialize Clerk's session, and using getAuth() in route loaders and actions. Client-side, leverage useAuth() and useUser() hooks for conditional rendering. For organization features, use useOrganization() and implement organization-switching logic. Each React Router version has specific SSR considerations covered in the skill.
What middleware patterns should I use for Clerk in React Router?
Clerk React Router Patterns teaches middleware integration through rootAuthLoader, which acts as your authentication gate. In loaders, call getAuth() to access session tokens and user claims, then conditionally render or redirect. For actions, verify auth state before processing mutations. This pattern replaces traditional Express middleware; it's declarative, route-specific, and handles both server-side rendering and client-side navigation consistently.
Where can I find Clerk authentication code examples for React Router?
Clerk React Router Patterns provides best practices and code examples for common scenarios: basic setup with ClerkProvider, protected route implementation using loaders, organization switching, and session management. Examples cover both React Router v7 and v8 syntax. The skill addresses SSR pitfalls, getAuth() usage in different contexts, and how to handle auth state across server and client boundaries.
How do I implement Clerk session management in React Router?
Clerk React Router Patterns explains session handling through rootAuthLoader and getAuth(). On the server, rootAuthLoader initializes Clerk's session from request headers. In loaders and actions, getAuth() retrieves the current session, user, and organization context. Client-side, useAuth() provides reactive session updates. The skill covers version-specific differences in React Router v7 and v8 for maintaining session state across route transitions.