skills.rest
divinaarmuela
divinaarmuelaCOMMUNITY
Explore all skills by this author →
GitHub

clerk-react-router-patterns

Implements Clerk authentication patterns for React Router v7/v8 loaders, actions, and middleware.

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

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 SSR errors like "useNavigate may be used only in the context of a Router". This Skill provides the correct patterns for rootAuthLoader, clerkMiddleware, getAuth, and protected routes so auth works on the first try. ## Core Features & Use Cases - Root Setup: Configures clerkMiddleware, rootAuthLoader, and ClerkProvider in root.tsx, including the required vite.config.ts ssr.noExternal workaround for React Router v8. - Server-Side Auth: Uses getAuth in loaders and actions to gate routes, read userId/orgId, and scope data fetches to the active organization. - Client Components & Orgs: Covers useAuth/useUser hooks and OrganizationSwitcher for org switching flows. - Use Case: You are building a React Router v8 dashboard and need /dashboard to redirect unauthenticated users to /sign-in while loading org-scoped data. The Skill supplies the exact loader code with getAuth, redirect logic, and the v8 Vite fix. ## Quick Start Ask the assistant to set up Clerk authentication in your React Router app with rootAuthLoader, clerkMiddleware, and a protected dashboard route.

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

Why does useNavigate throw 'may be used only in the context of a Router' 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 have a ClerkApp component like @clerk/remix?▼

No, ClerkApp does not exist in @clerk/react-router. Render ClerkProvider with the root route's loaderData inside root.tsx's default export instead.

How do I access the current organization in a React Router loader?▼

Destructure orgId from getAuth(args) in the loader. Redirect to /select-org when orgId is falsy, otherwise use orgId to scope your data fetch to the active organization.

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

useAuth is a client hook imported from @clerk/react-router that returns reactive auth state in components. getAuth is an async server function from @clerk/react-router/server used inside loaders and actions to read userId, sessionId, and orgId.

Related Skills

Explore More Software Engineering Skills→
sudarshan-krishnansudarshan-krishnan

clerk-setup

Add Clerk authentication to web apps and APIs by framework.

Community
Advanced
udecodeudecode
434

convex-admin

Integrate Better Auth role-based access control into Convex admin panels and user-management workflows.

Official
Intermediate
sheriaxsheriax

clerk-custom-ui

Create custom Clerk authentication flows and theme components with React hooks.

Official
Intermediate
weng-labweng-lab

clerk-setup

Detect the framework from package.json and apply the matching Clerk quickstart.

Official
Advanced