What problem does it solve?
This Skill provides clear, actionable patterns for integrating Clerk authentication into React Router v7 applications so that server-side loaders, middleware, and client components can reliably detect and enforce user identity and organization context. It prevents common runtime failures like getAuth throwing when middleware or root loader setup is missing and reduces redirect loops and incorrect access checks.
Core Features & Use Cases
- Middleware integration guidance to attach auth into the request pipeline and ensure getAuth works in nested loaders.
- rootAuthLoader usage for passing Clerk state from the server root loader to the client and an optional callback for loading user data on the server.
- Usage patterns for getAuth in loaders and actions to enforce per-route authentication, perform org-scoped redirects, and obtain tokens for external APIs.
- SSR user data examples and OrganizationSwitcher usage for org-scoped flows and admin gating.
- Practical troubleshooting notes covering missing middleware, infinite redirects, and correct redirect semantics in loaders and actions.
Quick Start
Add clerkMiddleware at the root, call rootAuthLoader in your root loader, and use getAuth in protected loaders and actions to redirect unauthenticated users to /sign-in.
