React Authentication

Authentication optimized for React

Implement authentication and user management the React way - with hooks and components.

Start building Explore the docs

Trusted by fast-growing companies around the world

UI Building Blocks

Beautiful prebuilt components to authenticate and manage your users

UI components for secure user sign-in, sign-up, profile management, organization management, and more.

Clerk components work quickly out-of-the-box and can be customized to perfectly match your brand.

<SignIn />

It all starts here. Configure your <SignIn /> component with authentication options your users find convenient then embed it directly in your application.

<SignUp />

Clerk enables your users to sign up for your application using their preferred method, including passwords, single sign-on, Passkeys, and even Web3 authentication.

Usually found in the top-right corner of your layout, <UserButton /> provides your users with convenient access to their account details. It also enables them to instantly switch accounts when multi-session handling is enabled.

<UserProfile />

Provide your users with a simple and clean experience for managing their accounts, without the need for you to manually build the necessary forms, logic, or complex data structures.

<OrganizationProfile />

Fully-featured and user-friendly UI for managing organization profiles and security settings.

<CreateOrganization />

Enable users to easily create organizations with Clerk's <CreateOrganization /> component, featuring avatar uploads and unique slug identifiers.

Organization and account overview screen for a Next.js application, showing user roles in various organizations, including options to create a new organization.

<OrganizationSwitcher />

Allow your users to seamlessly switch between their organizations right within your application.

Organization selection component for a Next.js application, allowing users to choose between their personal account and various organizations, with options to join or request access.

<OrganizationList />

List all of your users' organizations and invitations in a simple list that you can embed anywhere in your application.

Hooks and components

Everything you need for authentication

Clerk equips you with the tools and features necessary to implement the authentication experience your users deserve.

Access user data anywhere

Clerk efficiently handles user state management, giving you access to fresh user data wherever you need it.

const { user } =
useUser()

Protect your pages

Use control components like <SignedIn />, <SignedOut />, and <RedirectToSignIn /> to secure your pages and redirect unauthenticated users.

import {
  SignedIn,
  SignedOut,
  RedirectToSignIn
} from '@clerk/clerk-react'

const ProtectPage = () => {
  return (
    <>
      <SignedIn>
        {children}
      </SignedIn>

      <SignedOut>
        <RedirectToSignIn />
      </SignedOut>
    </>
  )
}

export default ProtectPage

Role-based access control

Define and assign permissions from the Clerk dashboard then conditionally render components based on the user’s access rights.

import { Protect } from '@clerk/clerk-react'

export default function ProtectPage() {
  return (
    <Protect
      permission="org:invoices:create"
      fallback={<p>You don't have permission</p>}
    >
      {children}
    </Protect>
  )
}

Complete session management

Don't touch a JWT, unless you want to. Clerk manages the entire session lifecycle, providing essential features like session revocation and active device monitoring.

Hardened user security from day one

Never compromise on user security or privacy to launch quickly. Protect your users from day one with MFA and new device alerts. Stop fraudulent bots in their tracks with Clerk's anti-abuse heuristics.

React SDKs

Build with your choice of framework

Clerk's React SDKs are purpose-built to integrate naturally with each framework's patterns and features. Choose one to get started.

Backend SDKs

Authenticate on any backend

Clerk's backend SDKs offer authentication helpers to easily access important data like the currently active user's ID.

React framework backends

Next.js

React Router

TanStack Start

import { auth } from '@clerk/nextjs/server'
import { NextResponse } from 'next/server'

export async function GET() {
  const { userId } = await auth()

  if (!userId) {
    // return 401 user not authenticated
  }

  // add your route handler logic here

  return NextResponse.json({ userId })
}

Standalone backends

Express

Fastify

Rails

import express from "express"
import { clerkMiddleware, getAuth } from "@clerk/express"

const app = express()
app.use(clerkMiddleware())

app.get("/api/example", (req, res) => {
  const { userId } = getAuth(req)

  if (!userId) {
    // return 401 user not authenticated
  }

  // add your route handler logic here

  res.json({ userId })
})

Backed by experts

Endorsed by engineering leaders and technical investors

The best practices built-in to their <SignIn/> and <UserProfile/> components would take months to implement in-house, yet no sacrifice is made in terms of Enterprise extensibility or customization to your brand.

Name: Guillermo Rauch
Role: CEO
Company: Vercel

Clerk feels like the first time I booted my computer with an SSD. It’s so much faster and simpler that it changed how I do things.

Name: Theo Browne
Role: CEO
Company: Ping Labs

After spending many hours on auth issues that seemed simple (but were not), we moved to Clerk and all that burden was lifted. We kind of wish we’d made that decision earlier.

Name: Julian Benegas
Role: CEO
Company: BaseHub

We’re big admirers of what the @ClerkDev team are building and looking forward to working more closely with them.

Name: Patrick Collison
Role: CEO
Company: Stripe

We were able to ship MFA, SSO, and SAML for our customers in a fraction of the time. Now, we have improved security and must-haves for enterprise prospects.

Name: Dan Farrelly
Role: CTO
Company: Inngest

Clerk’s integration gives Supabase developers another incredible option for handling authentication. And the Clerk team are a pleasure to work with.

Name: Paul Copplestone
Role: CEO
Company: Supabase

Sophisticated security

Take the security burden off your shoulders

Security is Clerk's most important responsibility and the central focus of every feature we build. We undergo rigorous security testing and maintain certification with leading industry standards.

Learn more

Secure, private, and compliant. Always.

SOC2 Type II
HIPAA
CCPA

Comprehensive user management

Much more than authentication

Authentication is only the beginning. Clerk gives you everything you need to manage your growing user base - from authorization and organization management to a powerful admin dashboard.

Build team-based features quick with Organizations

Enable your users to create and manage teams, invite team members manually, or set up auto-invites for teammates who share a company email domain.

Learn more

Manage and support users from the Clerk dashboard

Monitor, manage, and support users directly from the Clerk dashboard. It's the most powerful user management back office you never built.

Start building

Add React authentication with a few lines of code

Try Clerk for yourself. Free for your first 10,000 monthly active users and 100 monthly active organizations. No credit card required.

Start building

Frequently asked questions

Yes, you can customize Clerk React components to suit your application’s design and functionality. Clerk offers pre-built components like <SignUp /> and <SignIn /> that are easily customizable. You can modify their appearance with custom CSS, override default styles, and pass props to adjust behaviour, ensuring they perfectly match your brand.

Clerk provides localization through the @clerk/localizations package, offering pre-defined translations in over 30 languages, including Arabic, German, Spanish, French, and Japanese. You can also create custom translations to modify text in Clerk components. Note that this feature is currently experimental.

Yes, you can use Clerk with other React libraries like React Router. The @clerk/react-router SDK allows you to easily integrate authentication and authorization into your React Router applications. Our SDK supports both single-page application (SPA) mode and framework mode, providing flexibility for different application architectures.