VOOZH about

URL: https://clerk.com/docs/react-router/getting-started/quickstart

⇱ React Router Quickstart - Getting started | Clerk Docs

Skip to main content

React Router Quickstart

React Router can be used in different modes: declarative, data, or framework. This tutorial explains how to use React Router in framework mode. To use React Router in declarative mode instead, see the dedicated guide.

This tutorial assumes that you're using React Router v7.1.2 or later in framework mode.

Create a new React app using React Router

If you don't already have a React app using React Router, run the following commands to create a new one.

npm
npmcreatereact-router@latestclerk-react-router
cdclerk-react-router
npminstall
pnpmcreatereact-routerclerk-react-router
cdclerk-react-router
pnpminstall
yarncreatereact-routerclerk-react-router
cdclerk-react-router
yarninstall
bunxcreate-react-routerclerk-react-router
cdclerk-react-router
buninstall

Install @clerk/react-router

The Clerk React Router SDK gives you access to prebuilt components, hooks, and helpers to make user authentication easier.

Run the following command to install the SDK:

npm
npminstall@clerk/react-router
pnpmadd@clerk/react-router
yarnadd@clerk/react-router
bunadd@clerk/react-router

Add the following keys to your .env file. These keys can always be retrieved from the API keys page in the Clerk Dashboard.

  1. In the Clerk Dashboard, navigate to the API keys page.
  2. In the Quick Copy section, copy your Clerk Publishable Key and Secret Key.
  3. Paste your keys into your .env file.

The final result should resemble the following:

.env
VITE_CLERK_PUBLISHABLE_KEY=YOUR_PUBLISHABLE_KEY
CLERK_SECRET_KEY=YOUR_SECRET_KEY

Add clerkMiddleware() and rootAuthLoader() to your app

clerkMiddleware() grants you access to user authentication state throughout your app. It also allows you to protect specific routes from unauthenticated users. To add clerkMiddleware() to your app, follow these steps:

  1. Since React Router middleware requires opting in via a future flag, add the following to your react-router.config.ts file:
react-router.config.ts
importtype { Config } from'@react-router/dev/config'

exportdefault {
// ...
 future: {
 v8_middleware:true,
 },
} satisfiesConfig
  1. Add the following code to your root.tsx file to configure the clerkMiddleware() and rootAuthLoader() functions.
app/root.tsx
import { clerkMiddleware, rootAuthLoader } from'@clerk/react-router/server'

exportconstmiddleware:Route.MiddlewareFunction[] = [clerkMiddleware()]

exportconstloader= (args:Route.LoaderArgs) =>rootAuthLoader(args)
  1. By default, clerkMiddleware() will not protect any routes. All routes are public and you must opt-in to protection for routes. See the clerkMiddleware() reference to learn how to require authentication for specific routes.

Add <ClerkProvider> and Clerk components to your app

The <ClerkProvider> component provides session and user context to Clerk's hooks and components. It's recommended to wrap your entire app at the entry point with <ClerkProvider> to make authentication globally accessible. See the reference docs for other configuration options.

Copy and paste the following code into your root.tsx file. This:

  • Adds the <ClerkProvider> to your app, providing Clerk's authentication context to your app. Pass loaderData to the provider so it can access the authentication data loaded by rootAuthLoader().
  • Creates a header with Clerk's prebuilt components to allow users to sign in and out, and display different content for signed-in and signed-out users.
app/root.tsx
import { ClerkProvider, SignInButton, SignUpButton, Show, UserButton } from'@clerk/react-router'
import { isRouteErrorResponse, Links, Meta, Outlet, Scripts, ScrollRestoration } from'react-router'
import { clerkMiddleware, rootAuthLoader } from'@clerk/react-router/server'

// Pull in the `loaderData` from the `rootAuthLoader()` function
exportdefaultfunctionApp({ loaderData }:Route.ComponentProps) {
return (
// Pass the `loaderData` to the `<ClerkProvider>` component
 <ClerkProviderloaderData={loaderData}>
 <headerclassName="flex items-center justify-center py-8 px-4">
 <Showwhen="signed-out">
 <SignInButton />
 <SignUpButton />
 </Show>
 <Showwhen="signed-in">
 <UserButton />
 </Show>
 </header>
 <Outlet />
 </ClerkProvider>
 )
}
}

This example uses the following components:

Run your project

Run your project with the following command:

npm
npmrundev
pnpmrundev
yarndev
bunrundev

Create your first user

  1. Visit your app's homepage at http://localhost:5173.
  2. Select "Sign up" on the page and authenticate to create your first user.

Next steps

Learn more about Clerk components, how to build custom authentication flows, and how to use Clerk's client-side helpers using the following guides.

Prebuilt components

Learn how to quickly add authentication to your app using Clerk's suite of components.

Create a custom sign-in-or-up page

Learn how to create a custom sign-in-or-up page with Clerk components.

Protect content and read user data

Learn how to use Clerk's hooks and helpers to protect content and read user data in your React Router app.

Get started with Organizations

Learn how to create and manage Organizations in your React Router app.

Feedback

Last updated on