Clerk & Supabase Auth

~18 min · Clerk, Supabase Auth, managed auth

Level 0Curious

0 XP0/68 lessons0/11 achievements

0/120 XP to next level120 XP to go0% complete

Managed auth service 쓸 때

Clerk 와 Supabase Auth 가 auth UI, password reset, magic link, MFA, session management absorb. 코드 덜 짜고; vendor 한테 sign up.

비교

Feature	Auth.js v5	Clerk	Supabase Auth
비용	Free (self-hosted)	Free tier; paid plan	Free tier; paid plan
Setup time	Medium	Easy	Medium
Pre-built UI	없음 (BYO)	있음	Auth UI package
Database	Any (adapter)	Managed	Postgres included
Social provider	80+	20+	20+

고르기

Clerk 면 zero auth UI work 원하고 비용 받아들임. Supabase 면 같은 vendor 한테서 database 와 Row-Level Security 도 원함. Auth.js 면 vendor 없이 full control 원함.

Code

Clerk — matcher 가 route protect·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 가 session read·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)),
      },
    }
  );
}

External links

Exercise

Project 위해 한 page 결정 작성: Auth.js, Clerk, Supabase Auth 중 뭐? 비용, 필요 social provider, UI control, vendor risk. 하나 고르고 정당화.

Progress

Progress is local-only — sign in to sync across devices.

← PreviousAuth.js v5 (NextAuth)Next →Protected Route

이 페이지에서 버그를 발견하셨거나 피드백이 있으세요?문제 신고

🔔 답글 알림 (로그인 필요)

로그인 — 댓글을 남기려면 로그인해 주세요.

아직 댓글이 없어요. 첫 댓글을 남겨보세요.