사주 AI웹서비스 제작노트 -16

 

사주 AI웹서비스 제작노트 -15

 
카카오톡 로그인을 달았다.
그리고 이제서야 제작노트를 쓴다.
 
로그인 구현 방향은 두가지가 있다
첫번째는 Supabase Auth사용하는 법
Supabase가 중간에서 카카오와의 모든 통신(인가코드받기, 토큰 교환등)을 대신 처리해주는 방식이다.
유저가 로그인 버튼을 누르면 Supabase인증 서버를 거쳐 카카오 로그인 창으로 이동하고,
로그인이 끝나면 Supabase가 유저 정보를 받아서 자동으로 내 Supabase DB테이블에 회원을 생성해준다.
코드가 짧고, 세션 유지나 토큰 갱신(Refresh Token)같은 복잡한 보안 로직을 신경쓸 필요가 없음
 
두번째는 카카오 SDK를 직접 구현하는 것이다.
내서버(Next.js, API route등)나 프론트엔드에서 카카오 API를 하나하나 직접 호출해서 연동하는 방식이다.
카카오 SDK 방식은 로그인 이후의 회원 생성, 세션 관리, 토큰 갱신까지 직접 해야해서
구현난이도가 높아짐.. 
 
당연히 대형 프로젝트나 자체 백엔드가 있는 회사는 직접 구현하거나 라이브러리를 쓰는걸 선호할거고
나야 Supabase Auth를 쓸 생각이었지만 UX적으로 가장 불편한 점이 하나 있는데
카카오톡 앱이 자동으로 슥 켜지는게 아니라 인터넷 창(웹브라우저)이 새로 열리면서
카카오계정/비밀번호를 입력하라는 화면이 뜬다.
유저입장에서는 자동로그인이 익숙할텐데 비밀번호 기억안나거나 로그인시도하는 중에 이탈할 수도 ㅎㅎ
또한 로그인하면서 카카오톡채널친구추가 같은 마케팅 기능 연동도 불가 ㅎㅎ
 
하지만 저는 1인개발 MVP니까요. 클로드와 함께하면 무서울게 없지만 그래도 Supabase Auth를 사용해봅니다.
물론 모바일 접속이 압도적이고 카톡 공유 유입이 90%가 넘는 상황이지만서도 ㅠㅠ
하지만 카톡로그인이 되어있다면 자동로그인이 가능합니다. (다른 웹뷰에선 불가)
 

Supabase Auth에 카카오 Provider메뉴 연결

 
여튼 Supabase Auth에 카카오 Provider메뉴 연결하고, 테이블에 user_id컬럼도 미리 뚫어놨으니
로그인연동해서 유저ID만 넣음 되겠지 하고 도전해보았지만..
 
일단 순서
1단계: Supabase에서 카카오 활성화 
카카오 개발자 콘솔에서

• Client ID = REST API 키
• Client Secret = 카카오 로그인 → 앱 → 플랫폼 키

Sign In / Providers 클릭
→ Kakao 찾아서 클릭
→ Client ID, Client Secret 입력

 
2단계: 카카오 개발자 콘솔에서 Redirect URI추가

카카오 로그인 → Redirect URI 추가
https://[supabase프로젝트ID].supabase.co/auth/v1/callback

 
3단계 supabase.js파일 Auth용으로 분리
 
 

---

 
 
 
 
 
총 다섯번의 삽질을 했는데
1단계는 카카오 공유 자체가 안되는거였고 이건 도메인 이슈가 있었다.
새 도메인을 사면서 카카오 개발자 콘솔에 새 도메인을 등록했어야 했는데 안한 것..
웹 도메인과 JavaScript SDK도메인이 별도 설정이라는걸 처음 알았음 ㅎㅎ 둘다 등록하세요 여러분?
 
 

카카오톡 디벨롭 앱

2단계는 동의항목에러였는데 로그인 버튼이 떴는데 누르면 "설정하지 않은 동의 항목을 요청했다"는 에러가 났다.
알고보니 카카오 개인 개발자 미전환 상태에서는 이메일을 동의항목으로 받을 수 없었다.
아 왜..?
처음에 코드에서 scope를 빼고했는데 ㅡ
카카오 비즈앱 전환이 먼저였음
나 사업자 없는데... 라는 찰나 개인개발자 전환을 할 수 있었다 테스트 삼아 해보라고 하는듯 
전환 신청은 바로 되었다..
로그아웃 리데아렉트도 체크해봐야함
 
 
 

supabase Redirect URLs

 
3단계는 Redirect URL두개가 필요했는데 서비스 도메인(/auth/callback)만 등록하면 될거라 생각했는데 
Supabase자체콜백URL( *.supabase.co/auth/v1/callback)도 따로 등록해야했다.
카카오 로그인 요청이 실제로는 Supabase를 거쳐서 가는 구조라는걸 에러 메시지 보고 알았음
 
 

localhost연결불가

 
4단계는 localhost로 리다이렉트 되는 문제였는데...
로그인 후 localhost:3000으로 튕기는 증상이 발생했다.
원인은 Supabase의 Site URL 설정이 기본값(localhost)으로 남아있었던 것
Authentication → URL Configuration에서 Site URL과 Redirect URLs를 실제 운영 도메인으로 바꿔야 했다.
 
 
마지막은 진짜 개고생했는데 user_id가 계속 null로 저장되었다.. 
로그인 잘되고 유저도 Supabase Users 테이블에 회원이 정상적으로 보이는데
사주 결과를 저장하는 saju_results테이블의 user_id만 계속 비어있는거다 ㅠㅠㅠㅠㅠㅠ
처음엔 단순히 auth.getUser()만 호출하면 끝날 줄 알았음.
한번은 변수명이 겹쳐서 "Cannot access before initialization" 에러 발생하고
그걸 고쳐도 user_id는 여전히 null이었다.
삽질끝에 처음으로 되돌아 와서 원인을 찾았는데
브라우저에서 사용하는 Supabase 클라이언트와
서버에서 사용하는 Supabase 클라이언트는 같은 객체가 아니었던 것이다.
 
기존 lib/supabase.js는 createBrowserClient()로 만든 클라이언트였는데,
이걸 API Route(서버 코드)에서 그대로 써서 auth.getUser()를 호출하니
서버는 로그인 세션 쿠기를 읽을 수 없어 auth.getUser()가 항상 null을 반환했다.
결은 서버 전용 supabaseServer.ts를 만들고 createServerClient()를 분리한 뒤,
유저 조회용 클라이언트(supabaseAuth)를 따로 사용하는 것이었다.
덕분에 user_id도 정상적으로 저장되기 시작했다.
 
결국 모두 해결을 하긴 했는데
아직 디벨롭이 조금 필요한게 로그인 후 마이페이지 넘어갈때의 시간이 텀이있어서
로딩관련 옵션을 넣어야할지 고민이고
마이페이지에서 내 사주명식을 확인하는 부분도 살짝 텀이있어서 그부분도 고민이다 
클릭을 하고 기다리면 되긴 하는데 바로 안넘어가면 사용자가 클릭을 계속 할 것도 같아서..
 

찬란하다 카카오로그인 연동

 
 
결론
카톡 로그인연동을 성공했다.
인증 흐름은 여러 도메인 설정 (웹 도메인, SDK 도메인, Redirect URI, Site URL) 이 동시에 맞아야 동작한다.
브라우저 클라이언트와 서버 클라이언트는 다르다. 
"Supabase 클라이언트"라고 다 같은 줄 알았는데, 실행 환경(브라우저 vs 서버)에 따라 세션을 읽는 방식 자체가 달랐다.
user_id가 정상적으로 채워지는 것까지 확인했고
이후 로그인 로그아웃 버튼과 마이페이지 UI를 완성함