clerk-react-router-patterns

Set up Clerk authentication in React Router v7 by wiring rootAuthLoader in your root route and protecting child routes with getAuth in loaders and actions. This pattern securely gates protected routes and hydrates user data on initial load.

rootAuthLoader in Clerk and React Router passes Clerk authentication state to the client and hydrates user data on initial load. It ensures user context is preserved across navigation and server rendering for dashboards and protected routes.

Clerk middleware handles authentication during SSR data fetching by attaching server-side authentication context to requests. This provides consistent request context for loaders and actions to drive data-fetching logic based on authentication status.

Yes, you can use Clerk to manage org switching in a React Router dashboard by applying org switching patterns. These patterns maintain correct organization context during navigation and data fetching to properly scope org data.

Access user and organization details on the server for initial render by using clerkClient for SSR data access. This fetches user and org details directly on the server, securely managing user context during server rendering.