Clerk React Router SDK

The Clerk React Router SDK gives you access to prebuilt components, React hooks, and helpers to make user authentication easier. Refer to the quickstart guide to get started.

Client-side helpers

Because the React Router SDK is built on top of the React SDK, you can use the hooks that the React SDK provides. These hooks include access to the Clerk object, User object, Organization object, and a set of useful helper methods for signing in and signing up. Learn more in the Clerk React SDK reference.

• useUser()
• useClerk()
• useAuth()
• useSignIn()
• useSignUp()
• useSession()
• useSessionList()
• useOrganization()
• useOrganizationList()
• useOrganizationCreationDefaults()
• useReverification()
• useCheckout()
• usePaymentElement()
• usePaymentMethods()
• usePlans()
• useSubscription()
• useStatements()
• usePaymentAttempts()

Server-side helpers

The following references show how to integrate Clerk features into applications using React Router server functions and API routes.

• getAuth()
• clerkMiddleware()
• rootAuthLoader()

clerkClient()

Clerk's JS Backend SDK is a wrapper around the Backend API⁠ that makes it easier to interact with the API. For example, to retrieve a list of all users in your application, you can use the users.getUserList() method from the JS Backend SDK instead of manually making a fetch request to the https://api.clerk.com/v1/users endpoint.

To access a resource, you must first instantiate a clerkClient instance. See the reference documentation for more information.

React Router implementations

React Router can be integrated with Clerk in three ways:

• Framework mode (recommended): Configure your app using Clerk's React Router SDK.
• Declarative mode: Manually integrate React Router into your React + Vite app using declarative mode.
• Data mode: Use React Router's data APIs to load data and manage state in your Clerk app. To use React Router in data mode, see the demo repository⁠.