Next-auth을 이용해서 카카오 로그인을 만들어보자

개요

개인 프로젝트를 통해서 카카오 로그인기능이 필요할 것 같아 카카오 로그인을 구현해 볼려고 합니다.

Next-auth 라이브러리를 통해서 카카오 로그인을 간편하게 구현할 수 있어 Next-auth을 사용할 겁니다.

 

 

 

Next-auth 설치 전

Next-auth을 설치하기 전에 Next는 14 버전을 사용합니다 Router 방식은 Pages Router로 해볼려고 합니다.

다음에 기회가 된다면 App Router 버전으로도 올려볼까 합니다.

 

 

Next.js 프로젝트를 설치해 줍니다.

npx create-next-app@latest

기본설정은 이렇게 했습니다.

 

원하는 설정으로 하시면 될 것 같아용

 

 

Next-auth 설치

npm install next-auth

 

next-auth을 설치를 해주시고 pages router는 pages폴더 안에 api 폴더를 생성하고 그 안에 auth 폴더와 [...nextauth].js을 만들어 주면 됩니다.

 

저 같은 경우는 타입스크립트를 선호하고 사용하기 때문에 [...nextauth].ts로 생성해 줍니다.

 

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

import NextAuth from "next-auth"

export const authOptions = {
  providers: [
  ],
}

export default NextAuth(authOptions);

이렇게 안에 코드를 넣어주시고 사용할 providers을 넣어줄 겁니다.

 

 

저희는 kakao 로그인을 할 거라서 kakaoProvider을 넣어줘야 합니다.

import NextAuth from "next-auth"
import KakaoProvider  from "next-auth/providers/kakao";

export const authOptions = {
  providers: [
    KakaoProvider({
        clientId: "",
        clientSecret: ""
    })
  ],
}

export default NextAuth(authOptions);

이렇게 만들어주고 clienId와 clientSecret을 넣어줘야 하는데

 

 

카카오 앱 생성

이제 kakao developers에 접속해서 앱을 생성해줘야 합니다.

애플리케이션 추가하기를 눌러주고

저는 블로그 작성용이라서 앱 이름과 회사명을 테스트로 생성할 겁니다.

 

 

그러면 이제 앱키 쪽으로 가면 앱키가 여러 개가 존재하는데

여기서 필요한 키는 REST API 키입니다. 잘 가지고 있어주세용

 

플랫폼 탭으로 넘어가서

사용할 url을 넣어줍니다. 여러 개를 넣을 경우 줄 바꿈으로 넣어주시면 됩니다. 개발서버일 경우 개발서버 url을 넣어주면 됩니다.

 

그리고 카카오 로그인 탭으로 넘어가서 활성화를 열어주시고

 

 

Redirect url에는 사용하시는 url뒤에 /api/auth/callback/kakao을 붙여서 넣어주시면 됩니다.

 

여러 개를 사용하는 경우 줄 바꿈 해서 넣어주시면 됩니다.

 

 

그리고 보안 탭으로 넘어가시면 Client Secret 부분이 있는데 여기서 코드를 생성해 주시고 활성화한 후 잘 가지고 계셔 주세요

 

 

그럼 이제 kakao developers의 설정은 끝났습니다.

 

 

 

적용해 보기

아까 가져온 APP키와 Client Secret 키을 가져와서 적용해 줍니다.

import NextAuth from "next-auth"
import KakaoProvider  from "next-auth/providers/kakao";

export const authOptions = {
  providers: [
    KakaoProvider({
        clientId: REST API키,
        clientSecret: Client Secret키
    })
  ],
}

export default NextAuth(authOptions);

이렇게 넣어주시면 세팅은 다 끝난 겁니다.

 

 

export default function Home() {
  return (
    <main className="min-h-screen flex items-center justify-center">
      <button className="bg-blue-500 text-white py-3 px-5 rounded-lg">난 카카오 로그인 이야</button>
    </main>
  );
}

버튼을 생성해 주고 onClick 이벤트를 넣어줍니다.

 

 

import { signIn } from "next-auth/react";

export default function Home() {
  return (
    <main className="min-h-screen flex items-center justify-center">
      <button onClick={()=>signIn()} className="bg-blue-500 text-white py-3 px-5 rounded-lg">난 카카오 로그인 이야</button>
    </main>
  );
}

 

이렇게 signIn을 가져와서 넣어주면 자동으로 연결해 주는데 Next-auth는 로그인 페이지를 직접 만들어줍니다.

굳이 로그인 페이지로 이동하고 싶지 않다면 signIn() 안에 signIn('kakao') 이렇게 넣어주면 바로 카카오 로그인 페이지로 넘어가게 됩니다.

 

 

 

 

이렇게 카카오 로그인을 간편하게 구현할 수 있었습니다.

이 방식을 이용해서 privateRouter을 구현하거나 로그인을 해야지 실행할 수 있는 버튼을 만들거나 할 수 있습니다.