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
Decision gist · record as of 2026-07-23
Clerk React Router Patterns teaches you to add Clerk authentication to React Router v7/v8 apps using loaders, middleware, and protected routes. 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.
Use it when
- Clerk React Router Patterns recommends using rootAuthLoader combined with route-level guards.
- Clerk React Router Patterns covers wrapping your root component with ClerkProvider.
Install
clerk/skills/clerk-react-router-patterns · repository language: Shell
generated, unverified - the skill's exact subdirectory could not be determined; check the repository on GitHub
Open directory. Skills are indexed for reading, not audited. Review a skill's body before installing it.
Frequently 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.
Let your AI agent find skills like this
Example. Real query, live index.
You found this page by searching. An agent finds it by wishing: SkillFed indexes 56,283 agent skills by what they can do, searchable in plain language.
wish › “Learn how to integrate Clerk authentication with React Router applications”
Give your agent the search over MCP, or paste the wish link into any chat. No install? Search from any chat →
Related skills
Master authentication in Nuxt 3 by implementing Clerk across middleware, composables, and server routes. This skill covers route protection with built-in auth middleware, server-side auth via Nitro routes, and client-side reactive auth state with useAuth and useUser. Avoid common pitfalls like hydration mismatches and environment variable configuration errors.
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 Validator audits your authentication implementation for modern Clerk patterns and deprecated code. It checks package versions, proxy.ts setup, ClerkProvider configuration, auth imports, and environment variables—catching issues before they reach production. Run it during setup, after AI-generated code, or in CI/CD pipelines.
This skill guides you through authenticating and authorizing incoming requests on backend services using Clerk's SDKs and middleware. It covers request flow, token verification, cross-origin patterns, proxy header preservation, and Backend API client usage across Node, Go, Python, Ruby, Java, C#, and PHP frameworks.
Integrate Clerk's authentication system into Next.js 16 applications via proxy.ts configuration, environment setup, and ClerkProvider integration. Protect routes, access user data in server and client components, and migrate from Next.js 15's middleware.ts pattern. Includes MCP server setup for AI agent integration.
Clerk Setup guides you through adding Clerk authentication to any project by detecting your framework and following official quickstart instructions. The skill supports CLI-driven provisioning for new and existing apps, automatic key generation via Keyless, or manual Dashboard configuration. It covers Next.js, React, Vue, Nuxt, Astro, React Router, TanStack Start, Express, Fastify, Expo, and other platforms.
More skills Clerk Vue Patterns (unlicensed) · Clerk Chrome Extension Patterns (unlicensed) · Integrating Clerk Expo (unlicensed) · Clerk (unlicensed) · Clerk React Patterns (unlicensed)