Loafacto Hub 문서

Appearance

Loafacto 문서/참고 문서/web-ui 문서/Supabase Google OAuth 로그인 설정

Supabase Google OAuth 로그인 설정 ​

Loafacto-Hub web-ui에서 Google 로그인을 연동하고 Supabase Auth에서 안정적으로 동작하도록 구성하는 문서입니다.

1. Google Cloud Console에서 OAuth 클라이언트 생성 ​

  1. Google Cloud Console 접속
  2. 새 프로젝트 생성 또는 기존 프로젝트 선택
  3. API 및 서비스에서 OAuth 동의 화면 설정(필수)
  4. 사용자 인증 정보에서 OAuth 2.0 클라이언트 ID 생성
    • User Type: 외부 또는 내부
    • 앱 이름, 사용자 지원 이메일, 승인된 도메인 등록
  5. JavaScript 출처: 로컬 http://localhost:5173, 운영 https://your-domain.com
  6. 리디렉션 URI:
    • Supabase 콜백 URL: https://<PROJECT_REF>.supabase.co/auth/v1/callback
  7. 생성된 Client ID/Secret 저장

2. Supabase Google Provider 등록 ​

  1. Supabase Dashboard → Authentication → Providers
  2. Google 토글 Enable
  3. Client ID/Secret 입력 후 Save

3. Supabase Redirect URL 설정 ​

Authentication → URL Configuration에서 Redirect URLs를 운영 환경에 맞게 등록:

  • http://localhost:5173/

  • http://localhost:5173/my-info

  • https://your-domain.com/

  • https://your-domain.com/my-info

  • Site URL은 앱 기본 도메인(예: http://localhost:5173 또는 https://your-domain.com)

4. Manual Linking(선택) ​

  • Google 계정과 기존 이메일 계정을 별도 계정으로 매핑할 때는 Manual Linking을 사용
  • 사용 시 반드시 Provider + Identity Linking 동작이 가능한지 테스트

5. 테스트 코드 예시 ​

  • signInWithOAuth({ provider: 'google', options: { redirectTo: 'https://your-domain.com/my-info' } })
  • linkIdentity({ provider: 'google' })
  • unlinkIdentity(identity)

6. 자주 보는 이슈 ​

  • redirect_uri_mismatch: Cloud Console의 리디렉션 URI와 Supabase Redirect URL이 서로 다를 때
  • Manual linking이 필요한데 비활성화된 경우: Supabase Provider 설정에서 관련 옵션 확인
  • /my-info로 돌아오지 않으면 redirect 목록과 signIn redirectTo를 재확인

참고: 01. supabase-setup.md와 연동되는 인증 기본 설정이 먼저 완료되어야 합니다.