clerk-react-router-patterns
Installation
SKILL.md
React Router Patterns
SDK: @clerk/react-router v3+. Requires React Router v7.9+.
What Do You Need?
| Task | Reference |
|---|---|
| Auth in loaders and actions | references/loaders-actions.md |
| Protected routes and redirects | references/protected-routes.md |
| SSR user data and session | references/ssr-auth.md |
Mental Model
React Router v7 uses a middleware + loader pipeline. Clerk plugs into both layers:
- Middleware (
clerkMiddleware()) — runs on every request, attaches auth to context rootAuthLoader— required inroot.tsxto pass Clerk state to the clientgetAuth(args)— called inside any loader/action to get the current user
Related skills
More from clerk/skills
clerk-nextjs-patterns
Advanced Next.js patterns - middleware, Server Actions, caching with
11.2Kclerk
Clerk authentication router. Use when user asks about adding authentication,
7.8Kclerk-setup
Add Clerk authentication to any project by following the official quickstart
7.0Kclerk-custom-ui
Custom authentication flows and component appearance - hooks (useSignIn,
6.7Kclerk-webhooks
Clerk webhooks for real-time events and data syncing. Verify with verifyWebhook
6.1Kclerk-testing
E2E testing for Clerk apps. Use with Playwright or Cypress for auth flow
5.8K