clerk-react-patterns

Install @clerk/react, add VITE_CLERK_PUBLISHABLE_KEY to your .env file, and wrap your App in ClerkProvider inside main.tsx. Read the key via import.meta.env.VITE_CLERK_PUBLISHABLE_KEY and pass it as the publishableKey prop.

Create a ProtectedRoute component that calls useAuth, returns a loading state while isLoaded is false, and renders <Navigate to="/sign-in" replace /> when the user is not signed in. Wrap protected routes with this component using the Outlet pattern in React Router v6/v7.

Use the useSignIn hook, call signIn.create with the email identifier and password, then check result.status === 'complete' before calling setActive with the createdSessionId. Catch errors and display the first error message from the Clerk error response.

isSignedIn is undefined while Clerk is still initializing, meaning isLoaded is false. Always check isLoaded first and render a loading state before trusting any auth values from useAuth or useUser.

Call getToken() from the useAuth hook and await the result, since it returns a Promise. Null-check the token, then attach it as a Bearer token in the Authorization header of your fetch request.

No, @clerk/react is client-only and intended for Vite or CRA single-page applications. For Next.js use @clerk/nextjs instead, which provides server-side auth() support that the React SPA SDK does not have.