What problem does it solve?
Clerk authentication often breaks in React apps when you don’t correctly handle initialization timing, protected routes, token usage, or custom sign-in flows.
Core Features & Use Cases
- Clerk React Client-Only Auth Setup: Properly initialize
ClerkProvider and use @clerk/react hooks without relying on server-side auth.
- isLoaded-Safe Hook Usage: Use
useAuth, useUser, and useClerk with correct guards to prevent undefined auth state and UI flicker.
- Protected Routes + Redirects: Protect React Router v6/v7 routes with a
ProtectedRoute pattern that redirects to sign-in when unauthenticated.
- Custom Sign-In/Sign-Up Flows: Build email/password sign-in and sign-up flows using
useSignIn and useSignUp, including status handling and activation.
- JWT Token for API Calls: Fetch session JWTs via
getToken() and attach them as Bearer tokens to backend requests.
Quick Start
Add ClerkProvider at the root in your React entry file, then create a ProtectedRoute that checks isLoaded and isSignedIn before rendering protected pages in your React Router configuration.
