Supabase로 인증 시스템 구축하기

Supabase는 Firebase의 오픈소스 대안으로, 데이터베이스, 인증, 스토리지 등 다양한 백엔드 서비스를 제공합니다. 이 글에서는 Supabase를 활용해 빠르고 안전한 인증 시스템을 구축하는 방법을 단계별로 알아봅니다.

Supabase 프로젝트 설정

1. 프로젝트 생성하기

1. Supabase 웹사이트에 로그인합니다.
2. 'New Project'를 클릭하고 프로젝트 이름, 데이터베이스 비밀번호, 지역을 설정합니다.
3. 생성이 완료될 때까지 기다립니다(약 1-2분 소요).

2. 클라이언트 설정하기

프로젝트에 Supabase 클라이언트를 설정합니다:

npm install @supabase/supabase-js

// lib/supabase.ts
import { createClient } from '@supabase/supabase-js';

const supabaseUrl = process.env.NEXT_PUBLIC_SUPABASE_URL!;
const supabaseAnonKey = process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!;

export const supabase = createClient(supabaseUrl, supabaseAnonKey);

이메일/비밀번호 인증 구현하기

1. 회원가입 구현

// auth.ts
import { supabase } from '@/lib/supabase';

export async function signUp(email: string, password: string) {
  const { data, error } = await supabase.auth.signUp({
    email,
    password,
  });
  
  if (error) throw error;
  return data;
}

2. 로그인 구현

export async function signIn(email: string, password: string) {
  const { data, error } = await supabase.auth.signInWithPassword({
    email,
    password,
  });
  
  if (error) throw error;
  return data;
}

3. 로그아웃 구현

export async function signOut() {
  const { error } = await supabase.auth.signOut();
  if (error) throw error;
}

소셜 로그인 통합하기

Supabase는 다양한 소셜 인증 제공업체를 지원합니다:

export async function signInWithGoogle() {
  const { data, error } = await supabase.auth.signInWithOAuth({
    provider: 'google',
  });
  
  if (error) throw error;
  return data;
}

사용자 상태 관리하기

// hooks/useAuth.ts
import { useEffect, useState } from 'react';
import { supabase } from '@/lib/supabase';
import type { User } from '@supabase/supabase-js';

export function useAuth() {
  const [user, setUser] = useState<User | null>(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    // 현재 세션 가져오기
    supabase.auth.getSession().then(({ data: { session } }) => {
      setUser(session?.user ?? null);
      setLoading(false);
    });

    // 인증 상태 변경 리스너
    const { data: { subscription } } = supabase.auth.onAuthStateChange(
      (_event, session) => {
        setUser(session?.user ?? null);
        setLoading(false);
      }
    );

    return () => {
      subscription.unsubscribe();
    };
  }, []);

  return { user, loading };
}