Authentication

Supabase는 인증 기능을 내장하고 있어 별도 서버 없이 회원 가입, 로그인, 소셜 로그인을 처리할 수 있습니다. 로그인한 사용자는 RLS 정책에서 auth.uid()로 식별되어 데이터 접근이 제어됩니다. 이 강의에서는 클라이언트 인증 API를 살펴봅니다.

학습 목표

• 이메일·비밀번호로 회원 가입과 로그인을 처리한다.
• OAuth 소셜 로그인을 연동한다.
• 현재 로그인한 사용자 정보를 가져온다.
• 인증 상태 변화를 구독하고 로그아웃한다.

회원 가입

signUp으로 이메일과 비밀번호로 계정을 만듭니다.

const { data, error } = await supabase.auth.signUp({
  email: 'user@example.com',
  password: 'secure-password',
});

프로젝트 설정에 따라 이메일 인증 메일이 발송될 수 있습니다. 인증을 완료해야 로그인이 가능합니다.

로그인

signInWithPassword로 로그인합니다. 성공하면 세션이 자동으로 저장됩니다.

const { data, error } = await supabase.auth.signInWithPassword({
  email: 'user@example.com',
  password: 'secure-password',
});

세션 토큰은 클라이언트에 안전하게 보관되며, 이후 모든 요청에 자동으로 첨부됩니다.

OAuth 소셜 로그인

Google, GitHub 등 외부 제공자로 로그인하려면 콘솔의 Authentication → Providers에서 해당 제공자를 활성화한 뒤 다음을 호출합니다.

await supabase.auth.signInWithOAuth({
  provider: 'github',
  options: { redirectTo: 'https://myapp.com/callback' },
});

사용자는 제공자 로그인 페이지로 이동했다가 인증 후 redirectTo 주소로 돌아옵니다.

현재 사용자 조회

로그인한 사용자 정보는 getUser로 가져옵니다.

const { data: { user } } = await supabase.auth.getUser();
console.log(user?.id, user?.email);

💡 TIP — 서버에서 사용자를 검증할 때는 세션이 아닌 getUser를 사용하세요. 토큰을 실제로 검증하므로 위변조를 막을 수 있습니다.

인증 상태 구독

로그인·로그아웃에 따라 UI를 갱신하려면 onAuthStateChange로 상태 변화를 구독합니다.

const { data: { subscription } } = supabase.auth.onAuthStateChange(
  (event, session) => {
    console.log(event, session?.user);
  },
);

// 정리 시
subscription.unsubscribe();

로그아웃

signOut으로 세션을 종료합니다.

await supabase.auth.signOut();

⚠️ 주의 — 인증만으로 데이터가 보호되지는 않습니다. 로그인한 사용자라도 RLS 정책이 없으면 다른 사용자의 데이터에 접근할 수 있습니다. 인증과 RLS는 항상 함께 설계해야 합니다(07강 참고).

요약

• signUp으로 가입하고 signInWithPassword로 로그인합니다.
• signInWithOAuth로 GitHub, Google 등 소셜 로그인을 연동합니다.
• getUser로 현재 사용자를 가져오며, 서버 검증에 적합합니다.
• onAuthStateChange로 상태를 구독하고 signOut으로 로그아웃합니다.

연습문제

1. 이메일·비밀번호로 새 계정을 만드는 메서드는 무엇인가?
2. GitHub 소셜 로그인을 시작하는 코드는?
3. 서버에서 사용자를 안전하게 검증할 때 권장하는 메서드는?
4. 로그인 상태 변화를 감지해 UI를 갱신하려면 무엇을 사용하는가?

힌트 — auth 네임스페이스의 메서드 이름을 떠올려 보세요.