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.
Backed by Stripe, a16z, and more. Trusted by security-conscious Next.js developers at companies you recognize like Turso, Inngest, BaseHub, and others.
It all starts with <SignIn />
Configure your <SignIn /> component with authentication options your users find convenient then embed it directly in your application.
Your selected options are displayed in the example <SignIn /> component
Your selected options are displayed in the example <SignIn /> component
Sign in options
Welcome back! Please sign in to continue
This is a preview
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.
Clerk enables your users to sign up for your application using their preferred method, including passwords, social sign-on, Passkeys, and even Web3 authentication!
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()
})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' })
}
})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 MyAppimport { 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 MyAppThe 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>
)
}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>
}
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.
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!
Clone this auth starter template powered by Clerk and focus only on building unique features
Find answers quickly with comprehensive documentation
Hands-on tutorials to help you get started and inspire your project
Insightful posts from practioning thought-leaders about Next.js authenticaiton and how to get the most from Clerk
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.
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.
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.
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 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.
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.
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.
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.
Export your data in a portable format from the dashboard anytime. No need to talk to the team, unless you want to.
Skip synchronizing headaches and use our highly reliable API to query data just-in-time instead.
Subscribe to events like `user_created` and `user_updated` to synchronize Clerk data with your system.
Clerk provides seamless integrations for platforms you might already use like Firebase, Supabase, Convex, and more.
Need finer UI control? Use Elements or our custom hooks to wire up your custom UI components to Clerk directly and securely.
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.
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.
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.
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
Rapid-fire answers to common questions. Have a question of your own? Our Support Engineers are ready to help. Get in touch.
Absolutely! We believe your data should always be in your control.
Clerk is fully responsive on mobile devices. We also offer SDKs for Expo (React Native) and iOS to enhance your mobile experience.
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.
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.
Clerk supports Next.js version 12 and above, ensuring compatibility with the latest features and improvements in the framework.
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.
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.
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.
Integrate complete user management in minutes. Free for your first 10,000 monthly active users and 100 monthly active orgs. No credit card required.
