This guide will help you install and initialize Clerk in a new Create React App.
1. Create a Create React App app
Start by creating a new Create React App app.
For more information about these commands, please reference the Create React App documentation.
2. Install Clerk
Install Clerk's NPM package.
3. Configure src/App.js
Clerk requires every page to be wrapped in the
<ClerkProvider> context. In Create React App, we add this in
In the code below, we've also added a sign in requirement, and show a greeting when a user is signed in.
4. Add a router
A common next step is to add a router. Here we use React Router to add public and protected routes to our application.
Before using this code, you must install React Router:
This is just one example of how authentication can be handled with Clerk. Feel free to adjust the strategy to better serve your use case!
5. Mount components
By default, Clerk hosts the SignIn, SignUp, and UserProfile components on the "accounts" subdomain for your instance. In production, this will be
If you prefer, you can also "mount" these components directly in your application.
This is the same router logic as above, but with 3 additional changes:
We add public routes for Sign In and Sign Up, and a private route for User Profile.
We create a
<ClerkProviderWithNavigate>component that uses React Router's
useHistoryhook to pass a
<ClerkProvider>. This allows Clerk to navigate inside and between components without conflicting with React Router.
We replace our custom
<RedirectToSignIn>component with React Router's
<Redirect>component, since now the navigation is internal.
i. Update src/App.js
ii. Update instance settings
The final step is to update your instance settings so that users will be defaulted to your mounted components instead of the "accounts" subdomain.
Dashboard update instructions coming soon.