네이버 로그인에 이어서 카카오 로그인 API로 로그인을 구현 할 것이다.

카카오 디벨로퍼

우선 카카오 디벨로퍼에 들어가 회원가입을 진행한다.
로그인 API 탭으로 들어가 어플리케이션 등록을 진행한다.

어플리케이션 등록 후 카카오 로그인탭에 들어가 Redirect url을 설정한다.

url 설정 후 도메인을 설정한다.

그 후 정보제공 동의항목으로 가서 필요한 항목을 받아온다.

이메일은 처음에 막혀있는데 개인개발자로 신청하여 비즈앱으로 전환하면 이메일정보제공을 활성화 할 수 있다.

카카오 비즈앱 전환 방법

정보 제공 동의 화면을 미리보기 할 수 있다.
이제 코드를 작성해보자.

코드

우선 Kakao provider를 추가해준다.

// api/auth/[...nextauth]/route.ts

import KakaoProvider from 'next-auth/providers/kakao';
    KakaoProvider({
      clientId: process.env.KAKAO_CLIENT_ID!,
      clientSecret: process.env.KAKAO_CLIENT_SECRET!,
    }),

.env 파일에도 카카오에서 제공하는 JavaScript key를 등록한다.
JavaScript key는 clientId 에 넣어주면 된다.
clientSecret 는 랜덤으로 값을 넣으면 된다.

KAKAO_CLIENT_ID=a73ef3421a-----
KAKAO_CLIENT_SECRET=VZiQChpIW-----

미리 구현해놓은 코드로 카카오 로그인 버튼을 클릭하면 정보제공동의 화면이 나오게된다.

세션도 console 로 찍어보니 잘 나온다.
세션 정보의 일부는 개인정보라 가렸다.