Skip to main content

React Authentication

Authentication optimized for React

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

Start buildingExplore the docs

Trusted by fast-growing companies around the world

  • Browserbase
  • Inngest
  • Suno
  • Finary
  • BaseHub
  • Turso
  • Bally's Corporation

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.

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.

Next.js
React Router
TanStack React Start
Astro
Expo
Vanilla React

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

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

More
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