clerk-react-patterns

To set up protected routes in a React SPA with Clerk, wrap your routes in a ProtectedRoute component that redirects unauthenticated users. Use the useAuth hook, ensuring the isLoaded state is true before trusting isSignedIn, and render pages via the <Outlet /> component.

Clerk auth state shows unauthenticated before loading completes because hook-derived state requires initialization. You must implement an isLoaded guard before trusting the isSignedIn value from the useAuth or useUser hooks to prevent redirecting authenticated users prematurely.

Yes, you can build custom sign-in and sign-up flows in React using the useSignIn and useSignUp hooks. These hooks allow you to authenticate users with email and password while handling multi-step status requirements like complete and missing_requirements.

To send authenticated API requests with a Clerk session token, use the getToken function to retrieve the active session token. Send this token in the Authorization header as a Bearer token to authorize your backend API calls for the authenticated user.

Place the ClerkProvider at the app root, typically in src/main.tsx for Vite or Create React App projects. Initialize it using the VITE_CLERK_PUBLISHABLE_KEY environment variable to ensure authentication context is available across your entire React SPA.