본문 바로가기
C.W.K.
Stream
Lesson 05 of 09 · published

Clerk·Supabase Auth·Auth.js 고르기

~18 min · Clerk, Supabase Auth, managed auth

Level 0호기심
0 XP0/68 lessons0/11 achievements
0/120 XP to next level120 XP to go0% complete

관리형 서비스는 인증 운영을 사는 선택이야

Clerk와 Supabase Auth는 로그인 UI, 비밀번호 재설정, magic link, MFA, 세션 관리를 상당 부분 맡아 줘. 직접 구현할 코드는 줄지만 사용자 인증이라는 핵심 경계를 특정 공급자와 비용 구조에 맡기게 돼.

항목Auth.js v5ClerkSupabase Auth
비용자체 호스팅, 무료무료 구간과 유료 요금제무료 구간과 유료 요금제
설정 난이도중간쉬움중간
미리 만든 UI직접 준비제공Auth UI 패키지
데이터베이스adapter로 선택관리형Postgres 포함
소셜 provider80개 이상20개 이상20개 이상

가장 먼저 줄이고 싶은 운영 부담으로 골라

인증 UI를 거의 만들고 싶지 않고 비용을 받아들일 수 있다면 Clerk가 맞아. DB와 Row-Level Security까지 한 공급자에서 원하면 Supabase가 자연스러워. 공급자 종속을 줄이고 모든 흐름을 직접 통제하려면 Auth.js를 택해. 기능표의 개수보다 팀이 앞으로 맡을 운영 책임이 더 중요한 기준이야.

후보마다 가입·로그인·복구·MFA·관리자 지원·사용자 삭제를 작은 시험 구현으로 끝까지 해 봐. UI 구현 시간뿐 아니라 사용자 export, webhook 신뢰성, 장애 시 접근, 가격이 성장할 때 바뀌는 구간을 기록해. 데이터베이스와 인증의 백업·이주 경로도 선택 전에 확인해. 후보를 비교할 때는 정상 로그인보다 계정 복구와 탈퇴를 더 오래 살펴봐. 운영자가 잠긴 사용자를 도울 수 있는지, 삭제 요청 뒤 어떤 데이터가 남는지까지 알아야 공급자 비용을 제대로 계산할 수 있어. 이주 시험에서는 비밀번호처럼 옮길 수 없는 자격 정보의 처리 방법도 정해. 관리형 서비스는 보안을 외주 주는 게 아니라 일부 구현과 운영을 맡기는 거야. 앱은 여전히 세션을 올바르게 검증하고 권한과 개인정보 수명을 관리해야 해. 자체 호스팅도 무료가 아니라 업데이트와 사고 대응 시간을 팀이 직접 지불하는 선택이야. 각 후보의 작은 test tenant에서 가입, 소셜 로그인, 비밀번호·magic link 복구, MFA, 사용자 삭제, webhook 실패를 끝까지 실행해. 구현 시간과 dashboard 편의뿐 아니라 export 데이터, rate limit, 유료 전환 지점을 같은 표에 기록해.

Code

Clerk — matcher로 라우트 보호하기·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 — 서버 컴포넌트에서 세션 읽기·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

후보 둘로 가입·로그인·복구·MFA·사용자 삭제를 작은 시험 구현에서 끝까지 실행해. 구현 시간, 비용, export와 이주 경로를 같은 표에 기록해.

Progress

Progress is local-only — sign in to sync across devices.
이 페이지에서 버그를 발견하셨거나 피드백이 있으세요?문제 신고

댓글 0

🔔 답글 알림 (로그인 필요)
로그인댓글을 남기려면 로그인해 주세요.

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