How to extend AuthJS User type in NextJS using TypeScript

Extend User type of AuthJS using TypeScript's Module Augmentation.

// File: auth.d.ts or auth.ts file
import 'next-auth'

declare module 'next-auth' {
  interface User {
    role?: string
    firstName?: string
    lastName?: string
    // Add any other fields you want
  }
}

Modify your AuthJS configuration to include these new fields:

export const { auth, handlers } = NextAuth({
  // ... other configuration options
  async jwt({ token, user }) {
    if (user) {
      // This will only be executed at login. Each next invocation will skip this part.
      token.role = user.role
      token.firstName = user.firstName
      token.lastName = user.lastName
    }
    // Important: return the modified token
    return token
  },
  callbacks: {
    async session({ session, user }) {
      if (session.user) {
        session.user.role = user.role
        session.user.firstName = user.firstName
        session.user.lastName = user.lastName
      }
      return session
    },
  },
})

In above example, we're using the session callback to add our custom fields to the session object.

Read more about TypeScript's Module Augmentation.