Clerk & Supabase Auth

When you'd use a managed auth service

Clerk and Supabase Auth absorb the auth UI, password resets, magic links, MFA, and session management. You write less code; you sign up for a vendor.

Comparison

Feature	Auth.js v5	Clerk	Supabase Auth
Cost	Free (self-hosted)	Free tier; paid plans	Free tier; paid plans
Setup time	Medium	Easy	Medium
Pre-built UI	None (BYO)	Yes	Auth UI package
Database	Any (adapter)	Managed	Postgres included
Social providers	80+	20+	20+

Picking

Clerk if you want zero auth UI work and accept the cost. Supabase if you also want the database and Row-Level Security from the same vendor. Auth.js if you want full control with no vendor.

Choose managed authentication when its maintained UI, recovery, MFA, and session operations are worth the vendor dependency. Compare export paths, pricing at the expected active-user count, organization support, regional requirements, and how authorization data reaches your application. Spend more time comparing account recovery and deletion than the happy-path login. Vendor cost includes how operators help locked-out users, what remains after deletion, and how non-portable credentials are handled during migration. Less authentication code does not mean less security design. Clerk or Supabase can establish identity, but your application still owns resource authorization, tenant boundaries, audit events, failure behavior, and the consequences of vendor downtime. Prototype sign-up, sign-in, sign-out, password or magic-link recovery, account deletion, and one protected mutation. Inspect cookies and server claims, revoke a session, simulate a provider outage, and document how user data would be exported.

Code

Clerk — matcher protects routes·ts

// proxy.ts
import { clerkMiddleware, createRouteMatcher } from '@clerk/nextjs/server';

const isProtected = createRouteMatcher(['/dashboard(.*)', '/api(.*)']);

export default clerkMiddleware((auth, req) => {
  if (isProtected(req)) auth().protect();
});

Supabase Auth — Server Component reads session·ts

// lib/supabase/server.ts
import { createServerClient } from '@supabase/ssr';
import { cookies } from 'next/headers';

export async function createClient() {
  const store = await cookies();
  return createServerClient(
    process.env.NEXT_PUBLIC_SUPABASE_URL!,
    process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!,
    {
      cookies: {
        getAll: () => store.getAll(),
        setAll: (cs) => cs.forEach(({ name, value, options }) => store.set(name, value, options)),
      },
    }
  );
}

When you'd use a managed auth service

Comparison

Picking

Code

External links

Exercise

Progress

Comments 0