Next.js에서 Next-Auth의 AuthOptions구성 할 때, Callbacks 옵션에 타입주기

해당 글을 작성할 때 각 라이브러리 버전입니다.
Next.js : 13.3.4
TypeScript : 5.0.4
Next-Auth : 4.21.1

 

Next.js를 하면서 Next-Auth 라이브러리를 사용하면 소셜로그인을 정말 쉽게 구현할 수 있다.

소셜 로그인을 구현하는 만큼 일반 로그인도 쉽게 구현할 수 있는데, 구현할 때 CredentialsProvider를 사용하게 된다.

 

로그인 방식에는 크게 두 가지 방식이 있는데, 첫 번째는 Session을 이용하는 방법, 두 번째는 JWT를 사용하는 방법이 있다. CredentialsProvider을 사용하게 되면 무조건 JWT방식을 사용하게 되니 Session을 이용해서 만들고 싶은 분은 Next-Auth 삽질할 필요 없이 따로 개발을 하면 될 거 같다.

🔧 callbacks 옵션

📌 jwt

jwt 만들 때 실행되는 옵션

 

📌 session

유저 session이 조회될 때마다 실행되는 옵션

 

💡 사용예시

JAVASCRIPT
    callbacks: {
        jwt: async ({ token, user }) => {
            if (user) {
            // token에 내용을 실어보낼 수 있음
            // 아래 코드 같은 경우 name과 email을 받을 수 있음
                token.user = {};
                token.user.name = user.name;
                token.user.email = user.email;
            }
            return token;
        },
        session: async ({ session, token }) => {
        	// session 조회 할 때 아래 코드 같이 설정할 경우 토근에 보낸 값을 전부 볼 수 있음
            session.user = token.user;
            return session;
        },
    },

 

💡 타입스크립트 적용

TYPESCRIPT
// @/types/next-auth.d.ts 경로로 폴더 및 파일 생성후,
// next-auth.d.ts 파일에 아래와 같이 코드 작성
 
import { JWT } from "next-auth/jwt";
 
declare module "next-auth/jwt" {
    interface JWT {
    	// 위 코드예시에서 name과 email을 보낸것들에 대한 값에 대해 타입설정을 해준다
        user?: {
            name?: string | undefined | null;
            email?: string | undefined | null;
        };
    }
}

 

타입에 대해서 빨간 줄이 계속 생겨 공식문서를 뒤적거리며 찾게 된 방법이다. 타입스크립트를 적용하면서 드는 생각은 정말 유용한 대신 타입을 찾는 데 있어서 시간이 제법 걸린다는 것이다. 하지만 이미 그 매력에 빠져서 나올 순 없을 거 같다... 

 

⭐ 해당 내용에 대해 빠르게 보고 싶으신 분들을 위한 링크

Next-Auth 공식문서 발췌