Chapter 7 · 로그인과 인증

32강Kakao 로그인 연동하기

32강 · 카카오 로그인 연동하기

Kakao Developers → Supabase → 코드 순서로 카카오 소셜 로그인을 완성한다.

전체 흐름

STEP 1

Kakao Developers

앱 생성 + 비즈앱 전환 + 동의항목 + Client Secret

STEP 2

Supabase 설정

Kakao Provider 활성화 + 키 입력

STEP 3

Claude Code

카카오 로그인 버튼 추가

STEP 1 · Kakao Developers 설정

앱 생성

developers.kakao.com 접속 → 내 애플리케이션 → 애플리케이션 추가하기 → 앱 이름, 회사명 입력 후 저장

앱 이미지 등록 + 개인 개발자 비즈앱 전환

앱 설정 → 앱 → 일반 → 앱 기본 정보 → 수정 → 앱 이미지 등록 후 저장
이미지 등록 후 아래로 스크롤 → 개인 개발자 비즈앱 전환 → 전환 목적: 이메일 수집 선택 → 저장

REST API 키 확인

앱 키 목록에서 REST API 키를 복사해두세요. Supabase의 Client ID에 들어갈 값이에요.

카카오 로그인 활성화 + Redirect URI 등록

카카오 로그인 → 일반 → 카카오 로그인 사용 설정 ON
아래 Redirect URI 등록 버튼 클릭 → 두 가지 추가

Redirect URIs

https://your-project.supabase.co/auth/v1/callback
http://localhost:3000/auth/callback

Supabase Callback URL은 Authentication → Providers → Kakao에서 확인

동의항목 설정

카카오 로그인 → 동의항목 → 항목별 설정 버튼 클릭 → 동의 단계 및 목적 입력 후 저장

닉네임 / 프로필 사진

동의 단계: 필수 동의

동의 목적: 서비스 내 사용자 식별에 활용합니다

카카오계정(이메일)

동의 단계: 필수 동의

동의 목적: 서비스 로그인 및 계정 식별에 활용합니다

Client Secret 생성

앱 → 플랫폼 키 → REST API 키 클릭 → 클라이언트 시크릿 섹션에서 카카오 로그인 코드 생성 클릭 → 생성된 코드 복사 → 활성화 ON

STEP 2 · Supabase 설정

Kakao Provider 활성화

Supabase 대시보드 → Authentication → Providers → Kakao → Enable 토글 ON

키 입력 후 저장

Client ID → REST API 키 붙여넣기
Client Secret → 클라이언트 시크릿 코드 붙여넣기
Save 클릭

STEP 3 · Claude Code로 구현

아래 프롬프트를 Claude Code에 그대로 입력하세요.

Prompt

기존 /login 페이지에 카카오 로그인 버튼을 추가해줘.
Supabase Auth의 signInWithOAuth를 사용하고,
provider는 'kakao'로 설정해줘.
카카오 공식 색상(#FEE500)의 버튼으로 만들어줘.
Google 로그인 버튼 아래에 배치해줘.

STEP 4 · 테스트 및 확인

1	프리뷰에서 /login 접속 → 카카오 로그인 버튼 클릭
2	카카오 로그인 화면 → 동의 후 계속하기 → /dashboard로 돌아오면 성공
3	Supabase → Authentication → Users에서 카카오 계정이 새로 추가됐는지 확인

Chapter 7 · 로그인과 인증