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.

Can I export my data?

Absolutely! We believe your data should always be in your control.

Does Clerk work with mobile?

Clerk is fully responsive on mobile devices. We also offer SDKs for Expo (React Native) and iOS to enhance your mobile experience.

Is Clerk security and privacy compliant?

Yes, Clerk prioritizes security and privacy. We are compliant with SOC 2 Type II, HIPAA, and CCPA, ensuring that your data is protected and meets industry standards and regulations.

Does Clerk supports Next.js Pages Router authentication?

Yes, Clerk fully supports authentication with Next.js using the Pages Router. You can easily integrate Clerk into your Next.js application to manage user authentication seamlessly.

What version of Next.js does Clerk support?

Clerk supports Next.js version 12 and above, ensuring compatibility with the latest features and improvements in the framework.

How does Next.js auth work?

Next.js authentication generally involves managing user sessions and access control. It can be implemented using JWTs, cookies, or session-based methods. You typically create API routes for login/logout, store tokens in cookies or local storage, and protect pages using middleware to ensure only authenticated users can access them.

What is the best authentication framework for Next.js?

For Next.js, the best authentication approach depends on your app's needs. Consider using a framework that supports various providers and session management. Custom solutions with JWTs or OAuth can offer more control. Always prioritize security and user experience.

What is the difference between authentication and authorization in Next.js?

Authentication in Next.js verifies user identity (e.g., logging in), while authorization determines what resources or actions a user can access based on their permissions or roles.

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

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

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