clerk-react-patterns

To protect routes in React with Clerk, implement a ProtectedRoute component using React Router v6/v7 that returns a loading state while the useAuth isLoaded hook is false and redirects to /sign-in when isSignedIn is false. This prevents unauthorized access to secure dashboard areas.

Setting up ClerkProvider in a Vite React project requires placing the provider at the app root in your main file and loading the publishable key from the VITE_CLERK_PUBLISHABLE_KEY environment variable via import.meta.env. This ensures authentication context is available across the entire application.

You get session tokens for API calls in Clerk React hooks by using the getToken function from the useAuth hook. This provides a session token you can attach to backend API requests to authenticate and authorize user actions securely.

Yes, you can build custom sign-in and sign-up forms using Clerk with React through the useClerk hook. This allows you to create tailored authentication flows while leveraging Clerk's underlying security and session management infrastructure.

Your React app crashes or shows blank screens before Clerk loads because authentication state is uninitialized. You must implement an isLoaded guard from the useAuth or useUser hooks to render a loading fallback until the Clerk session state fully resolves.

Yes, Clerk React authentication works with both Vite and Create React App projects. The integration patterns apply universally, though environment variable access differs slightly between Vite's import.meta.env and Create React App's process.env syntax.