Stop 12 · AuthenticationTopics · 7/10

Clerk

In short

Clerk gives you ready-made sign-in pages, a user profile menu and session handling as React components. You get a polished login in minutes, and you pay with less control and a vendor bill later.

A drop-in, hosted authentication and user-management platform offering prebuilt sign-in/sign-up UI components alongside its API.

The jaadu sits ready to eat a complete steel thali, with raw vegetables and an unused pan to the side.

Think of it like this

Ordering a thali instead of cooking

A thali arrives complete: dal, sabzi, roti, sweet. You can't change the recipe much, but dinner is ready in ten minutes. Clerk is the thali of auth. Auth.js is buying vegetables and cooking yourself.

Watch it happen

Clerk guarding /dashboard

Browser

Middleware

Dashboard

Clerk

GET /dashboard

1/6Every request first runs through clerkMiddleware in proxy.ts.

The big ideas

What you need to know

Drop-in components

SignInButton, UserButton and full SignIn pages come styled and working, including social logins and 2FA.

clerkMiddleware guards routes

One middleware call checks the session on every request. Use createRouteMatcher to choose which routes need login.

Server helpers

auth() from @clerk/nextjs/server gives you the userId in Server Components and API routes.

Hosted means trade-offs

User data lives on Clerk's servers. Check their pricing and limits before choosing it for a big project.

See it in code

Walk through the code

1// proxy.ts (middleware.ts before Next.js 16)2import { clerkMiddleware, createRouteMatcher } from "@clerk/nextjs/server";3 4const isProtected = createRouteMatcher(["/dashboard(.*)"]);5 6export default clerkMiddleware(async (auth, req) => {7  if (isProtected(req)) await auth.protect();8});9 10export const config = {11  matcher: ["/((?!_next|.*\\..*).*)", "/(api|trpc)(.*)"],12};13 14// app/layout.tsx: wrap everything in <ClerkProvider>15// anywhere: <UserButton /> shows the avatar menu

1/3createRouteMatcher lists which paths need login. Here, anything under /dashboard.

auth.protect() sends logged-out visitors to sign in. The matcher skips static files so Clerk doesn't run on every image request.

Save yourself the pain

Common mistakes

Oops

Pasting the Clerk secret key into a client component.

Do this instead

Only the publishable key (NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY) goes to the browser. CLERK_SECRET_KEY stays on the server.

Oops

Picking Clerk for a learning project and never understanding sessions.

Do this instead

Use Clerk when shipping fast matters. Build one app with JWTs or Auth.js too, so you know what Clerk does for you.

Your mission

Login in ten minutes flat

~20 min

Quick check

Which Clerk key is safe to expose in your frontend bundle?

Go deeper

1Add Clerk to a Next.js project using its prebuilt sign-in component.
2Compare the setup effort against rolling your own NextAuth configuration.
3Explore Clerk's built-in user management dashboard.