### Install @clerk/clerk-react Once you have a React application ready, you need to install Clerk's React SDK. This gives you access to our prebuilt components and hooks for React applications. ``` bash npm install @clerk/clerk-react ``` ### Set Environment Keys Below is an example of your .env.local file. To get the respective keys go to the API Keys page in the Clerk dashboard. ```bash REACT_APP_CLERK_PUBLISHABLE_KEY=pk_test_•••••••••••••••••••••••••••••••••• ``` ### Configure `` Clerk requires your React application to be wrapped in the `` component. The `` component provides active session and user context to Clerk's hooks and other components. ```tsx import React from "react"; import "./App.css"; import { ClerkProvider } from "@clerk/clerk-react"; if (!process.env.REACT_APP_CLERK_PUBLISHABLE_KEY) { throw new Error("Missing Publishable Key") } const clerkPubKey = process.env.REACT_APP_CLERK_PUBLISHABLE_KEY; function App() { return (

Hello from clerk

); } export default App; ``` ### Protecting Your Pages Clerk offers Control Components that allow you to protect your pages, below is a simple example using Clerk's hosted components and the `` and `` control components. ```tsx import React from "react"; import "./App.css"; import { ClerkProvider, SignedIn, SignedOut, UserButton, useUser, RedirectToSignIn, } from "@clerk/clerk-react"; if (!process.env.REACT_APP_CLERK_PUBLISHABLE_KEY) { throw "Missing Publishable Key" } const clerkPubKey = process.env.REACT_APP_CLERK_PUBLISHABLE_KEY; function App() { return ( ); } function Welcome() { return

Hello you are signed in

; } export default App; ``` ### Using a Routing Library with clerk Clerk can work with any routing library, below is an example of how to use Clerk with React Router and embedding the Clerk components in your application. ```tsx import { ClerkProvider, SignedIn, SignedOut, RedirectToSignIn, SignIn, SignUp, UserButton, } from "@clerk/clerk-react"; import { BrowserRouter, Route, Routes, useNavigate } from "react-router-dom"; if (!process.env.REACT_APP_CLERK_PUBLISHABLE_KEY) { throw new Error("Missing Publishable Key") } const clerkPubKey = process.env.REACT_APP_CLERK_PUBLISHABLE_KEY; function PublicPage() { return ( <>

Public page

Go to protected page ); } function ProtectedPage() { return ( <>

Protected page

); } function ClerkProviderWithRoutes() { const navigate = useNavigate(); return ( navigate(to)} > } /> } /> } /> } /> ); } function App() { return ( ); } export default App; ``` ### Read Session & User Data Clerk provides a set of hooks and helpers that you can use to access the active session and user data in your React application. We have included examples of how to use these helpers to get you started. #### `useAuth` The `useAuth` hook is a convenient way to access the current auth state. This hook provides the minimal information needed for data-loading and helper methods to manage the current active session. ```tsx import { useAuth } from "@clerk/clerk-react"; export default function Example() { const { isLoaded, userId, sessionId, getToken } = useAuth(); // In case the user signs out while on the page. if (!isLoaded || !userId) { return null; } return (

Hello, {userId} your current active session is {sessionId}

); } ``` #### `useUser` The `useUser` hook is a convenient way to access the current user data where you need it. This hook provides the user data and helper methods to manage the current active session. ```tsx import { useUser } from "@clerk/clerk-react"; export default function Example() { const { isLoaded, isSignedIn, user } = useUser(); if (!isLoaded || !isSignedIn) { return null; } return

Hello, {user.firstName} welcome to Clerk

; } ```

Get started with React

Learn to install and initialize Clerk in a new Create React App.