clerk-react-router-patterns Skill: What It Does and How to Install It

Makes your coding agent add Clerk sign-in to a React Router v7 or v8 app: root loader, middleware, loaders and actions.

Installs: 15.8K; on skills.sh
Stars: 89; on GitHub
Files: 11; besides SKILL.md
Updated: Oct 2026; last repo commit

The SKILL.md tells the agent to use @clerk/react-router v3.5+ with React Router v7.9+ or v8. It adds clerkMiddleware() and rootAuthLoader in root.tsx, wraps the app in ClerkProvider, and calls getAuth in loaders and actions. It also states the v7 and v8 differences: v7 needs a v8_middleware future flag, and v8 needs ssr.noExternal for @clerk/react-router in vite.config.ts.

It loads on rootAuthLoader, getAuth in a loader or the useNavigate() may be used only in the context of a Router error. You need a Clerk publishable key and secret key.

Good for

React Router v7 and v8 developers adding Clerk
Teams checking auth in loaders and actions
Anyone hitting the useNavigate Router-context error during SSR

Install clerk-react-router-patterns

Claude Code

Copy this prompt.

Install the clerk-react-router-patterns skill in Claude Code. Run this command:

/plugin marketplace add clerk/skills
/plugin install clerk@clerk-skills

Then check that it loaded and tell me how to use it.

2
Paste it into Claude Code. It shows the change and asks before running it.

Pick one route. The plugin installs all 20 skills in the Clerk repo (counted from the repo tree) and adds the Clerk MCP server from the repo's .mcp.json, which points at https://mcp.clerk.com/mcp. The skills-only routes install just this skill and no MCP server config. The README says to open /plugin, go to Marketplaces, select clerk-skills and enable auto-update if you want updates.

From the project README. Source.

What's in the skill

When it loads

React Router v7/v8 patterns with Clerk — rootAuthLoader, getAuth in loaders, clerkMiddleware, protected routes, SSR user data, org switching. Triggers on: react-router auth, rootAuthLoader, getAuth loader, react-router protected route, loader authentication, SSR auth react-router, useNavigate may be used only in the context of a Router.

Sections in SKILL.md

What Do You Need?
React Router v7 vs v8
Minimal Setup
1. vite.config.ts (v8 only — REQUIRED)
2. root.tsx
3. react-router.config.ts (v7 only)
Mental Model
Auth in Loaders
Auth in Actions
Client Components
Org Switching
Common Pitfalls
Import Map
See Also
Docs

Key facts

Author: Clerk (the skill is in Clerk's own clerk/skills repo)
License: MIT (README, plugin.json and SKILL.md frontmatter; the repo has no LICENSE file)
Installs on skills.sh: 15,766 (Nov 2, 2026)
GitHub stars: 89 for the whole clerk/skills repo (Nov 2, 2026)
Last repo commit: Oct 30, 2026
What it includes: 12 files including SKILL.md: 3 reference files, an evals/evals.json file and 7 files in a React Router starter template
Needs: `@clerk/react-router` v3.5+ with React Router v7.9+ or v8 (SKILL.md)
Works in: Claude Code, Codex, Cursor and GitHub Copilot CLI through the plugin; any agent through npx skills

What it includes

Add clerkMiddleware, rootAuthLoader and ClerkProvider to root.tsx.
rootAuthLoader must be called in the root loader or getAuth throws in nested loaders. Source: SKILL.md.
Try: “Add Clerk to my React Router app”
Write · Root setup
Set the future flag on v7, or ssr.noExternal on v8.
v7 sets future.v8_middleware in react-router.config.ts. v8 adds ssr.noExternal for @clerk/react-router in vite.config.ts and omits the flag.
Write · v7 or v8 config
Call getAuth(args) and redirect or return 401 when signed out.
Covers getAuth in loaders and actions, the rootAuthLoader callback form and the available auth fields. Source: references/loaders-actions.md.
Try: “Require sign-in in my dashboard loader”
Write · Loaders and actions
Protect at loader level, middleware level or client level.
Covers loader-level protection (the recommended one), middleware protection, a client guard and organization-gated routes. Source: references/protected-routes.md.
Write · Protected routes
Pass auth state to components and get tokens for external APIs.
Covers useAuth versus getAuth, getToken and session claims. Source: references/ssr-auth.md.
Write · SSR auth
Add OrganizationSwitcher and require an active org in a loader.
Redirects to /select-org when no organization is active.
Write · Organization switching

From the official docs

Permissions

Low risk

The skill makes an agent change code in your project and add Clerk keys to your env file, so a wrong edit lands in your own app. Review the diff before you commit it and keep the secret key out of git.

What it can do

Read your data
Create and change things
Delete things
Read-only mode

Watch out for

It edits files in your project
The SKILL.md has the agent edit `root.tsx`, `react-router.config.ts` and `vite.config.ts`. Review the diff before you commit it. github.com
The plugin route also adds the Clerk MCP server
The plugin's .mcp.json registers https://mcp.clerk.com/mcp. Use the skills CLI route if you only want this skill. github.com

Security advisories

No published security advisories as of Nov 2, 2026.

Technical details

Turning on read-only	No read-only mode.
Talks to	WebFetch tool (the frontmatter allows it; the SKILL.md links point at clerk.com/docs)
Sign-in and keys	The SKILL.md shows Clerk keys going into your project's env file.
Scopes	Your project files Clerk keys in your env file

Questions

What does clerk-react-router-patterns do?

It makes your coding agent write Clerk sign-in code for React Router v7 and v8: middleware, rootAuthLoader, getAuth in loaders and actions, and protected routes.

How do I install clerk-react-router-patterns?

Use the install box above. The Claude Code plugin route installs every Clerk skill and the Clerk MCP server, and the skills CLI route installs only this skill. Pick one route, not both, or you get the skills twice.

Is clerk-react-router-patterns official?

Yes. It is published in Clerk's own clerk/skills repository, and the plugin.json in that repo lists Clerk as the author.

Does clerk-react-router-patterns work in the Claude app or Codex?

Codex, Cursor and GitHub Copilot CLI each have a plugin install in the README. The README does not document uploading Clerk skills to the Claude app, and this skill's job is to change code in a local project, so the install box has no Claude app tab.

Does it need a Clerk account or API key?

You need a Clerk publishable key and secret key for the app you are building. The SKILL.md does not show an env file, so check where your app reads them.

Is clerk-react-router-patterns safe to install?

Its SKILL.md makes the agent change files in your project and use Clerk keys from your env file, and its frontmatter allows the WebFetch tool. Our advice: read each change before you commit it, and keep the secret key out of git.

Why do I get the useNavigate Router-context error on React Router v8?

The SKILL.md says Vite dev SSR loads two copies of react-router, and the fix is ssr: { noExternal: ['@clerk/react-router'] } in vite.config.ts. It says not to downgrade to v7.

clerk-react-router-patterns vs clerk-react-patterns?

Use clerk-react-router-patterns for React Router v7 or v8 with loaders and server rendering. Use clerk-react-patterns for a Vite or CRA single-page app that uses @clerk/react.

Information

updated Nov 2, 2026

Repository: clerk/skills
Folder: skills/clerk-react-router-patterns

clerk/skills skills.sh

Sources

Docs, issue trackers and discussions this page is built from.

Show all 4

clerk-react-router-patterns SKILL.md · github.com
clerk/skills README · github.com
clerk plugin.json · github.com
clerk .mcp.json · github.com