clerk-react-router-patterns

What problem does it solve?

Provides clear, repeatable patterns for integrating Clerk authentication with React Router v7 so teams can implement secure server- and client-side auth without subtle bugs like missing middleware or infinite redirect loops.

Core Features & Use Cases

• Middleware + Loader Integration: Shows how to install clerkMiddleware and call rootAuthLoader so getAuth works reliably in nested loaders and actions.
• Loader and Action Protection: Demonstrates using getAuth inside loaders and actions to perform server-side redirects, 401/403 responses, and scoped data fetching.
• SSR and Client Hooks: Explains fetching SSR user data via clerkClient/getAuth and consuming reactive client hooks such as useAuth and useUser.
• Organization Support: Covers org-scoped loaders and the OrganizationSwitcher component for B2B flows.
• Use Case: Protect a /dashboard route, redirect unauthenticated users to /sign-in, and load org-specific data when orgId is present.

Quick Start

Add clerkMiddleware to your root route, call rootAuthLoader in your root.tsx loader, and use getAuth in any protected loader or action to validate userId and orgId before fetching data.