skills.rest
paramcodes
paramcodesCOMMUNITY
Explore all skills by this author →
Website𝕏@Your_PARAMGitHub

clerk-react-router-patterns

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

Updated Sep 19, 2026
Search Tags:#authentication#Clerk#middleware#loaders#ssr#protected routes#react-router
One-click install
npx skills add https://github.com/paramcodes/autobro --skill clerk-react-router-patterns-paramcodes
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: clerk-react-router-patterns
Source: https://github.com/paramcodes/autobro/tree/main/.agents/skills/clerk-react-router-patterns
Command: npx skills add https://github.com/paramcodes/autobro --skill clerk-react-router-patterns-paramcodes

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 from other frameworks, and misconfiguration causes cryptic SSR errors like "useNavigate() may be used only in the context of a Router". This Skill provides the correct wiring for rootAuthLoader, clerkMiddleware, getAuth, and protected routes so auth works on both server and client. ## Core Features & Use Cases - Root Setup: Configures clerkMiddleware, rootAuthLoader, and ClerkProvider in root.tsx, including the required ssr.noExternal workaround for React Router v8 in vite.config.ts. - Server-Side Auth: Uses getAuth in loaders and actions to protect routes, redirect unauthenticated users, and scope data by userId or orgId. - Client & Org Features: Covers useAuth/useUser hooks, OrganizationSwitcher, SSR user data via clerkClient, and session claims checks. - Use Case: You are building a React Router v8 dashboard and need only signed-in users in an active organization to access /dashboard. The Skill shows the loader that calls getAuth, redirects to /sign-in or /select-org, and fetches org-scoped data. ## 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?▼

Export clerkMiddleware() as middleware from root.tsx, call rootAuthLoader(args) in the root loader, and render ClerkProvider with loaderData in the default export. On React Router v8, also add ssr.noExternal for @clerk/react-router in vite.config.ts.

How to protect routes 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, making it the recommended approach over client-side guards.

Why does useNavigate may be used only in the context of a Router error occur with Clerk?▼

In React Router v8 dev mode, Vite externalizes @clerk/react-router for SSR, causing it to load 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.

Does @clerk/react-router support React Router v7 and v8?▼

Yes, @clerk/react-router v3.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 root.tsx's loader, or when clerkMiddleware is not exported from the root route. Both are required for auth state to reach nested loaders and actions.

What is the difference between useAuth and getAuth in Clerk React Router?▼

useAuth is a client hook imported from @clerk/react-router that returns synchronous reactive auth state in components. getAuth is a server function from @clerk/react-router/server that returns an async auth object inside loaders and actions.

Related Skills

Explore More Software Engineering Skills→
pattarapoljpattarapolj

clerk-setup

Configure Clerk authentication for web applications using the clerk CLI.

Community
Intermediate
pattarapoljpattarapolj

clerk-custom-ui

Customize Clerk authentication flows and component appearance with theming.

Community
Advanced
DimonikRVDimonikRV

clerk-orgs

Implements Clerk Organizations for multi-tenant B2B SaaS with roles, invitations, and enterprise SSO.

Community
Advanced
zebbernzebbern
4.6k

authentication-patterns

Guides implementation of session, JWT, and OAuth authentication with security checklists.

Community
Intermediate