OAuth 2.0플로우차트

OAuth 2.0이란?

OAuth 2.0은 "다른 서비스의 계정으로 로그인하기"를 안전하게 해주는 표준 프로토콜입니다. 예를 들어, 새로운 앱에 가입할 때 "Google로 로그인" 버튼을 본 적 있죠? 그게 바로 OAuth입니다.

왜 OAuth를 사용할까?

사용자 입장에서:

• 새로운 비밀번호를 만들 필요 없음
• 이미 사용하는 계정(Google, 카카오 등)으로 간편 로그인

개발자 입장에서:

• 사용자 정보를 직접 관리할 필요 없음
• 보안 걱정 줄어듦
• 회원가입 절차 간소화

OAuth Flow 

 

여기에서 supabase auth 서버를 사용하면 OAuth 서비스와의 통신을 대신 해주게 되어, 
편리하다. (개발자 입장에서는 파란색 부분만 신경쓰면 된다)

 

❌ 개발자가 안 해도 되는 것들 (Supabase가 대신): 빨간색 부분

• OAuth URL 생성 및 파라미터 관리
• Authorization Code ↔ Access Token 교환
• Apple API 호출 및 사용자 정보 가져오기
• Token 검증 및 만료 처리
• 보안 관련 복잡한 처리 (PKCE, state 파라미터 등)

 

✅ 개발자가 해야 하는 것 (파란색 부분):

// 1. 로그인 시작
const { data, error } = await supabase.auth.signInWithOAuth({
    provider: 'google',
    redirectTo: `${getSiteUrl()}/auth/callback`
  });

// 2. 로그인 완료 후 토큰 받기 - auth/callback Page에서
const { data: { session } } = await supabase.auth.getSession()

// 3. API 호출
const user = data.session.user;
const { data } = await supabase.from('users').select('*').eq('id', user.id)

 

단, 현재는 BaaS 통합형(Auth + DB + API) 로 supabase 를 사용하고 있어서, 

별도의 매핑 테이블 없이 session 에서 가져온 data.session.user 를 그대로 DB에도 사용할 수 있다.

 

Auth 서버는 아래의 링크를 참조