Supabase Kakao OAuth 설정 가이드

1. Kakao Developers 설정

1.1 애플리케이션 생성

1. Kakao Developers (opens in a new tab) 접속 및 로그인
2. [내 애플리케이션] → [애플리케이션 추가하기]
3. 앱 설정 입력:

   - 앱 이름
   - 사업자명

1.2 플랫폼 등록

1. [내 애플리케이션] → 생성한 앱 선택 → [플랫폼]
2. [Web 플랫폼 등록] 클릭
3. 사이트 도메인 등록:

   - 개발 환경: http://localhost:3000
   - 프로덕션: https://your-domain.com

1.3 카카오 로그인 활성화

1. [내 애플리케이션] → [카카오 로그인]
2. 카카오 로그인 활성화 ON
3. Redirect URI 등록:

   https://<your-project>.supabase.co/auth/v1/callback

1.4 동의항목 설정

1. [내 애플리케이션] → [카카오 로그인] → [동의항목]
2. 필수 항목 설정:

   - 닉네임 (필수)
   - 프로필 사진 (선택)
   - 이메일 (선택)

1.5 보안 설정

1. [내 애플리케이션] → [보안]
2. Client Secret 생성
   • [코드] 생성 클릭
   • 생성된 Client Secret 저장

2. Supabase 프로젝트 설정

2.1 새 프로젝트 생성

(이미 프로젝트가 있다면 건너뛰기)

1. Supabase Dashboard (opens in a new tab) 접속
2. [New Project] 클릭
3. 프로젝트 정보 입력:

   - 프로젝트 이름
   - 데이터베이스 비밀번호
   - 지역 선택

2.2 Kakao OAuth 제공자 설정

1. 프로젝트 대시보드 → [Authentication] → [Providers]
2. Kakao 제공자 찾아서 토글 활성화
3. Kakao Developers에서 생성한 정보 입력:

   - Client ID (REST API 키)
   - Client Secret (생성한 Client Secret)
4. [Save] 클릭

3. 환경변수 설정

프로젝트의 .env.local 파일에 다음 변수들을 추가:

NEXT_PUBLIC_SUPABASE_URL=https://<your-project>.supabase.co
NEXT_PUBLIC_SUPABASE_ANON_KEY=<your-anon-key>

주의사항

Kakao Developers

• 카카오 로그인 Redirect URI가 정확히 설정되어 있는지 확인
• 필요한 동의항목이 모두 설정되어 있는지 확인
• 도메인이 정확히 등록되어 있는지 확인

Supabase

• Site URL이 정확히 설정되어 있는지 확인
• Additional Redirect URLs에 필요한 URL 추가
• 로컬 개발 시 localhost URL 추가

문제 해결

자주 발생하는 오류

1. "잘못된 리다이렉트 URI"

   • Kakao Developers의 Redirect URI 설정 확인
   • Supabase 프로젝트 URL이 정확한지 확인

2. "invalid_client"

   • REST API 키와 Client Secret이 올바르게 입력되었는지 확인
   • 카카오 로그인이 활성화되어 있는지 확인

3. "필수 동의항목 미설정"

   • 카카오 로그인 동의항목에서 필수 항목이 모두 설정되어 있는지 확인

4. "도메인 미등록"

   • 웹 플랫폼에 도메인이 정확히 등록되어 있는지 확인