카카오 로그인은 구글보다 붙이기 까다롭습니다. Supabase가 토큰 교환을 대신해 주는 건 똑같은데, 카카오 쪽 콘솔에 카카오만의 관문이 몇 개 더 있어서요. 키 이름이 헷갈리게 두 종류입니다. Client Secret은 선택처럼 생겼지만 사실상 필수고, 무엇보다 이메일을 받으려면 비즈니스 앱으로 전환해야 합니다.
Supabase 구글 소셜 로그인 글과 같은 프로젝트에 이어서 붙인 기록입니다. 인프라 구성 자체는 1인 개발자를 위한 최소 인프라에 정리해 둔 그대로고요.
코드는 한 줄, 문제는 콘솔
결론부터 보면 애플리케이션 코드는 이게 전부입니다.
await supabase.auth.signInWithOAuth({
provider: "kakao",
options: { redirectTo: `${location.origin}/auth/callback` },
});구글에서 provider만 바꾼 코드죠. Claude Code에 “구글 로그인과 같은 구조로 카카오도 붙여줘”라고 요청하니 로그인 버튼과 콜백 라우트까지 그대로 재사용해서 만들어 줬습니다. 실제로 시간을 쓴 곳은 전부 카카오 개발자 콘솔이었습니다.
카카오 개발자 콘솔 설정
developers.kakao.com에서 애플리케이션을 만든 뒤 순서대로 진행합니다.
1. REST API 키 확인 — 앱 설정 → 앱 → 일반의 앱 키 섹션. 여기서 헷갈리기 쉬운데, 카카오는 JavaScript 키와 REST API 키를 따로 발급합니다. Supabase에 넣어야 하는 건 REST API 키입니다. 브라우저에서 부르는 코드니까 JavaScript 키겠거니 하고 넣으면 인증 자체가 실패합니다. 토큰 교환을 브라우저 대신 Supabase 서버가 하니까 서버용 키가 맞아요.
2. Client Secret 생성 — 제품 설정 → 카카오 로그인 → 보안에서 코드를 생성하고 상태를 ’사용함’으로 바꿉니다. 생성만 하고 활성화를 안 하면 Supabase에 값을 넣어도 인증이 거부됩니다. 이 두 단계가 별개라는 걸 모르면 키를 몇 번씩 다시 발급하게 되죠.
3. Redirect URI 등록 (Supabase 카카오 가이드) — 제품 설정 → 카카오 로그인에서 사용 설정을 켜고 리다이렉트 URI에 https://<project-ref>.supabase.co/auth/v1/callback을 넣습니다. 내 앱 주소가 아니라 Supabase 콜백 주소입니다. 이 구분은 구글과 완전히 같습니다.
4. 동의항목 설정 — 제품 설정 → 카카오 로그인 → 동의항목. 닉네임과 프로필 사진은 기본으로 받을 수 있는데, 이메일은 여기서 막힙니다.
이메일을 받으려면 심사를 통과해야 한다
카카오 로그인에서 제일 많이 걸리는 지점입니다. 기본 상태의 앱은 account_email 동의항목을 켤 수 없습니다. 항목 자체가 비활성 상태로 잠겨 있어요.
심사를 통과하면 위 화면처럼 account_email까지 상태를 지정할 수 있게 됩니다. 그 전에는 이 줄에서 설정 자체가 막힙니다.
신청 경로는 [앱] > [추가 기능 신청] > [개인정보 동의항목] 입니다. 화면 이름은 시기에 따라 바뀌어서 ’비즈니스 앱 전환’으로 부르던 시절의 글도 많은데, 지금 공식 문서 기준으로는 이 경로입니다. 소셜 로그인만 제공하는 서비스는 개인정보 처리방침을 기준으로 심사한다고 명시돼 있어서, 개인 개발자도 신청 자체는 가능합니다.
중요한 건 걸리는 시간입니다. 공식 문서가 밝힌 심사 기간은 영업일 기준 3~5일입니다. 반려되면 사유를 보완해 재신청해야 하는데 그것도 다시 3~5일이고요. 로그인 기능을 오늘 안에 끝낼 계획이었다면 여기서 일주일이 밀릴 수 있습니다.
그래서 순서를 이렇게 잡는 걸 권합니다. 동의항목 신청을 가장 먼저 넣어두고, 심사가 도는 동안 나머지 설정과 코드를 진행하세요.
반대로 되돌리는 건 빠릅니다. 동의항목 사용을 해제하거나 [필수 동의]를 [선택 동의]로 바꾸는 건 추가 심사 없이 바로 적용됩니다.
이메일이 정말 필요한지 먼저 따져보는 것도 방법입니다. 사용자 식별만 목적이라면 Supabase가 발급하는 user.id로 충분하고 닉네임과 프로필 이미지만으로 굴러가는 서비스도 많습니다. 나중에 이메일이 필요해지면 그때 전환해도 되고요.
Supabase 대시보드 연결
Authentication → Providers → Kakao를 열고 세 가지를 채웁니다.
- Kakao enabled 토글 켜기
- REST API 키를 Client ID 자리에
- 카카오에서 생성한 Client Secret Code를 Secret 자리에
콜백 URL은 Supabase가 자동으로 보여주니 그 값을 그대로 복사해 카카오 콘솔의 리다이렉트 URI에 넣으면 오타로 어긋날 일이 없습니다.
설정이 끝나면 프로바이더 목록에서 Kakao가 Enabled로 바뀝니다. 이 표시가 안 뜬다면 키나 시크릿이 저장되지 않은 것이니 앞 단계부터 다시 확인하세요.
실제로 데인 것들
JavaScript 키를 넣는 실수. 앞서 말한 그 문제인데, 에러 메시지가 친절하지 않아서 원인을 코드에서 찾게 됩니다. Supabase 프로바이더 설정에 넣는 값은 REST API 키 하나뿐이라고 외워두는 편이 빠릅니다.
Client Secret을 생성만 하고 끝내는 실수. 코드를 만들면 화면에 값이 보이니까 다 된 것처럼 느껴지거든요. 바로 아래 활성화 상태를 ’사용함’으로 바꿔야 실제로 동작합니다.
동의항목을 켰는데 이메일이 안 오는 경우. 비즈앱 전환 전에 설정을 시도했거나, 사용자가 선택 동의 항목에서 이메일 제공을 거부한 경우입니다. 선택 동의로 두면 사용자가 거부할 수 있습니다. 이메일이 서비스에 필수라면 필수 동의로 설정해야 합니다. 대신 그만큼 가입 이탈이 생긴다는 걸 감안해야 하고요.
Site URL이 localhost로 남아 있는 경우. 구글 글에서도 다룬 함정인데 프로바이더가 뭐든 똑같습니다. Authentication → URL Configuration의 Site URL을 배포 도메인으로 바꾸고 로컬 주소는 Additional Redirect URLs에 추가하세요.
두 프로바이더를 함께 쓸 때
구글과 카카오를 같이 붙이면 같은 사람이 두 계정으로 가입하는 상황이 생겨요. Supabase는 기본적으로 이메일이 같으면 하나의 사용자로 연결하는데, 카카오에서 이메일을 못 받는 구성이라면 이 연결이 성립하지 않습니다. 이메일 없이 카카오만 붙이면 계정 통합은 포기하는 셈입니다.
나중에 “구글로 가입했는데 카카오로 로그인하면 내 데이터가 없다”는 문의를 받게 될 지점이라, 로그인 수단을 두 개 이상 붙일 계획이라면 이메일 확보를 우선순위에 두는 게 낫습니다.
정리
카카오 로그인의 난이도는 코드가 아니라 콘솔에 있습니다. 기억할 건 세 가지예요. Supabase에 넣는 건 REST API 키, Client Secret은 생성과 활성화가 별개, 이메일은 동의항목 심사가 선행 조건. 이 셋을 먼저 처리해 두면 나머지는 구글 로그인과 똑같은 코드로 끝납니다.