skills.rest
Rajaryan1726
Rajaryan1726COMMUNITY
Explore all skills by this author →
GitHub

clerk-react-router-patterns

Implements Clerk authentication patterns for React Router v7 and v8 applications.

Updated Aug 22, 2026
Search Tags:#authentication#middleware#loaders#ssr#protected routes#clerk#react-router
One-click install
npx skills add https://github.com/Rajaryan1726/ai-code-review-system --skill clerk-react-router-patterns-rajaryan1726
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: clerk-react-router-patterns
Source: https://github.com/Rajaryan1726/ai-code-review-system/tree/main/client/.agents/skills/clerk-react-router-patterns
Command: npx skills add https://github.com/Rajaryan1726/ai-code-review-system --skill clerk-react-router-patterns-rajaryan1726

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires @clerk/react-router, react-router, and includes references (resource) components.

What problem does it solve? Setting up Clerk authentication in React Router v7/v8 involves a middleware-plus-loader pipeline that differs sharply from other frameworks, and misconfigurations cause cryptic failures like getAuth returning empty userIds or SSR errors about useNavigate outside a Router context. This Skill provides the correct wiring patterns, version-specific config differences, and fixes for the most common pitfalls. ## Core Features & Use Cases - Root Setup: Configures clerkMiddleware, rootAuthLoader, and ClerkProvider in root.tsx, including the required ssr.noExternal workaround for React Router v8. - Server-Side Auth: Shows how to call getAuth in loaders and actions to protect routes, gate form submissions, and read org or session data. - Client & Org Patterns: Covers useAuth/useUser hooks, OrganizationSwitcher integration, and org-scoped data loading with redirects. - Use Case: You are adding auth to a React Router v8 app and every SSR request throws "useNavigate() may be used only in the context of a Router". This Skill identifies the Vite dev SSR externalization issue and applies the ssr.noExternal fix instead of chasing phantom duplicate installs. ## Quick Start Set up Clerk authentication in my React Router app with rootAuthLoader, clerkMiddleware, and a protected dashboard route that redirects unauthenticated users to sign-in.

Frequently Asked Questions about clerk-react-router-patterns

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I set up Clerk authentication in a React Router app?▼

Add clerkMiddleware() to the root route's middleware array, call rootAuthLoader(args) in the root.tsx loader, and render ClerkProvider with loaderData in the default export. There is no ClerkApp HOC in @clerk/react-router; that API was from @clerk/remix.

How do I protect a route with Clerk in React Router loaders?▼

Call getAuth(args) inside the route's loader and throw redirect('/sign-in') when userId is falsy. Loader-level protection runs on the server before any HTML is sent, which is preferred over client-side guards.

Why does useNavigate throw outside a Router context with Clerk and React Router v8?▼

In dev, Vite externalizes @clerk/react-router for SSR, so it loads react-router's production build while the app uses the development build, creating two Router contexts. Fix it by adding ssr: { noExternal: ['@clerk/react-router'] } to vite.config.ts; a single copy in npm ls does not rule this out.

Does @clerk/react-router work with both React Router v7 and v8?▼

Yes, version 3.5+ supports React Router v7.9+ and v8. On v7 you must opt in with future: { v8_middleware: true } in react-router.config.ts; on v8 middleware is always on and the flag must be removed.

Why does getAuth return an empty userId in my loader?▼

getAuth returns empty values when rootAuthLoader is not called in the root.tsx loader, and it throws entirely if clerkMiddleware is not installed. Both the middleware export and the root loader call are required for nested loaders to read auth state.

How do I load organization-scoped data with Clerk in React Router?▼

Destructure orgId alongside userId from getAuth(args) in the loader, throw redirect('/select-org') when orgId is missing, and use orgId to scope the data fetch. You can also check orgRole for admin-gated routes.

Related Skills

Explore More Software Engineering Skills→
awfixers-stuffawfixers-stuff

clerk-setup

Detect a project's framework and apply Clerk quickstart authentication setup.

Official
Intermediate
Elnora-AIElnora-AI
4

elnora-orgs

Manage Elnora organizations, members, invitations, billing, and shared libraries via MCP API.

Official
Advanced
MichaelFriezeMichaelFrieze

clerk-custom-ui

Create custom Clerk authentication UI with useSignIn and useSignUp hooks.

Community
Intermediate
openaiopenai
5.3k

auth

Implements Clerk, Descope, and Auth0 authentication for Next.js applications on Vercel.

Official
Intermediate