Clerk

What is Clerk?

Clerk is a complete authentication service that handles everything users need to sign in to your app — and everything you need to manage them. Sign-up forms, login pages, social logins (Google, GitHub, Apple, and more), email verification, password resets, two-factor authentication, and a user profile page are all included. You drop a few components into your code; Clerk handles every detail.

The big idea: authentication is one of the most annoying and security-sensitive things to build yourself. Clerk lets you skip it entirely and get back to building the parts of your app that actually matter.

Why use Clerk?

Rolling your own auth means writing logic for password hashing, session tokens, email verification codes, OAuth flows, and token refresh — and then keeping all of it secure as attack patterns evolve. That's weeks of work and a security liability if anything goes wrong.

Clerk compresses that to about 15 minutes. It integrates directly with Next.js App Router, so protecting a page is as simple as wrapping it in a component or adding a single line to your middleware. The pre-built UI components look clean and work on mobile — if you want a custom look, they're fully themeable.

For most app builders, Clerk is the right answer unless you have a specific reason to need full control over auth.

Free vs Paid

For most indie projects and early-stage apps, 10,000 MAU is more than enough. The free tier is genuinely generous — you'll likely be making money long before you hit that ceiling.

Step-by-step setup

1. Go to clerk.com and create a free account
2. Click Create application, give it a name, and choose which sign-in methods you want (email, Google, GitHub)
3. Copy your Publishable Key and Secret Key from the dashboard
4. In your Next.js project, install Clerk: npm install @clerk/nextjs
5. Add your keys to .env.local — never commit these to Git
6. Wrap your root layout with <ClerkProvider> to give the whole app access to auth state
7. Add Clerk's middleware file (middleware.ts at the root) to protect routes automatically
8. Add <SignInButton> and <SignUpButton> to your navbar — Clerk handles the modal or redirect
9. Use <SignedIn> and <SignedOut> components to show different UI to logged-in vs logged-out users
10. In server components and API routes, use auth() to get the current user's ID

That's it. Open your app, click sign in, and Clerk's pre-built page appears. New users who sign up appear instantly in your Clerk dashboard.

Common questions

Can I customise the sign-in page design? Yes — Clerk's components accept appearance props for colours, fonts, and layout. For full control, you can use Clerk's headless API to build completely custom UI while still using Clerk's authentication logic underneath.

What happens if I outgrow the free tier? You'll be prompted to upgrade when you approach 10,000 MAU. The jump to $25/month is sharp, but if you have 10,000 active users, you should be generating revenue that covers it easily.

Can I migrate my users off Clerk later? Yes, but it's work. Clerk can export user data, but passwords are hashed using their system — users will need to reset passwords on a new auth provider. Plan your auth choice carefully upfront if you anticipate unusual scale or compliance needs.

Does Clerk work with databases like Supabase or Firebase? Yes. Clerk handles authentication (who you are), while your database handles data (what you've saved). Use the userId from Clerk as the identifier in your database rows. Clerk has official guides for both Supabase and Firebase.

Is Clerk secure? Clerk is SOC 2 Type II certified and handles security updates, rate limiting, and credential stuffing protection automatically. Using Clerk is almost certainly more secure than building your own auth.