Learn how to make Clerk React components available in your project.
If you are using Next.js, please make sure to install @clerk/nextjs as @clerk/clerk-react is incompatible
Clerk React is a wrapper around ClerkJS. It is the recommended way to integrate Clerk into your React application.
Clerk React provides React.js implementations of Clerk Components; highly customizable, pre-built components that you can use to build beautiful user management applications. You can find display components for building sign in, sign up, account switching and user profile management pages as well as flow control components that act as helpers for implementing a seamless authentication experience.
Setting up Clerk React
There's an ES module for Clerk React, available under the @clerk/clerk-react npm package. Use
yarn to install the Clerk React module.
ClerkProvider allows you to render Clerk Components and access the available Clerk React hooks in any nested component. You'll have to wrap your application once with a
<ClerkProvider/> component at the root of your React app so that it is available everywhere you need it.
In order to use
<ClerkProvider/>, first you need to locate the entry point file of your React app. Usually this is your
src/index.js (Create React App) or
pages/_app (Next.js) file. In general, you're looking for the file where the
ReactDOM.render function gets called.
A common scenario when using React is to navigate through your application without a full page reload. Our display components use this prop when navigating between subpages and when navigating to callback URLs.
<ClerkProvider/> navigate prop allows you to provide 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
navigate function provided by your router.
You can find examples of setting up path-based routing for React Router and Next.js.