Anyone got an example of extending the Next-Auth Session object so I can get to the JWT/Token?

[henricook]

I'm using Next-auth with Typescript. I'm using the next-auth-example project which means I'm using next-auth v5 Beta but I'll take examples for v4 happily as well.

This page talks about extending the Session type to get custom fields - https://next-auth.js.org/getting-started/typescript

I'm doing all this to try and get hold of the JWT that comes back from the provider, it seems that next-auth hides this pretty thoroughly. Ideally I want it on the client side but I'd take anything at this point as I've been trying for hours.

I tried making a app/types/next-auth.d.ts with:

import NextAuth, { DefaultSession } from "next-auth"

declare module "next-auth" {
    /**
     * Returned by `useSession`, `getSession` and received as a prop on the `SessionProvider` React Context
     */
    interface Session {
        token: string & DefaultSession["user"]
    }
}

and adding to my tsconfig.json in the include key under compilerOptions:

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

But this has had no effect, it compiles and runs but .token is always blank

I feel like a critical paragraph's missing from the instructions, or they're out of date. Has anyone got any pointers?

I'm trying to build what must be a really standard use case, with one provider, Okta, and I just need to be able to get to the token so that I can put it in a header when calling my custom backend from the Next app.

All help very gratefully received

🙏🏻 🙏🏻 🙏🏻 🙏🏻

[arifpratama398]

In my case when using credentials provider, I added the following script to the callback function session and jwt,

    async session({ session, token }: { session: any; token: any }) {
      if (token) {
        session.user.email = token.email;
        session.user.name = token.name;
        session.user.id = token.id;
        session.user.access_token = token.access_token;
      }
      return session;
    },
    async jwt({ token, user }: {token: any; user: any}) {
      if (user) {
        token.email = user.email;
        token.name = user.name;
        token.id = user.id;
        token.access_token = user.access_token;
      }
      return token;
    },

my access_token field was accessible through useSession from client side, and i can check it by access API /api/auth/session.

[henricook]

Thanks for this.

This comment along with a realisation that the state of Typescript in Next Auth at the moment isn't great and a helpful Discord Discussion has finally led me to a solution.

Here's:

How I got the access_token from the provider into my Session on Next Auth V5 in a Next.js app with Typescript and appDir

This works for both client side and server side pages with appDir. I have an API that expects the provider's JWT to authenticate requests, so having access to this field on all pages was essential for me to be able to craft XHR requests properly.

1. Examples are based on next-auth-example at commit 4e02b3441. If you're working with this project you have to configure your own provider, this is well covered in the existing docs. If it's your first time to V5 from V4 the biggest difference seems to be that the .env variables now all have different prefixes because of the move to Auth.js and things like OktaProvider are now just called Okta.

2. access_token is hidden or omitted by default, which is a huge part of the problem. We're going to add it to the Session type in a callback and to make this work without Typescript throwing up we have to extend the type. This is similar to what's too briefly described here in the official docs: https://next-auth.js.org/getting-started/typescript

3. Create types/next-auth.d.ts in the base of your project to house our type extensions. It should look like:

import NextAuth, { DefaultSession } from "next-auth"
import {DefaultJWT} from "@auth/core/jwt";

declare module "next-auth" {

    // Extend session to hold the access_token
    interface Session {
        access_token: string & DefaultSession
    }

    // Extend token to hold the access_token before it gets put into session
    interface JWT {
        access_token: string & DefaultJWT
    }
}

4. Now that you've added the type extension file you have to tell Typescript to look at it, in your tsconfig.json in the compilerOptions.include key add the path to the file you just created. In the example project that means it now looks like (last item in the array is the change):

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

5. The place where we're going to grab the access_token is during the login process. This means using a callback. Amend the config at auth.ts for this. I'd already amended this to use my own provider, and set the JWT strategy, here's what the whole file looked like - obviously console.logs you can remove after testing. I've added a session.strategy = JWT because that suits the persistence model I'm looking for for tokens, it's not directly related to the solution here:

import NextAuth from "next-auth"

import type {NextAuthConfig} from "next-auth"
import Okta from "@auth/core/providers/okta";

export const config = {
    theme: {
        logo: "https://next-auth.js.org/img/logo/logo-sm.png",
    },
    providers: [
        Okta({
            clientId: "myClientIdhere",
            clientSecret: "mySecretHere",
            issuer: "https://path.to.your.okta.instance.com/oauth2/default",
            // Put in a an empty `state` because Next Auth doesn't appear to be specifying this
            // properly, and Okta doesn't like a missing state param
            authorization: "https://path.to.your.okta.instance.com/oauth2/default/v1/authorize?response_type=code&state=e30="
        })
    ],
    session: {
        strategy: "jwt",
    },
    debug: true,
    callbacks: {
        session({session, token}) {
            console.log(`Auth Sess = ${JSON.stringify(session)}`)
            console.log(`Auth Tok = ${JSON.stringify(token)}`)
            if (token.access_token) {
                session.access_token = token.access_token // Put the provider's access token in the session so that we can access it client-side and server-side with `auth()`
            }
            return session
        },
        jwt({token, account, profile}) {
            console.log(`Auth JWT Tok = ${JSON.stringify(token)}`)
            console.log(`Router Auth JWT account = ${JSON.stringify(account)}`)

            if (account) {
                token.access_token = account.access_token // Store the provider's access token in the token so that we can put it in the session in the session callback above
            }

            return token
        },
        authorized({ request, auth }) {
            const { pathname } = request.nextUrl
            if (pathname === "/middleware-example") return !!auth
            return true
        },
    }
} satisfies NextAuthConfig

export const {handlers, auth, signIn, signOut} = NextAuth(config)

6. Pages are using auth() e.g. in server-example/page.tsx: const session = await auth(). Accessing the token is now as simple as doing {session?.access_token} on the page. Here's a screenshot of that working:

7. And that's what took me the best part of a day to figure out! Hopefully it's faster for you

8. Testing: You can see the access_token now in the console.logs that are printing, if you want to see it on a page edit server-example/page.tsx and client-example/page.tsx - these both use the same code (auth()) to get the session/token in Next Auth v5, which is nice.

Other weaknesses in current day Next Auth you might want to deal with next if you're on the same journey as me. Refreshing tokens: https://authjs.dev/guides/basics/refresh-token-rotation?frameworks=core

[gaborfoldes]

This has been tremendously helpful. Should be added to the documentation

[serdgio999]

Thanks, that was helpful!