clerk-react-router-patternslisted

# 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 in `root.tsx` to pass Clerk state to the client - **`getAuth(args)`** — called inside any loader/action to get the current user ``` Request → clerkMiddleware() → rootAuthLoader → page loader → component ↓ ↓ ↓ attaches auth injects state getAuth(args) to context to response reads context ``` ## Minimal Setup ### 1. root.tsx ```tsx import { rootAuthLoader } from '@clerk/react-router/server' import { ClerkApp } from '@clerk/react-router' import type { Route } from './+types/root' export async function loader(args: Route.LoaderArgs) { return rootAuthLoader(args) } export default ClerkApp(function App() { return <Outlet /> }) ``` ### 2. Middleware (root route or entry.server.ts) ```tsx import { clerkMiddleware } from '@clerk/react-router/server' export const middleware = [clerkMiddleware()] ``` > **Required**: `rootAuthLoad