Modern Next.js authentication is an npm install away

Clerk’s components and auth helpers are purpose-built for the Next.js App Router, making it intuitive to protect your pages and endpoints behind a secure interface.

Start building Explore the docs

Backed by Stripe, a16z, and more. Trusted by security-conscious Next.js developers at companies you recognize like Turso, Inngest, BaseHub, and others.

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.

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

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

Authentication and Authorization

Intuitive Middleware, Control Components, and Hooks to protect your routes

Next.js authentication middleware and control components to fine-tune which resources and operations your users can access based on their identity, permissions, or role.

import {
  clerkMiddleware,
  createRouteMatcher
} from '@clerk/nextjs/server'

const isProtectedRoute = createRouteMatcher([
  '/dashboard(.*)',
  '/forum(.*)'
])

export default clerkMiddleware(async (auth, req) => {
  if (isProtectedRoute(req)) await auth.protect()
})

Middleware

import {
  clerkMiddleware,
  createRouteMatcher
} from '@clerk/nextjs/server'

const isProtectedRoute = createRouteMatcher([
  '/dashboard(.*)',
  '/forum(.*)'
])

export default clerkMiddleware(async (auth, req) => {
  if (isProtectedRoute(req)) await auth.protect()
})

import {
  clerkMiddleware,
  createRouteMatcher
} from '@clerk/nextjs/server'
import { NextResponse } from 'next/server'

const isAdminRoute = createRouteMatcher(['/admin(.*)'])

export default clerkMiddleware(async (auth, req) => {
  if (isProtectedRoute(req)) {
    await auth.protect({ role: 'org:admin' })
  }
})

Control components

import { ClerkProvider, SignedIn } from '@clerk/nextjs'
import { AppProps } from 'next/app'

function MyApp({ Component, pageProps }: AppProps) {
  return (
    <ClerkProvider {...pageProps}>
      <SignedIn>
        <p>You are signed in</p>
      </SignedIn>
      <p>Always visible</p>
    </ClerkProvider>
  )
}

export default MyApp

import { ClerkProvider, SignedOut } from '@clerk/nextjs'
import { AppProps } from 'next/app'

function MyApp({ Component, pageProps }: AppProps) {
  return (
    <ClerkProvider {...pageProps}>
      <SignedOut>
        <p>You are signed out</p>
      </SignedOut>
      <p>Always visible</p>
    </ClerkProvider>
  )
}

export default MyApp

The children of the following component will only be visible to users with roles that have the org:invoices:create permission.

import { Protect } from '@clerk/nextjs'

export default function ProtectPage() {
  return (
    <Protect
      permission="org:invoices:create"
      fallback={<p>You do not have the permissions.</p>}
    >
      {children}
    </Protect>
  )
}

Hooks

The useAuth() hook provides information about the current auth state, as well as helper methods to manage the current active session.

import { useAuth } from '@clerk/nextjs'

export default function Page() {
  const { getToken, isLoaded, isSignedIn } = useAuth()

  if (!isLoaded) {
    return <p>Loading...</p>
  }

  if (!isSignedIn) {
    return <p>Sign in to view this page</p>
  }

  const fetchDataFromExternalResource = async () => {
    const token = await getToken()
    // Add logic to fetch your data
    return data
  }

  return <div>...</div>
}

The useUser() hook is a convenient way to access the current user’s User object, which holds all of the information for a single user of your application and provides a set of methods to manage their account.

import { useUser } from '@clerk/nextjs'

export default function Page() {
  const { isSignedIn, user, isLoaded } = useUser()

  if (!isLoaded) {
    return <p>Loading...</p>
  }

  if (isSignedIn) {
    return <p>Hello {user.fullName}!</p>
  }

  return <p>Not signed in</p>
}

Patrick CollisonCEOStripe

Guillermo RauchCEOVercel

Theo BrowneCEOPing Labs

Kevin Van GundyCEOHypermode

Julian BenegasCEOBaseHub

Dan FarrellyCTOInngest

Paul CopplestoneCEOSupabase

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

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.

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.

Clerk let us spin up a new product in hours instead of weeks. As a company that deeply values developer velocity— Clerk is exactly what we needed.

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.

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.

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

Start with ease

Add authentication in minutes, not days

Clerk considers education a first-class feature. Choose a learning resource that resonates with you below. Now go build something awesome with Clerk!

Quickstart

Add fully-featured authentication and user management to your app in around 7 minutes

Starter template

Clone this auth starter template powered by Clerk and focus only on building unique features

Documentation

Find answers quickly with comprehensive documentation

Tutorials

Hands-on tutorials to help you get started and inspire your project

From the blog

Insightful posts from practioning thought-leaders about Next.js authenticaiton and how to get the most from Clerk

Advanced security and privacy

Take the security burden off your shoulders

Building with Clerk means implementing a solution that considers security, privacy, and compliance as essential responsibilities in everything we create.

Pen tests and code review
Clerk commissions third-party testing and assessment based on the OWASP Testing Guide, the OWASP Application Security Verification Standard, and the NIST Technical Guide to Information Security Testing and Assessment.
XSS leak protection
Cross-Site Scripting (XSS) vulnerabilities are incredibly serious. Clerk works to minimize attack surface area by using HttpOnly cookies for authenticated requests to our Frontend API, so that credentials cannot be leaked during XSS attacks.
CSRF protection
Most Cross Site Request Forgery (CSRF) attacks can be protected against by properly configuring the way session tokens are stored. Clerk handles the necessary configuration on your behalf by configuring cookies with the SameSite flag.
Session fixation protection
Session fixation is a technique for hijacking a user session. Clerk protects against this by resetting the session token each time a user signs in or out of a browser. When the session is reset, the old session token is invalidated and can no longer be used for authentication.
Password protection and rules
Clerk uses NIST guidelines to determine the character rules for passwords and contracts with HaveIBeenPwned to review prospective passwords. Additionally, Clerk leverages bcrypt, an industry standard hashing algorithm for storage.
Session leak protection
Instead of sharing cookies across subdomains, Clerk sets multiple independent cookies (one for the main domain and one for the subdomain), so that an attack on Clerk cannot be chained into an attack on your application.

Avoid vendor lock-in

Your users. Your rules.

As a user management platform, it’s important that Clerk enables you to maintain complete ownership of your user data, ensuring flexibility and avoiding vendor lock-in.

Data export
Export your data in a portable format from the dashboard anytime. No need to talk to the team, unless you want to.
Query data on-demand
Skip synchronizing headaches and use our highly reliable API to query data just-in-time instead.
Webhooks
Subscribe to events like `user_created` and `user_updated` to synchronize Clerk data with your system.
Integrations
Clerk provides seamless integrations for platforms you might already use like Firebase, Supabase, Convex, and more.
Bring your own UI
Need finer UI control? Use Elements or our custom hooks to wire up your custom UI components to Clerk directly and securely.
Scalable architecture
Clerk is built to scale with your application. Whether you’re a startup or an enterprise, Clerk can handle your user management needs as you grow, ensuring performance and reliability at any scale.

More than auth

Comprehensive user management

While authentication is a critical aspect of user management, Clerk goes beyond simply verifying user identities. We offer a comprehensive suite of features designed to enhance the entire user experience.

B2B SaaS Suite

Build multi-tenant SaaS the easy way

Clerk provides everything you need to onboard and manage organizations and users seamlessly in your multi-tenant SaaS application.

Back office

Administration dashboard

Never build a back office again. Clerk’s admin dashboard enables you to list, create, update, and even impersonate your users for support purposes.

Trusted by fast-growing companies around the world

Frequently asked questions

Rapid-fire answers to common questions. Have a question of your own? Our Support Engineers are ready to help. Get in touch.

How does Clerk work with Next.js?

Clerk provides prebuilt UI components and robust backend APIs that make it easy to build secure authentication flows (sign-up, sign-in), user sessions, RBAC, SaaS billing, and even multi-tenancy into your Next.js app. Our middleware lets you protect routes based on auth status, roles, and permissions, ensuring users can only access what they're authorized for. Behind the scenes, we manage token handling between your client-side components and Route Handlers, without you having to write any glue code.,

How easy is it to install and configure Clerk's Next.js SDK?

Very easy. Run npm install @clerk/nextjs, add your API keys to your environment variables, wrap your app with ClerkProvider, and you're ready to go. The whole setup takes just a few minutes. The best part? We also support keyless mode that lets you start building with Clerk without creating an account and no API keys required, until you're ready to claim your app and push to production.

How many prebuilt UI components does Clerk provide?

Clerk offers a comprehensive set of prebuilt UI components that you can customize to fit your authentication flow with minimal code. From our <SignIn /> and <SignUp /> components that you can drop into your code to support multiple auth methods, to our <CreateOrganization />, <OrganizationProfile />, and <OrganizationSwitcher /> components for building robust multi-tenant apps—Clerk helps you move fast without reinventing the wheel. See the full list of available UI and control components here.

How many single sign-on (SSO) options can my app support with Clerk?

Clerk supports all major SSO protocols and social connections, including SAML, OAuth, and OpenID Connect, so you can integrate with providers like Google Workspace, Microsoft Entra ID (Azure AD), and Okta. For social logins, we support Google, GitHub, Discord, LinkedIn, Notion, Slack, TikTok, and many more that you can find here. There's no hard limit on the number of SSO connections, so you can configure as many as your plan allows.

How does ClerkProvider and middleware work within Next.js apps?

ClerkProvider wraps your app to provide user/auth context to our hooks and components, while our middleware works with server components and Route Handlers to protect your routes and perform authN checks. Together, they ensure your app always knows the user's authentication status across both client and server.

Does Clerk support authentication with Next.js Pages Router?

Yes, Clerk fully supports Next.js' Pages Router. You can integrate Clerk's middleware and components to handle user authentication on both pages and API routes without extra setup.,

Why do default JWTs expire every 60 seconds?

Clerk uses short-lived JWTs (60 seconds by default) to minimize risk if a token is compromised. Since JWTs can't be revoked once issued, limiting their lifespan improves security. Clerk's SDKs refresh these tokens automatically, so session continuity is seamless for your users.

Why do I get null when trying to verify a user or retrieve their data on a backend server?

Clerk relies on cookies to authenticate users. If your requests (like fetch) don't include cookies, Clerk's auth data will be null. To fix this, make sure cookies are sent with the request. See our backend requests docs for more information.

How easy is it to migrate to or away from Clerk?

Clerk makes it easy to migrate in or out. You can export all your user data directly from the dashboard, and also use our Backend APIs to access organization and membership data. No vendor lock-in. If you want to leave Clerk, you'll have full access to your data to import elsewhere.,

Why should I trust Clerk with my user data?

Clerk is built to handle authentication and user data with enterprise-grade security. We host our infrastructure on Google Cloud (GCP), protect against attacks with Cloudflare, and follow strict internal access controls and data management practices. Clerk is SOC 2 Type II compliant (report available to paying customers), and we maintain a clear Data Processing Agreement and list of subprocessors to give you full transparency. By using Clerk, you offload auth/user management to a provider that's purpose-built to do it right, while you focus on building your app.

Is Clerk secure and privacy compliant?

Yes! Security and privacy is built into everything we do at Clerk. We encrypt data in transit and at rest, enforce strict access control policies, and comply with regulations like GDPR, CCPA, and the EU-U.S. Data Privacy Framework. We're also transparent about how data is handled—see our Data Privacy Framework and Data Processing Agreement for full details.

What version of Next.js does Clerk support?

Clerk actively supports the latest stable versions of Next.js. Whether you're using the App Router or the traditional Pages Router, our Next.js SDK integrates seamlessly.,

Start now, no strings attached

Integrate complete user management in minutes. Free for your first 10,000 monthly active users and 100 monthly active orgs. No credit card required.

Start building

Modern Next.js authentication is an npm install away

Components as the API

Build your example <SignIn />

UI Building Blocks

<SignUp />

<UserButton />

<UserProfile />

<OrganizationProfile />

<CreateOrganization />

<OrganizationSwitcher />

<OrganizationList />

Authentication and Authorization

Middleware

Control components

Hooks

Start with ease

Quickstart

Starter template

Documentation

Tutorials

From the blog

Advanced security and privacy

Pen tests and code review

XSS leak protection

CSRF protection

Session fixation protection

Password protection and rules

Session leak protection

Avoid vendor lock-in

Data export

Query data on-demand

Webhooks

Integrations

Bring your own UI

Scalable architecture

More than auth

B2B SaaS Suite

Back office

Frequently asked questions

Components as the API

Build your example <SignIn />

UI Building Blocks

Authentication and Authorization

Middleware

Authentication

Role-based access control

Control components

<SignedIn />

<SignedOut />

<Protect />

Hooks

useAuth

useUser

Start with ease

Documentation

Tutorials

From the blog

Advanced security and privacy

Pen tests and code review

XSS leak protection

CSRF protection

Session fixation protection

Password protection and rules

Session leak protection

Avoid vendor lock-in

Data export

Query data on-demand

Webhooks

Integrations

Bring your own UI

Scalable architecture

More than auth

B2B SaaS Suite

Back office

Frequently asked questions