카카오 로그인 (ft. supabase)

카카오 로그인과 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을 추가해줘야 카카오 로그인 시 콜백을 받을 수 있다.