clerk-react-router-patterns

To set up protected routes with Clerk in React Router, call `getAuth(args)` inside your server loaders and check for a valid `userId`. If the user is unauthenticated, redirect them to the sign-in page or return a 401 error to block access.

The `getAuth` function throws errors in nested loaders when root auth state is missing. You must wire `rootAuthLoader` in your `root.tsx` file to establish the necessary authentication context for downstream nested routes to function correctly.

To handle organization switching, use the `OrganizationSwitcher` component for org-scoped UX and `useAuth` for client navigation data. In nested loaders, check for a missing `orgId` and redirect users to maintain proper access control.

Yes, you can use `clerkMiddleware` to protect server-side data loading in React Router. By combining it with `getAuth` in nested loaders and actions, you can securely gate routes and handle unauthenticated requests with redirects or 401 errors.

The best way to gate authenticated actions in React Router v7 is using `getAuth(args)` within your action functions. Verify the presence of `userId` or `orgId` and respond with appropriate errors or redirects when authentication or organization authorization is missing.