NextAuth typescript issues with jwt and session callbacks.

Answered

Tomistoma posted this in #help-forum

TomistomaOP

2023-12-27T21:35:14.000Z

Hi there, I'm trying to follow the example of the jwt and session callback in nextauth.js using typescript.

But my IDE is giving me typescript issues when using the same code as in the examples:

callbacks: {
  async jwt({ token: JWT, account: Account | null, profile: Profile | undefined }) {
    // Persist the OAuth access_token and or the user id to the token right after signin
    if (account) {
      token.accessToken = account.access_token
      token.id = profile.id
    }
    return token
  }
}

Basically in this example id is not a property of profile.

And in the session example:

callbacks: {
  async session({ session: Session, token: JWT, user: AdapterUser }) {
    // Send properties to the client, like an access_token and user id from a provider.
    session.accessToken = token.accessToken
    session.user.id = token.id
    
    return session
  }
}

It says accessToken does not exist on type session and session.user is probably undefined...

Even if I set session.user?.id it says: the left hand side assignment may not be a optional property access..

It's automatically inferring these types....
How can I set a additional access token as well as set a profile/user id in the session and jwt callbacks like the example shows?

I feel like putting in @ts-ignore's is the bad way out, and want to properly solve it the TS way.

Answered by Ray

import { JWT } from "next-auth/jwt"

declare module "next-auth/jwt" {
  /** Returned by the `jwt` callback and `getToken`, when using JWT sessions */
  interface JWT {
    id: string
    accessToken: string
  }
}

View full answer

44 Replies

@Tomistoma Hi there, I'm trying to follow the example of the jwt and session callback in nextauth.js using typescript. But my IDE is giving me typescript issues when using the same code as in the examples: typescript callbacks: { async jwt({ token: JWT, account: Account | null, profile: Profile | undefined }) { // Persist the OAuth access_token and or the user id to the token right after signin if (account) { token.accessToken = account.access_token token.id = profile.id } return token } } Basically in this example id is not a property of profile. And in the session example: typescript callbacks: { async session({ session: Session, token: JWT, user: AdapterUser }) { // Send properties to the client, like an access_token and user id from a provider. session.accessToken = token.accessToken session.user.id = token.id return session } } It says accessToken does not exist on type session and session.user is probably undefined... Even if I set session.user?.id it says: the left hand side assignment may not be a optional property access.. It's automatically inferring these types.... How can I set a additional access token as well as set a profile/user id in the session and jwt callbacks like the example shows? I feel like putting in @ts-ignore's is the bad way out, and want to properly solve it the TS way.

Ray

2023-12-27T21:46:21.000Z

https://next-auth.js.org/getting-started/typescript#extend-default-interface-properties

TomistomaOP

2023-12-27T21:46:52.000Z

ah, I must've overlooked that, thank you â¤ï¸

does next-auth.d.ts inside of types need to be in the root or in src?

@Tomistoma does next-auth.d.ts inside of types need to be in the root or in src?

Ray

2023-12-27T21:49:38.000Z

src i think

TomistomaOP

2023-12-27T21:49:48.000Z

I'll give that a shot

TomistomaOP

2023-12-27T21:59:23.000Z

I'm not quite sure why my typeroots isn't being picked up, I also don't want all my types to come from the types folder instead of the node_modules folder

@Tomistoma I'm not quite sure why my typeroots isn't being picked up, I also don't want all my types to come from the types folder instead of the node_modules folder

Ray

2023-12-27T22:00:01.000Z

you can declare it in the authconfig file

TomistomaOP

2023-12-27T22:00:46.000Z

wow, I really have some reading up to do, I just jumped straight in, I assumed this was added to tsconfig.json

where is the authconfig file documentation located?

@Tomistoma where is the authconfig file documentation located?

Ray

2023-12-27T22:02:19.000Z

where you export NextAuth?

TomistomaOP

2023-12-27T22:02:43.000Z

aaah gotcha

so it's in the NextAuth declaration

Ray

2023-12-27T22:02:53.000Z

yea

TomistomaOP

2023-12-27T22:03:23.000Z

so I declare the module within the NextAuth declaration or...?

I'm a bit confused

or just the typeRoots

@Tomistoma so I declare the module within the NextAuth declaration or...?

Ray

2023-12-27T22:04:16.000Z

declare the module where you export the NextAuth

TomistomaOP

2023-12-27T22:04:26.000Z

aaah I think I get it

it'll just be picked up because it's in the same file

now I'm getting: type unknown not assignable to type string, so it thinks the token.id and token.accessToken is unknown instead of a string

this is what I currently have:

Ray

2023-12-27T22:09:33.000Z

import { JWT } from "next-auth/jwt"

declare module "next-auth/jwt" {
  /** Returned by the `jwt` callback and `getToken`, when using JWT sessions */
  interface JWT {
    id: string
    accessToken: string
  }
}

Answer

Ray

2023-12-27T22:09:36.000Z

i think you need this?

TomistomaOP

2023-12-27T22:10:17.000Z

hmmm

ok so that works if I add ! at the end

thank you, I think that solved my issue, I'll have a look whether everything works accordingly

yep it works ðŸ™‚

great

thank you

@Ray ts import { JWT } from "next-auth/jwt" declare module "next-auth/jwt" { /** Returned by the `jwt` callback and `getToken`, when using JWT sessions */ interface JWT { id: string accessToken: string } }

Ray

2023-12-27T22:14:01.000Z

do you need ! if you change to this?

TomistomaOP

2023-12-27T22:14:29.000Z

no but then the jwt callback is having issues

async jwt({token, account, profile}) {
            if (account) {
                token.accessToken = account.access_token
            }
            token.id = profile?.id
            return token;
        },