Next.js 15 + Supabase로 Kakao 로그인 구현하기 - 1

개요

사이드 프로젝트 진행중에 '카카오 로그인' 기능을 추가하고자 했다.

Next.js를 사용하는것도 처음이고,

Supbase로 OAuth를 이용해 카카오 로그인 기능을 구현하는 것도 처음이었다.

시행착오를 거치면서 어떻게 구현했는지 남기고자 한다.

(Supabase에 프로젝트는 미리 생성했고, Supabase 사용법에 관련해서는 따로 다루지 않을 예정)

 

일단, Supabase의 공식문서에 방법이 나와있어서 참고하면서 했다.

(쉽고 자세하게 나와있으니, 영어 읽는데 거부감이 없다면 공식문서를 보고하는걸 추천!)

https://supabase.com/docs/guides/auth/social-login/auth-kakao

Login with Kakao | Supabase Docs

 

REST API 키 설정하기

일단 Kakao Developers에서 본인 카카오 계정으로 로그인 후, 키 생성을 해주어야 한다.

https://developers.kakao.com/

Kakao Developers

 

일단 로그인 후에, 상단 네비게이션 바에 '앱'을 눌러준다.

 

그러면 이런 화면이 뜰텐데,

이미 생성한 키가 있다면 아래와 같이 뜨게 된다.

새로 만들것이기 때문에 '앱 생성' 버튼을 눌러주자.

 

그러면 다음과 같이 필수 정보들을 입력해줘야 한다.

사이드 프로젝트이기 때문에 아무렇게나 입력해줘도 상관없지만,

만약 회사 서비스 목적이라면 정확하게 입력해주는게 좋을 것 같다.

 

생성이 완료되었다면 바로 확인할 수 있다.

클릭해서 대시보드로 들어가자.

 

좌측의 '앱'의 '일반'탭을 눌러서 밑으로 조금 내러보면 '앱 키' 부분이 있다.

여기서 나중에 API 키를 사용할 때, 'REST API' 키를 사용할 것이기 때문에,

복사를 해놓거나 어디서 보는지 위치를 기억해놓으면 좋다.

 

Callback URL 설정하기

다음으로 'callback URL'이 필요하다.

이 'callback URL'은 카카오 로그인 화면에서 인증을 완료하면,
카카오 인증 서버는 인증 결과를 지정된 callback URL로 전달하며 사용자를 리다이렉트 해준다.
즉, "사용자가 인증 후 다시 우리 서비스로 안전하게 돌아오는 경로"를 의미하며,
이 경로에서 인증 코드 교환 및 세션 생성 등이 이루어져서 최종 로그인이 완성된다.

 

일단, Supabase에 있는 만들어둔 프로젝트의 대시보드로 이동해준 후,

사이드 바의 'Authentication'을 클릭해준다.

 

그 다음으로, 'Sign In / Providers'를 클릭해준다.

 

조금 내려보면, 'Auth Providers'에서 'Kakao'가 있는 것을 볼 수 있다.

활성화 하기 위해서 'Disabled'라고 적힌 버튼을 눌러주자.

 

아래와 같은 창이 뜨는데,

'Kakao enabled'로 토글 버튼을 on 해주고,

'REST API Key'에 아까 복사해둔 것을 넣어주면 된다.

 

'Client Secret Code'와 'Callback URL'은 다시 Kakao Developers로 가서 설정해주자.

'Callback URL'은 복사해두자.

사이드바의 '카카오 로그인'의 '일반'으로 들어와서,

모든 상태를 'on' 해주자.

 

그리고 조금 내려보면 '리다이렉트 URI 등록' 버튼이 있다.

 

눌러보면 다음과 같은 창이 뜨는데,

여기서 아까 Supabase에서 복사한 'Callback URL'을 넣어주고 저장해주면 된다.

 

Client Secret key 설정하기

그 밑에있는 'Client Secret'은 발급받은 후에 코드를 복사해주고,

꼭 '사용함'으로 설정해주자.

 

아래와 같이 다 입력해줬다면, 'Save'를 눌러 저장해주면 된다.

 

다시 Kakao Developers로 돌아오자.

만약 카카오 로그인 한 사용자의 정보들이 필요하다면

사용자의 동의를 얻어 사용할 수 있도록 설정해주어야 한다.

사이드바에서 '카카오 로그인' 탭의 '동의항목'을 클릭해주자.

 

그럼 이렇게 개인정보 동의항목들을 볼 수 있다.

여기서 서비스에 맞게 사용할 것들을 설정해주면 된다.

예시를 위해 닉네임 설정하는 것만 보여주면 다음과 같다.

 

먼저, 동의 단계를 설정해준다. (개발중인 서비스에 맞게 설정, 아래 '더보기'를 꼭 봐주세요!!)

나중에 개발할 때, 'account_email'이 동의되지 않았다고 에러가 났었다.

근데, 처음에 'account_email'을 동의항목으로 설정하려면 '추가 기능 신청'을 해야 한다.

같은 페이지에 '추가 기능 신청' 버튼이 있으니, 해당 페이지에서 수행해주면 된다.

개인 개발 목적으로 선택 항목들은 다 적지 않고 빈 칸으로 제출했는데도 됐다.

그렇다고 바로 승인되는 것은 아니고, 어느 순간 갑자기 되어있었다...! (하루안엔 무조건 되는것 같다.)

 

 

그 다음으로 동의 목적을 적어주는데,

여기에 적어주는 것은 우리가 회원가입할 때 체크하도록 뜨는것들이다.

동의 목적은 다음과 같이 적어주었다.

 

모든 설정을 마친 후, 하단의 '동의 화면 미리보기' 버튼을 클릭하면

어떻게 뜨는지 확인할 수 있으니 확인해보자!

마무리

이제 세팅을 모두 마치고 로그인 코드를 작성하는 일만 남았다!

지금 다른 웹 사이트 전혀 도움받지 않고 공식문서만 보고 하는중인데,

자세히 설명이 되어있어서 다행이다...

 

코드를 작성하는 것은 다음 포스팅에서 이어서 작성,,,