Ch.19 Supabase — 백엔드 없이 풀스택

인증과 스토리지

Supabase Auth로 회원가입/로그인 기능을 구현할 수 있다onAuthStateChange로 사용자 상태를 관리할 수 있다Supabase Storage로 파일을 업로드/다운로드할 수 있다

로그인 기능 직접 만들면 보안 구멍 투성이

비밀번호 해싱, 세션 관리, 토큰 갱신, CSRF 방어… 인증을 직접 구현하면 보안 전문가도 실수합니다.

안전한 로그인을 쉽게 구현할 수 있을까?

Supabase Auth — 이메일, 소셜 로그인을 메서드 하나로 처리합니다.

article

핵심 내용

회원가입, 로그인, 소셜 로그인 메서드 하나로 끝납니다

// 회원가입
const { data, error } = await supabase.auth.signUp({
  email: 'user@example.com',
  password: 'securePassword123'
})

// 로그인
const { data, error } = await supabase.auth.signInWithPassword({
  email: 'user@example.com',
  password: 'securePassword123'
})

// 로그아웃
await supabase.auth.signOut()

소셜 로그인도 간단합니다. Google, GitHub 등을 대시보드에서 활성화하면 됩니다.

// Google 로그인
const { data, error } = await supabase.auth.signInWithOAuth({
  provider: 'google'
})

// GitHub 로그인
const { data, error } = await supabase.auth.signInWithOAuth({
  provider: 'github'
})

바이브 코더 팁 비밀번호 해싱, JWT 토큰, 세션 관리를 Supabase가 알아서 처리합니다. 직접 구현하면 보안 사고의 원인이 됩니다.

로그인 상태가 바뀌면 자동으로 감지해서 UI를 전환합니다

import { useEffect, useState } from 'react'
import { supabase } from '@/lib/supabase'

export default function AuthButton() {
  const [user, setUser] = useState(null)

  useEffect(() => {
    // 현재 사용자 확인
    supabase.auth.getUser().then(({ data }) => {
      setUser(data.user)
    })

    // 상태 변경 감지
    const { data: { subscription } } = supabase.auth
      .onAuthStateChange((_event, session) => {
        setUser(session?.user ?? null)
      })

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

  if (user) {
    return (
      <div>
        <span>{user.email}</span>
        <button onClick={() => supabase.auth.signOut()}>
          로그아웃
        </button>
      </div>
    )
  }

  return <button>로그인</button>
}

프로필 이미지, 첨부 파일도 Supabase Storage로 관리합니다

Bucket 생성: 대시보드 Storage → New Bucket (예: avatars)

Policy 설정: 누가 업로드/다운로드할 수 있는지 규칙 설정

업로드: supabase.storage.from('bucket').upload()

URL 생성: getPublicUrl()로 이미지 주소 획득

// 파일 업로드
const file = event.target.files[0]
const filePath = `${userId}/${file.name}`

const { data, error } = await supabase.storage
  .from('avatars')
  .upload(filePath, file)

// 공개 URL 가져오기
const { data: { publicUrl } } = supabase.storage
  .from('avatars')
  .getPublicUrl(filePath)

// 파일 삭제
await supabase.storage
  .from('avatars')
  .remove([filePath])

파일 경로 팁 `userId/파일명` 구조로 저장하면 RLS Policy에서 사용자별 접근 제어가 쉬워집니다.

Supabase에서 Google 로그인을 구현하려면?

onAuthStateChange는 로그인/로그아웃 시에만 호출된다.

Supabase Storage에서 업로드한 파일의 공개 URL을 얻으려면?

key

핵심 용어

✅

SIGNED_IN

사용자가 로그인했을 때

👋

SIGNED_OUT

사용자가 로그아웃했을 때

🔄

TOKEN_REFRESHED

토큰이 자동 갱신되었을 때

✏️

USER_UPDATED

사용자 프로필이 변경되었을 때

edit_note

정리 노트

Supabase 인증과 스토리지

핵심 기능

Auth 회원가입: supabase.auth.signUp({email, password}) — 간편 인증
Auth 로그인: supabase.auth.signInWithPassword({...}) — 세션 자동 관리
소셜 로그인: signInWithOAuth({provider: 'google'}) — OAuth 간편 연동
Storage: supabase.storage.from('bucket').upload(path, file) — 파일 관리

★

Supabase Auth는 세션 관리까지 자동으로 처리해줍니다.

퀴즈와 인터랙션으로 더 깊이 학습하세요

play_circle인터랙티브 레슨 시작