Clerk
Authentication
The most comprehensive User Management Platform
Clerk is a User Management platform for Next.js and React apps. With polished, production-ready Sign-in and Sign-up forms, developers can add secure authentication in minutes.
The Clerk + Vercel integration enables:
- Instant provisioning of Clerk apps from your Vercel dashboard
- Scalable support for B2B SaaS use cases via Clerk Organizations - including multi-tenancy, RBAC
- Built-in and scalable billing and subscription management with Clerk Billing
If you're building an MVP or scaling a SaaS business, Clerk helps you ship faster and scale with confidence.
Pricing
For more information on pricing, click here.
Next.js
Run the following command to create a new Next.js application:
npm create next-app@latestUse this pre-built prompt to get started faster. If you use the prompt, skip to: 6. Connect to a project.
Click Show secret and then select Development above. When prompted, add the following environment variables to your .env.local file:
CLERK_SECRET_KEY={{CLERK_SECRET_KEY}}NEXT_PUBLIC_CLERK_PUBLISHBLE_KEY={{NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY}}Install Clerk in your Next.js project:
npm install @clerk/nextjsclerkMiddleware() grants you access to user authentication state throughout your app.
Create a proxy.ts file and populate with the following.
- If you're using the
/srcdirectory, createproxy.tsin the/srcdirectory. - If you're not using the
/srcdirectory, createproxy.tsin the root directory.
import { clerkMiddleware } from '@clerk/nextjs/server'
export default clerkMiddleware()
export const config = { matcher: [ // Skip Next.js internals and all static files, unless found in search params '/((?!_next|[^?]*\\.(?:html?|css|js(?!on)|jpe?g|webp|png|gif|svg|ttf|woff2?|ico|csv|docx?|xlsx?|zip|webmanifest)).*)', // Always run for API routes '/(api|trpc)(.*)', ],}Next, add the <ClerkProvider> component to your app's layout. This component provides Clerk's authentication context to your app. Copy and paste the following file into your layout.tsx file. This creates a header with Clerk's prebuilt components to allow users to sign in and out.
import type { Metadata } from 'next'import { ClerkProvider, SignInButton, SignUpButton, Show, UserButton,} from '@clerk/nextjs'import { Geist, Geist_Mono } from 'next/font/google'import './globals.css'
const geistSans = Geist({ variable: '--font-geist-sans', subsets: ['latin'],})
const geistMono = Geist_Mono({ variable: '--font-geist-mono', subsets: ['latin'],})
export const metadata: Metadata = { title: 'Clerk Next.js Quickstart', description: 'Generated by create next app',}
export default function RootLayout({ children,}: Readonly<{ children: React.ReactNode}>) { return ( <ClerkProvider> <html lang="en"> <body className={`${geistSans.variable} ${geistMono.variable} antialiased`}> <header className="flex justify-end items-center p-4 gap-4 h-16"> <Show when="signed-out"> <SignInButton /> <SignUpButton /> </Show> <Show when="signed-in"> <UserButton /> </Show> </header> {children} </body> </html> </ClerkProvider> )}Start by connecting to your existing project and then run vercel link in the CLI to link to the project locally.
Run vercel env pull to make the latest environment variables available to your project locally.
Run your project with the following command:
npm run devVisit your app's homepage at http://localhost:3000 and click "Sign up" in the header. Authenticate to create your first user!
Deploy to production
Start by connecting to your existing project and then run vercel link in the CLI to link to the project locally.
Once you've connected Clerk to a project, you'll need to set a production domain. Navigate to your integration settings, click Change Configuration, and update the Production domain in the integration configuration. You'll need access to the domain's DNS records for the next step.
If your domain is managed by Vercel, this is done for you. You can proceed to step 4.
Clerk needs a few DNS records to be configured. Navigate to the Clerk Dashboard, ensure you're configuring your production instance, and go through the DNS setup process.
Note: It can take up to 24hrs for DNS Records to fully propagate, so be patient.
In development, Clerk provides shared OAuth credentials. When going to production, you'll need to provide your own. For any OAuth providers you've enabled, generate the necessary credentials and set them in the Clerk Dashboard for your production instance. Review the documentation for details on how to generate credentials for your specific providers.
Re-deploy your applicatio to production and verify that your authentication flows are working correctly. For more information on deploying to production with Clerk, review the detailed deployment guide.
Which integration should I use?
-
Create New Clerk Account: Installs the Clerk native integration and creates a Clerk account for you if you do not have one already. Billing is managed through Vercel. (Appropriate for brand new applications)
-
Link Existing Clerk Account: This is a connectable account and is available only as a convenience for setting Clerk environment variables in your Vercel projects.
