React Quickstart
You will learn the following:
- Create a new React application using Vite
- Install
@clerk/clerk-react
- Set up your environment variables
- Import the Clerk publishable key
- Add
<ClerkProvider />
to your application - Create a header with Clerk components for users to sign in and out
Set up a React application using Vite
Scaffold your new React application using Vite.
Install @clerk/clerk-react
Clerk's React SDK gives you access to prebuilt components, hooks, and helpers for React.
To get started using Clerk with React, add the SDK to your project:
Set your environment variables
- If you don't have an
.env.local
file in the root directory of your React project, create one now. - Find your Clerk publishable key. If you're signed into Clerk, the
.env.local
snippet below will contain your key. Otherwise:- Navigate to the Clerk Dashboard and select your application.
- In the navigation sidebar, select API Keys.
- You can copy your key from the Quick Copy section.
- Add your key to your
.env.local
file.
The final result should look as follows:
Import the Clerk publishable key
You will need to import your Clerk publishable key into your application. You can add an if
statement to check that it is imported and that it exists. This will prevent running the application without the publishable key, and will also prevent TypeScript errors.
Add <ClerkProvider>
to your app
All Clerk hooks and components must be children of the <ClerkProvider>
component, which provides active session and user context.
To make this data available across your entire app, wrap your app in the <ClerkProvider>
component. You must pass your publishable key as a prop to the <ClerkProvider>
component.
Create a header with Clerk components
You can control which content signed in and signed out users can see with Clerk's prebuilt components. To get started, create a header for your users to sign in or out. To do this, you will use:
<SignedIn>
: Children of this component can only be seen while signed in.<SignedOut>
: Children of this component can only be seen while signed out.<UserButton />
: A prebuilt component that comes styled out of the box to show the avatar from the account the user is signed in with.<SignInButton />
: An unstyled component that links to the sign-in page or displays the sign-in modal.
Create your first user
Run your project with the following command:
Visit your app's homepage at http://localhost:5173
. Sign up to create your first user.
Next step: Add routing with React Router
React has many options for handling routing, and you are free to choose the option that suits you best. If you would like to learn how to integrate React Router's latest Data API-based router (nicknamed Data Router), please see the Add React Router to your Clerk Powered application guide.
More resources
You can also learn more about Clerk components, how to customize them, and how to use Clerk's client-side helpers. The following guides will help you get started.
Prebuilt Components
Learn more about Clerk's suite of components that let you quickly add authentication to your app.
Customization & Localization
Learn how to customize and localize Clerk components.
Client Side Helpers
Learn more about our client-side helpers and how to use them.
Feedback
Last updated on