React Authentication

Authentication optimized for React

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

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()

Render UI by authentication state

Use the <Show />component to render UI based on a user’s authentication state. Protect sensitive data with authorization checks in your backend.

import { RedirectToSignIn, Show } from '@clerk/react'

const AuthState = () => {