카카오 로그인과 supabase 연동을 위한 설정 방법에 대해서 정리해보았다.
[카카오 개발자 계정 및 애플리케이션 생성]
- 카카오 개발자 계정 및 애플리케이션 생성
- Kakao Developers 접속
- 카카오 계정으로 로그인
- "내 애플리케이션" → "애플리케이션 추가하기" 클릭

[비즈 앱 설정]

- 비즈 앱 설정을 해야 카카오 로그인 사용가능
- 위 이미지는 설정 완료된 후 내용이지만, 초기 설정 시 안내에 따라 진행하면 설정 쉽게 가능
[필수 설정사항]
플랫폼 설정 > Web
- 사이트 도메인 등록: http://localhost:3000 (개발환경)
- 실 서비스 도메인 등록 (예: https://your-domain.com)
Redirect URI 설정
- http://localhost:3000/auth/callback (개발환경)
- https://your-domain.com/auth/callback (프로덕션)

[동의항목 설정]

제품 설정 > 카카오 로그인
- 필수 동의항목
- 프로필 정보 (닉네임, 프로필사진)
- 카카오계정 (이메일)
- 선택 동의항목 (필요한 경우)
- 성별
- 연령대
- 생일
- 카카오계정 (이메일)
- 전화번호
[보안 설정]

제품 설정 > 카카오 로그인 > 보안
- Client Secret 생성
- 활성화 설정 "사용함"으로 변경
[앱 키 확인]

요약 정보
- REST API 키 (Client ID로 사용)
- Client Secret (생성한 경우)
[supabase 설정]

Supabase 대시보드
Authentication > Providers > Kakao
- Client ID: 카카오 REST API 키 입력
- Client Secret: 카카오 Client Secret 입력
- Redirect URL: Supabase 제공 callback URL 복사하여 카카오 개발자 센터에 등록

- 개발 완료 후, Authentication > URL Configuration > Redirect URLs 실제 배포될 주소의 url을 추가해줘야 카카오 로그인 시 콜백을 받을 수 있다.

댓글