Can't extend JWT interface?

[zanzlender]

Question 💬

So I've decided to use TypeScript for my latest project which includes NextAuth as well.

Because of my use case I had to extend all the default types like so:

 interface Session {
    user: {
      user: Users | null;
      message: IAuthenticationErrror | null;
    };
  }

  interface JWT {
    user?: User;
  }

The problem here is that no matter what I do it seems that extending JWT doesn't work. When I try to access the types on the session object for example i see everything I added. But with the token objects I can only access the default ones.

I used this as a workaround to get type safety:

jwt: async ({ token, account, isNewUser, profile, user }) => {
  ...
  let token2: JWT & { user?: User | undefined } = { ...token };
  ...
}

but I still don't know why it doesn't work out of the box :/

How to reproduce ☕️

• create new NextJS project v12.2.1
• add NextAuth v4.9.0
• create new folder types/ in root and add auth.d.ts
• try to extend interface JWT with some object
• or copy paste

declare module 'next-auth' {
  interface JWT {
    user?: {
       name: string;
       sex: string;
    };
  }
}

• in jwt callback try accessing token.user.name

Contributing 🙌🏽

Yes, I am willing to help answer this question in a PR

[zanzlender]

++ Same thing happens in other parts of code then as well, for example I can access all added session properties from session object I get out of getSession() but can't access added properties of token from getToken()

[jozefhruska]

The JWT type is not exported from next-auth, but next-auth/jwt. Could you try it like this?

declare module 'next-auth/jwt' {
  /** Returned by the `jwt` callback and `getToken`, when using JWT sessions */
  interface JWT {
    user?: {
       name: string;
       sex: string;
    };
  }
}

[zanzlender]

Tyvm it worked :)

declare module 'next-auth/jwt' {
  interface JWT extends DefaultJWT {
    user: {
      id: string;
      name?: string | null;
      email?: string | null;
      image?: string | null;
      message?: IAuthenticationErrror | null;
      user: Users | null;
    };
  }
}

Interestingly though, if I didn't extend with DefaultJWT tslint didn't throw errors but I didn't get autocompletion for the Users object.

[Kinbaum]

While this is the accepted answer for v4, I figured I'd ask how to do this for v5 of next-auth?
Everything I've tried doesn't seem to work. Any help would be greatly appreciated.

Here's everything I've tried so far:

declare module '@auth/core/types' {
    interface JWT {
        test: string;
    }
}

declare module '@auth/core/jwt' {
    interface JWT {
        test: string;
    }
}

declare module 'next-auth/jwt' {
    interface JWT extends DefaultJWT {
        user: {
            test: string
        };
    }
}

I'm able to extend the User interface, just not the JWT

[mamlzy]

thank you so much bro @SornchaiTheDev

[mamlzy]

but @SornchaiTheDev may i ask where you put the type augmentation? is it in auth.ts or next-auth.d.ts? can you give the code when you do declare module ...

[SornchaiTheDev]

yep I put it in types folder as next-auth.d.ts

import "next-auth"; // I don't sure is this necessary

declare module "@auth/core/jwt" {
  interface JWT {
  your_key : any
  }
}

but I have seen that [email protected] has already patch this problem here #9617 and back to use next-auth/jwt as it was

[pete-willard]

Thank you guys, it's beta.20 and I also stumbled into this problem just now

[joshuaballoch]

Hi all, I ran into this issue too, on v5, but I'm using yarn, not pnpm. I thought I would post what worked for me for anyone else who might be in the same situation.

In a types folder as next-auth.d.ts I added:

import "next-auth"; // For me, this was needed for VSCode's in-file highlighter to work. I didn't run into an error running tsc in a shell without this line.

declare module "@auth/core/jwt" {
  interface JWT {
    youKey: string; // make any changes you want here
  }
}

In my tsconfig I needed to ensure that those types were included and have a compiler paths line added, which I adapted from the pnpm solution that @SornchaiTheDev posted.

// tsconfig.json
{
  "compilerOptions": {
        ...
        "paths": {
           "@auth/core/*" : ["./node_modules/@auth/core/*"]
        }
        ...
  },
  "include": [
    ... // other things are included here. The new line for me was to include files in the types folder, as this was the first one I added:
    "types/**/*.d.ts",
  ]
}

[CzechCoder]

I'm also very confused about it because they say in the documentation that JWT is deprecated but it still needs it somehow and this type extention is a huge problem here, because when I remove everything about JWT, I'm getting type errors in the console, plus typing for Session is also problematic because I extend the interface with my user data but then when I call it in a component, it says that the type is missing. This whole next auth works great without TS but with it it's a huge pain.
I'd also like to add that I've been following lamadev's YouTube tutorial on Next.js 14 with Next Auth v5 but he made it in JS while I'm trying to make it in TypeScript. He doesn't use Prisma and stores data on MongoDB which I found interesting, because he made it work, but when I try to put TS in it, all kinds of problems show up when making the authorization.

[SornchaiTheDev]

I have made an issue for this problem at #9571