Clerk Has a Free API: Add Authentication to Your App in 10 Minutes

#webdev #react #nextjs #auth

What is Clerk?

Clerk is a complete authentication and user management platform. Drop-in sign-up, sign-in, user profiles, organizations, and multi-factor auth — all with pre-built UI components that look professional out of the box.

Why Clerk?

Free tier — 10,000 monthly active users
Pre-built UI — sign-in/sign-up components that work immediately
10 minutes setup — not 10 hours like Auth0/Cognito
Multi-tenant — organizations with roles and permissions built in
Session management — JWT tokens, middleware, server-side auth
Social login — Google, GitHub, Apple, 20+ providers

Quick Start (Next.js)

npm install @clerk/nextjs

// middleware.ts — protect your entire app
import { clerkMiddleware } from '@clerk/nextjs/server';
export default clerkMiddleware();
export const config = { matcher: ['/((?!.*\\..*|_next).*)', '/', '/(api|trpc)(.*)'] };

// app/layout.tsx — wrap your app
import { ClerkProvider, SignInButton, SignedIn, SignedOut, UserButton } from '@clerk/nextjs';

export default function RootLayout({ children }) {
  return (
    <ClerkProvider>
      <html>
        <body>
          <header>
            <SignedOut>
              <SignInButton />
            </SignedOut>
            <SignedIn>
              <UserButton />
            </SignedIn>
          </header>
          {children}
        </body>
      </html>
    </ClerkProvider>
  );
}

That is it. You have authentication.

Get User Data (Server-Side)

// app/api/profile/route.ts
import { auth, currentUser } from '@clerk/nextjs/server';

export async function GET() {
  const { userId } = await auth();
  if (!userId) return new Response('Unauthorized', { status: 401 });

  const user = await currentUser();
  return Response.json({
    id: user.id,
    email: user.emailAddresses[0].emailAddress,
    name: `${user.firstName} ${user.lastName}`
  });
}

Organizations (Multi-Tenant)

import { OrganizationSwitcher, OrganizationProfile } from '@clerk/nextjs';

// Users can create and switch between organizations
<OrganizationSwitcher />

// Full org management UI
<OrganizationProfile />

// Check org membership in API
import { auth } from '@clerk/nextjs/server';

export async function GET() {
  const { userId, orgId, orgRole } = await auth();

  if (orgRole !== 'org:admin') {
    return new Response('Admin only', { status: 403 });
  }
  // User is an admin of the current organization
}

Webhooks (Sync Users to DB)

// app/api/webhooks/clerk/route.ts
import { Webhook } from 'svix';

export async function POST(req: Request) {
  const body = await req.text();
  const wh = new Webhook(process.env.CLERK_WEBHOOK_SECRET!);
  const event = wh.verify(body, headers);

  switch (event.type) {
    case 'user.created':
      await db.insert(users).values({
        clerkId: event.data.id,
        email: event.data.email_addresses[0].email_address
      });
      break;
    case 'user.deleted':
      await db.delete(users).where(eq(users.clerkId, event.data.id));
      break;
  }

  return new Response('OK');
}

Clerk vs Alternatives

Feature	Clerk	Auth0	Supabase Auth	NextAuth
Free MAU	10,000	7,500	50,000	Unlimited
Pre-built UI	Beautiful	Basic	None	None
Setup time	10 min	1 hour	30 min	2 hours
Organizations	Built-in	Enterprise	Manual	Manual
User management	Dashboard	Dashboard	SQL	Manual
Social providers	20+	30+	10+	Many

Real-World Impact

A SaaS startup spent 3 weeks building authentication with NextAuth: sign-up, sign-in, password reset, email verification, OAuth, session management. Then they needed organizations — another 2 weeks. With Clerk: complete auth + organizations in 2 hours. Those 5 weeks went to building actual product features.

Building SaaS applications? I help teams ship faster with the right auth solution. Contact spinov001@gmail.com or explore my data tools on Apify.

DEV Community