Next_Auth Session JWT Type Extend

💡 Next Auth JWT, Session 사용 시 사용자 정의 속성(예: role)을 auth(session)에서 추가하고 User | AdapterUser 타입 설정을 하는 방법으로 타입 에러를 제거하고 원하는 속성을 사용할 수 있게 설정한다.

type.d.ts 설정

프로젝트 루트 폴더에 type.d.ts 파일 생성 후 아래와 같이 입력 후 tsconfig.json에 등록

//type.d.ts
import { JWT } from 'next-auth/jwt';
import NextAuth, { type DefaultSession } from 'next-auth';
declare module 'next-auth/jwt' {
  interface JWT {
	  //JWT에서 사용할 사용자 정의 속성 등록
    role: string;
  }
}
declare module 'next-auth' {
  export interface User extends DefaultUser {
	  //User | AdapterUser에서 사용할 사용자 정의 속성 등록
    role: string;
  }

  interface Session {
    user: {
  	  //Session에서 사용할 사용자 정의 속성 등록
      role: string;
    } & DefaultSession['user'];
  }
}

//tsconfig.json
{
  //compilerOptions...
  //paths...
  "include": [
    "next-env.d.ts",
    "**/*.ts",
    "**/*.tsx",
    ".next/types/**/*.ts",
    "app/lib/placeholder-data.js",
    "scripts/seed.js",
    "type.d.ts"  // <--- 등록
  ],
  //exclude...
}

사용자 정의 타입 선언 시 next-env.d.ts를 사용하면 안됩니다. 이 파일은 자동으로 생성되므로 변경된 내용은 덮어쓰여지기 때문에 새 파일을 만들고 tsconfig.json에서 참조해야 합니다.

사용

export async function getUserOne(): Promise<User> {
  const session = await auth();
	console.log(session.user.id);
	console.log(session.user.role);
}

export const authConfig = {
  pages: {
    signIn: '/login',
  },
  callbacks: {
		authorized({ auth, request: { nextUrl } }) {
	    const isAdmin = auth.user.role
	    const isAdminRoute = adminRoute.includes(nextUrl.pathname);
			//...
		},
	},
} satisfies NextAuthConfig;

 

Auth.js | Typescript

 

Configuring: TypeScript | Next.js