Next.js - NextAuth V4 - 카카오 로그인

NextAuth.js는 Next.js 애플리케이션에 인증 기능을 간편하게 추가할 수 있는 라이브러리이다. 사용자 인증은 많은 웹 애플리케이션에서 중요한 부분을 차지하는데, NextAuth를 사용하면 인증 관련 복잡한 작업을 간단하게 처리할 수 있다.

1. NextAuth.js 소개

NextAuth.js는 다양한 인증 제공자를 지원하며, 쉽게 설정할 수 있는 인증 솔루션을 제공한다. 기본적으로 OAuth, 이메일 로그인, JWT(JSON Web Token) 등을 지원하며, 사용자 인증 및 세션 관리를 간편하게 처리할 수 있다.

 

2. NextAuth.js 설치

NextAuth.js와 관련된 패키지를 설치 (4.24.7 버전으로 코드 작성)

npm install next-auth

3. 환경 변수 설정

.env.local 파일을 프로젝트 루트 디렉토리에 생성 후 환경 변수를 추가

• 루트 디렉토리 : package.json 파일과 같은 위치

KAKAO_CLIENT_ID=your-kakao-client-id
KAKAO_CLIENT_SECRET=your-kakao-client-id

4. NextAuth.js 설정

NextAuth를 사용하려면 src/pages/api/auth/[...nextauth].js 파일을 생성하여 인증 설정을 추가해야 한다.
이 파일은 NextAuth의 API 라우트로 사용된다.

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

export const authOptions = {
    providers: [
        KakaoProvider({
            clientId: process.env.KAKAO_CLIENT_ID,
            clientSecret: process.env.KAKAO_CLIENT_SECRET
        })
    ],

    // 원하는 데이터를 선별하는 callback
    callbacks: {
        async session({ session, user, token }) {
            if(token) {
                session.user.profile_image = token.profile_image
                session.user.thumbnail_image_url = token.thumbnail_image_url
                session.user.id = token.id
            }
            return session
        },
        async jwt({ token, user, account, profile, isNewUser }) {
            if (account) {
                token.profile_image = profile.properties.profile_image
                token.thumbnail_image_url = profile.properties.thumbnail_image
            }
            return token
        }
    }

}

export default NextAuth(authOptions)

5. 데이터 가져오기

1. Add API route : <SessionProvider />

2. Client Side - Add React Hook : useSession()

3. Server Side - API Route : getServerSession()