JWT Token as header Authorization Bearer Token

[ztjustin]

Your question
I have an external API that get the token from (cookies || header.Authorization || req.body). I am stucked due to I could not find the right way to send the token from my next JS app using nextAuth.

What are you trying to do
I was trying to do 2 things:

1 --- from my backend get the cookie: __Secure-next-auth.session-token || next-auth.session-token
2 --- sending token as header Authorization bearer token , but I just could get the payload info by useSession(), so when I tried to get payload from useEffect() hook it fails.

Reproduction

    callbacks: {

      session: async (session, user) => {
        session.accessToken = user.accessToken;
        return Promise.resolve(session);
      },
      jwt: async (token, user, account, profile, isNewUser) => {
        if (user) {
          token.accessToken = user.accessToken;
        }
        return Promise.resolve(token);
      },
    },
    jwt: {
      signingKey: process.env.JWT_SIGNING_PRIVATE_KEY,

      // You can also specify a public key for verification if using public/private key (but private only is fine)
      // verificationKey: process.env.JWT_SIGNING_PUBLIC_KEY,

      // If you want to use some key format other than HS512 you can specify custom options to use
      // when verifying (note: verificationOptions should include a value for maxTokenAge as well).
      // verificationOptions = {
      //   maxTokenAge: `${maxAge}s`, // e.g. `${30 * 24 * 60 * 60}s` = 30 days
      //   algorithms: ['HS512']
      // },
    },

Payload

{
  "name": "Justin",
  "email": "justinzu93@gmail.com",
  "accessToken": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJkYXRhIjp7Il9pZCI6IjYwMWUwMWViZjNjZjkyMjcwMDI3ZmIzMCJ9LCJleHAiOjE2MTI4ODAyOTIsImlhdCI6MTYxMjYyMTA5Mn0.pgKyPnmkcJ7EjDvlJ869DeD9FJkJTlnaTBltFT99QWM",
  "_id": "601e01ebf3cf92270027fb30",
  "iat": 1612622771,
  "exp": 1612633571
}

Feedback

• Found the documentation helpful
• Found documentation but was incomplete
• Could not find relevant documentation
• Found the example project helpful
• Did not find the example project helpful

By the away, it is awesome library.

Regards.

[stophecom]

Did you find a solution?

[teumaas]

I got the same problem/question how to solve this?

[j-lee8]

Same problem. Trying to hit external Express API and need to pass in JWT for authorisation.

[nimatrazmjo]

did you find any solution for this

[rajivchaulagain]

did you find any solution for this

hey , you can check my answer below

[balazsorban44]

If I understand correctly, you can use the getToken helper function with raw: true to get the decoded token

https://next-auth.js.org/configuration/options#jwt-helper

[j-lee8]

Hi @balazsorban44 I don't suppose you know how to issue tokens on a separate server (not API route) so that it can be stored against the next-auth user? I like next-auth but I've been struggling for days with this now. It creates the Google user in Postgres, but I need to be able to authorise this user on a separate Express server and clueless on where to start. Everything seems to be API routes 😔

I figure I need to issue a token (how?) on a GraphQL resolver on the server and set this in the user on signIn/jwt call back? Then I can check this in the context headers on the server for subsequent requests?

Does this mean the token resolver would need to be public? Sorry, I'm new to Next/Node/auth and next-auth so it's a pretty lethal combination of learning it all at the same time!

Thanks buddy. I'd appreciate any help or examples of a similar pattern to this.

[CollinMonahanLab49]

If I understand correctly, you can use the getToken helper function with raw: true to get the decoded token

Seems like a helpful step, but on the service side I'm wanting a Bearer token, and it says it's not one, this token I just obtained using the approach above. The error originates here, with expectedType = 'Bearer' and token.content.typ undefined.

[Alfagun74]

raw - (boolean) Get raw token (not decoded)

If set to true returns the raw token without decrypting or verifying it.

[vasilenka]

Hi @ztjustin, it might be too late for you but I hope someone will find this useful
I'm trying to do the same thing too, but my [...nextauth].js is a little bit different from yours (maybe because it's the newer version)

I have a separated express server with /login endpoint that has a response like this:

  return res.status(200).json({ accessToken, some, other, data, ... })

Here's my [...nextauth].js callbacks

callbacks: {
      ...,

      async jwt({ token, user }) {
        // the user object is what returned from the Credentials login, it has `accessToken` from the server `/login` endpoint
        // assign the accessToken to the `token` object, so it will be available on the `session` callback
        if (user) {
          token.accessToken = user.accessToken
        }
        return token
      },

      async session({ session, token }) {
        // the token object is what returned from the `jwt` callback, it has the `accessToken` that we assigned before
        // Assign the accessToken to the `session` object, so it will be available on our app through `useSession` hooks
        if (token) {
          session.accessToken = token.accessToken
        }
        return session
      }
    },

With that setup, you can get your accessToken from your app with the useSession hooks and then assign them as a bearer token to your request like this:

import React, {useEffect} from 'react'
import { useSession } from 'next-auth/react'

const App = () => {

  // I am using next-auth v4 (currently beta), and the session is available on the `data` object
  const { data } = useSession()

  useEffect(() => {
    if(data?.accessToken) {
      fetch(`/your-server/endpoint`, {
        // assign the token as bearer token on your request headers
        headers: {
          Authorization: `Bearer ${data?.accessToken}`
        }
      }).then(...).catch(...)
    }
  }, [data])

  return (...)

}

or, even better, you can set up a fetcher function somewhere else and assign the Authorization headers when the accessToken is available. That way you don't have to reassign the token whenever you want to do some request.

cc: @JavaJamie @CollinMonahanLab49 maybe you guys need this too

[a4anthony]

I tried this but the issue is that on the network tab on the browser, this token can still be viewed by anyone.

[vasilenka]

@a4anthony sorry if I don't understand you correctly, but, why is that a problem?
If you're sending something from a separated server to your app, no matter what you do will be available on the network tab of your browser

[rajivchaulagain]

@a4anthony the network tab is your private view and only you can see your network tab .

[OxiBo]

@vasilenka Do you generate the accessToken manually on the backend and store it in db?

[gielcobben]

I can't get this to work. I did the same thing as @vasilenka mentioned above but when I do a fetch outside the app, with postman for example it seems like the token doesn't do anything.

[rajivchaulagain]

I used a google auth provider with next auth, I logged with google and the details of google was send to my backend and the response from backend was a jwt token. I need that token to send to backend so that i can access that data , mine code is

export default NextAuth({
  providers: [
    GoogleProvider({
      clientId:
        "clientid",
      clientSecret: "clientsecret",
      authorization: {
        params: {
          scope:
            "your scope",
        },
      },
    }),
  ],
  jwt: {
    encryption: true
  },
  secret: process.env.NEXTAUTH_SECRET,
  callbacks: {
    async signIn({ user, account, profile, email, credentials }) {
      const data = {
        socialId: user.id,
        provider: `google`,
        email: user.email,
        firstName: `${profile.given_name}`,
        lastName: `${profile.family_name}`,
        profile: `${profile.picture}`,
      };
      const JSONdata = JSON.stringify(data);

      const options = {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
        },
        body: JSONdata,
      };

      try {
        const res = await fetch(
          `${process.env.API_URL}${process.env.API_VERSION}/users/socials/auth`,
          options
        );

        if (res.ok) {
          const response = await res.json()
          user.accessToken = response.accessToken
          return true
        }
      } catch (error) {
        console.log(error);
      }

      const isAllowedToSignIn = true;
      if (isAllowedToSignIn) {
        return true;
      } else {
        return false;
      }
    },

    async session({ session, token, user }) {
      console.log('SESSION', session, token, user)
      session.accessToken = token.accessToken
      return session
    },
    async jwt({ token, user }) {
      if (user) {
        token = { accessToken: user.accessToken }
    }
      console.log('JWTTTTTOKEN', token, user)
      return token
    }
  },
});

[hamza03084]

` import axios from "axios";
import { getSession } from "next-auth/react";

const baseURL = ${process.env.NEXT_PUBLIC_BASE_URL};
const apiInstance = axios.create({ baseURL });
apiInstance.interceptors.request.use(async (request) => {
const session = await getSession();
if (session) {
request.headers.Authorization = Bearer ${session.accessToken};
}
return request;
});

export default apiInstance;

this is nextAuth.js file

import NextAuth from "next-auth";
import CredentialsProvider from "next-auth/providers/credentials";

export default NextAuth({
session: { strategy: "jwt" },
pages: { signIn: "/signin" },
providers: [
CredentialsProvider({
name: "Sign in",
credentials: {
email: { label: "Email", type: "email", placeholder: "Sign in" },
password: { label: "Password", type: "password" },
},
async authorize(credentials, req) {
const res = await fetch(
${process.env.NEXT_PUBLIC_BASE_URL}auth/login,
{
method: "POST",
body: JSON.stringify(credentials),
headers: { "Content-Type": "application/json" },
}
);
const user = await res.json();
if (res.ok && user) {
return user;
} else {
return Promise.reject(user);
}
},
}),
],
callbacks: {
async jwt({ token, user }) {
if (user) {
token.role = user.userInfo.role;
token.id = user.userInfo._id;
token.email = user.userInfo.email;
token.name = user.userInfo.firstName + " " + user.userInfo.lastName;
token.sub = user.token;
}
return token;
},
async session({ session, token }) {
session.accessToken = token.sub;
return session;
},
},
});

`

[10MinDesign-Invite]

use server component and access cookie using cookies() and make a req is secure and pass data to client component or do other operation