getToken returns next-auth issued JWT? - can I get my provider issued JWT instead

[colin-riddell]

Question 💬

Hello people of NextAuth.

Loving the library so far, though I've been quite confused with the api side getToken() call. My understanding after doing some digging is that it's getting a JWT that next-auth has issued? I actually don't want that..

I want the JWT access token that my auth provider (in my case cognito) has issued, so that I can use it in a back-end API call, to my other non-next API which is acting as my oauth resource server I want to do that in next api back-end. So something along the lines of:

// /api/someroute.ts

import { getToken } from "next-auth/jwt";

const getJwt = async (req: NextApiRequest) => {
  return await getToken({ req, secret, raw: true });  // doesn't work without raw: true for some reason?
};

export default async function handler(req: NextApiRequest, res: NextApiResponse) {

  const accessToken = await getJwt(req);

  if (req.method === "POST") {
    fetch("http://non-next-service", headers: { "Authorization": `Bearer ${accessToken}`})
     //etc
  }
}

Upon logging in next-auth spits out some profile and account details to the terminal including id_token, access_token and refresh_token. Using the access_token in POSTman to call my resource server works perfectly! But it's clearly not the same token that's coming from getToken().

I've read about the callback options in the next-auth config and see there's a callback for jwt and session. It's not that clear to me what they're useful for, or how it's connected to what happens with getToken.

Looking through other issues and the example project I can't honestly see what I'm doing wrong.

Any help or pointers greatly appreciated.

How to reproduce ☕️

// /api/someroute.ts

import { getToken } from "next-auth/jwt";

const getJwt = async (req: NextApiRequest) => {
  return await getToken({ req, secret, raw: true });  // doesn't work without raw: true for some reason?
};

export default async function handler(req: NextApiRequest, res: NextApiResponse) {

  const accessToken = await getJwt(req);

  if (req.method === "POST") {
    fetch("http://non-next-service", headers: { "Authorization": `Bearer ${accessToken}`})
     //etc
  }
}

Contributing 🙌🏽

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

[colin-riddell]

I figured it out. Though it would be nice to hear if it's an ok solution:

To get the providers access token on the server side one must first modify the session object with the callback hooks by jwt and session like so:

[...nextauth].ts/js:

 callbacks: {
    async jwt({ token, account }) {
      if (account) {
        token.accessToken = account.access_token;
      }
      return token;
    },
    async session({ session, token, user }) {
      session.accessToken = token.accessToken;
      return session;
    },
  },

Then, from a server side route/page you can use getSession to get the session object, and then the access token:

/api/someroute.ts

import { getSession } from "next-auth/react";  // admit I don't understand why this works on server side

const getAccessToken = async (req: NextApiRequest) => {
  const session = await getSession({ req });
  return session?.accessToken;
};

[balazsorban44]

Yes, that's the intended way.

https://next-auth.js.org/configuration/callbacks#jwt-callback
https://next-auth.js.org/getting-started/example#extensibility

[ewermor]

In my case, the access token is always a JWE and i can't verify it. #5881

[AndonMitev]

hey @colin-riddell , sorry for bothering but just hit this case so i do have my callbacks like this:

callbacks: {
    async jwt({ token, user, account }) {
      if (user) {
        token.accessToken = user.accessToken;
        token.role = user.role;
      }

      if (account?.access_token) {
        token.accessToken = account.access_token;
      }

      return token;
    },
    async session({ session, token }) {
      if (session.user) {
        session.user.accessToken = token.accessToken;
        session.user.role = token.role;
      }

      return session;
    }
  }

and then in api/auth i had created index.ts file that is doing custom API calls and looks like this:

import { getSession } from 'next-auth/react';
import { NextApiRequest } from 'next';

const getAccessToken = async (req: NextApiRequest) => {
  const session = (await getSession({ req })) as any;
  return session?.accessToken;
};

const baseUrl = 'http://localhost:3004/api/auth/password';

enum API_ERRORS {
  UPDATE_PASSWORD = 'Failed to update password'
}

export const updatePasswordApi = async (data: {
  oldPassword: string;
  newPassword: string;
}) => {
  const accessToken = await getAccessToken();

  const response = await fetch(baseUrl, {
    method: 'POST',
    body: JSON.stringify(data),
    headers: {
      'Content-Type': 'application/json',
      Authorization: `Bearer {jwt}`
    }
  });

  if (!response.ok) {
    throw new Error(API_ERRORS.UPDATE_PASSWORD);
  }

  return response.json();
};

but really no idea from where to get req: NextApiRequest and how to pass it to getAccessToken fn, do i make something wrong? File is not located on right place or what cant figure it out ;s

[dion-blutui]

@colin-riddell wont this allow the accessToken to exposed on the client?

[HBLAB-TruongTT]

it will not make any sense if you put access token to session

[cirex-web]

@dpirad007 +1. I was wondering if there was a way to get the access token (and refresh it if needed) server-side without exposing it in session

[dion-blutui]

@cirex-web I currently store the access token in the JWT (Auth.js stores an encrypted JWT ) it can be called by the getToken method from next-auth/jwt.

Also I have to use it in a weird way due to type error (can't find the issue link though)

  const token = await getToken({
    req,
    secret: process.env.AUTH_SECRET!,
    secureCookie: process.env.NODE_ENV === "production",
    salt:
      process.env.NODE_ENV === "production"
        ? "__Secure-authjs.session-token"
        : "authjs.session-token",
  });

[TorosyanV]

would be nice to include @colin-riddell 's example in the documentation as its real life scenario.