NextAuth 모듈 augmentation(feat. 타입스크립트)

google provider를 이용해 로그인을 구현하던 중 한 가지 문제가 발생했다.
useSession() 메서드로 세션 값을 불러오는데 이때 user 객체에 원하는 정보가 들어있지 않았다. 기본적인 유저 정보 외에 추가적으로 데이터를 불러오고 싶었다.
docs를 살펴보니 module augmentation 으로 문제를 해결할 수 있을 것 같았다.
우선 3가지 설정이 필요했다.

⚙️ 설정

tsconfig.json

"include": ["next-env.d.ts", "types/**/*.ts", "**/*.ts", "**/*.tsx"],

next-auth.d.ts

'types/next-auth.d.ts' 경로를 따랐다.
추가로 불러오고 싶은 데이터는 username과 uid에 대한 정보다.
아래 코드는 기존 DefaultSession 인터페이스에 username과 uid의 타입을 이어 붙인다.
참고로 이때 세션의 인터페이스가 새롭게 갱신되므로 다른 파일에서 세션 관련 타입 설정을 추가로 할 필요는 없다.

import { DefaultSession } from "next-auth";
import NextAuth from "next-auth/next";

declare module "next-auth" {
  interface Session {
    user: {
      username?: string | undefined | null;
      uid?: string | undefined | null;
    } & DefaultSession["user"];
  }
}

[...nextauth].ts

'pages/api/auth/[...nextauth].ts' 경로를 따랐다.
마지막으로 authOptions 객체 안에 callbacks 프로퍼티를 작성해야 한다.
비동기 함수 안에서 기존 데이터를 활용해 username과 uid 프로퍼티를 추가로 설정했다.
참고로 추가적인 프로퍼티 설정이 가능한 이유는 앞서 Session 인터페이스를 확장했기 때문이다.

import NextAuth, { Session } from "next-auth";
import { JWT } from "next-auth/jwt";
import GoogleProvider from "next-auth/providers/google";

export const authOptions = {
  providers: [
    GoogleProvider({
      clientId: process.env.GOOGLE_CLIENT_ID!,
      clientSecret: process.env.GOOGLE_CLIENT_SECRET!,
    }),
  ],
  pages: {
    signIn: "/auth/signin",
  },
  callbacks: {
    async session({ session, token }: { session: Session; token: JWT }) {
      session.user.username = session.user
        ?.name!.split(" ")
        .join("")
        .toLocaleLowerCase();
      session.user.uid = token.sub;
      return session;
    },
  },
};

export default NextAuth(authOptions);

결과

user 객체에 추가로 설정한 username, uid 정보가 불러와진 것을 확인할 수 있다.
docs를 차분하게 들여다보는 습관의 중요성을 다시 한번 느낄 수 있었다. (짝짝👏🏻)