This guide will help you install and initialize Clerk, so you can take advantage of our context utilities, control components, and display components in your React application.
1. Install the NPM package
npm install @clerk/clerk-react or
yarn add @clerk/clerk-react
2. Find your React entrypoint
Find the file with the top-most React component.
- create-react-app — Use src/index
- Next.js — Use pages/_app. If you do not have a pages/_app file yet, add one using the Next.js documentation for a Custom `App`.
For other frameworks or custom buildpacks, generally the top-most React component will be in a file named index or app. You can also search for the file where
ReactDOM.render gets called.
3. Import and initialize Clerk
In your entrypoint file, import
ClerkProvider modules from our NPM package:
Finally, wrap your entire application with the ClerkProvider component. This is a react context provider that is required for our context utilities, control components, and display components.
host prop with the Client API host found in your dashboard.
4. The navigate prop
navigate prop enables Clerk to navigate inside your application without a full page reload. Our display components use this prop when navigating between subpages, and when navigating to callback URLs like
navigate prop a function which takes the destination URL as an argument and performs a "push" navigation. You should not implement the push yourself, but instead wrap the push function provided by your router.
Below are examples for React Router and Next.js.