🚀 Supabase 시작하기: 5분 만에 로그인 시스템 구축하는 법

D: Supabase는 Firebase의 강력한 대안으로, 오픈소스 기반의 백엔드 서비스를 제공합니다. 특히 인증(Authentication) 기능은 개발자들이 쉽게 로그인 시스템을 구축할 수 있도록 도와줍니다. 이번 글에서는 5분 안에 Supabase로 로그인 시스템을 만드는 방법을 단계별로 설명드리겠습니다! ✨

🔥 1. Supabase 프로젝트 생성하기

1. Supabase 공식 사이트에 접속합니다.
2. “Start your project” 버튼을 클릭하고, GitHub 또는 Google 계정으로 로그인합니다.
3. “New Project”를 선택하고, 프로젝트 이름과 데이터베이스 비밀번호를 설정합니다.
   • (예: 프로젝트 이름 my-auth-app, 지역 Seoul 선택)
4. 생성이 완료되면, API URL과 Anon(익명) Key를 확인합니다. (이 값들은 나중에 클라이언트에서 사용됩니다!)

🔑 2. 인증(Auth) 설정하기

Supabase는 다양한 로그인 방식을 지원합니다. 기본적으로 이메일/비밀번호 로그인을 활성화해 보겠습니다.

1. 좌측 메뉴에서 Authentication → Providers로 이동합니다.
2. “Email” 제공자를 켜고(토글 버튼 활성화), 필요하면 “Confirm email” 설정을 조정합니다.
   • (테스트 시에는 이메일 확인을 끄는 것이 편리합니다.)
3. 추가로 Google, GitHub 로그인도 쉽게 연동할 수 있습니다!

💻 3. 프론트엔드에 Supabase 연결하기 (React 예시)

이제 클라이언트에서 Supabase를 사용해 보겠습니다. React 프로젝트를 기준으로 설명합니다.

1) 패키지 설치

npm install @supabase/supabase-js

2) Supabase 클라이언트 초기화

src/supabaseClient.js 파일을 생성하고, 아까 확인한 API URL과 Anon Key를 입력합니다.

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

const supabaseUrl = 'YOUR_SUPABASE_URL';
const supabaseKey = 'YOUR_SUPABASE_ANON_KEY';
export const supabase = createClient(supabaseUrl, supabaseKey);

3) 로그인/회원가입 기능 구현

import { supabase } from './supabaseClient';

// 회원가입
async function signUp(email, password) {
  const { user, error } = await supabase.auth.signUp({
    email: email,
    password: password,
  });
  if (error) console.error('회원가입 오류:', error);
  else console.log('가입 성공:', user);
}

// 로그인
async function signIn(email, password) {
  const { user, error } = await supabase.auth.signIn({
    email: email,
    password: password,
  });
  if (error) console.error('로그인 오류:', error);
  else console.log('로그인 성공:', user);
}

🌟 4. 로그인 상태 확인 & 로그아웃

Supabase는 실시간으로 사용자 상태를 감지할 수 있습니다.

// 현재 사용자 가져오기
const user = supabase.auth.user();

// 로그아웃
async function signOut() {
  await supabase.auth.signOut();
}

// 로그인 상태 감지 (실시간)
supabase.auth.onAuthStateChange((event, session) => {
  console.log('현재 이벤트:', event); // 'SIGNED_IN', 'SIGNED_OUT' 등
  console.log('세션 정보:', session);
});

🎯 5. 추가 기능 & 팁

• 비밀번호 재설정: supabase.auth.api.resetPasswordForEmail(email)
• 소셜 로그인: Google/GitHub 연동은 Providers에서 설정 후 supabase.auth.signIn({ provider: 'google' })
• 사용자 정보 저장: supabase.from('profiles').insert(...)로 추가 데이터 저장 가능

✅ 마무리

Supabase를 이용하면 5분 안에 완벽한 로그인 시스템을 구축할 수 있습니다. 🎉

• 장점: 오픈소스, 무료 요금제, Firebase 대비 유연성
• 주의점: 초기 설정 시 Anon Key 보안에 유의하세요!

지금 바로 Supabase로 나만의 인증 시스템을 만들어 보세요! 💪

📌 참고 자료

• Supabase 공식 문서
• GitHub 예제 코드

혹시 궁금한 점이 있다면 댓글로 남겨주세요! ✍️