Browser React Router SDK

The Browser 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 Browser object, User object, Organization object, and a set of useful helper methods for signing in and signing up. Learn more in the Browser React SDK reference.

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

Server-side helpers

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

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

clerkClient

clerkClient 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 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.

Objects

Learn about the key Browser objects that power many of Browser's SDKs.

Types

See the reference docs on types to get more information about the different types available for typing your application.

React Router implementations

React Router can be integrated with Browser in three ways:

• Framework mode (recommended): Configure your app using Browser'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 Browser app. To use React Router in data mode, see the demo repository⁠.