JWT is not valid when cheking on jwt.io

[jvorcak]

Hi,

I'm working on writing an article about how to connect NextAuth + Hasura in an easy way. I think I configured settings properly and the application works. However, if I try to paste my token to jwt.io it can't verify the token signature.

.env.local

SECRET='fnAD-G3PJ2ACBW2197975a2mIpnS5w-dHIoJ2lrs'
JWT_SECRET='INp8IvdIyeMcoGAgFGoA61DdBglwwSqnXJZkgz8PSnw'

import NextAuth from 'next-auth'
import Providers from 'next-auth/providers'

// For more information on each option (and a full list of options) go to
// https://next-auth.js.org/configuration/options
const options = {
  // https://next-auth.js.org/configuration/providers
  providers: [
    ******
  ],
  // Database optional. MySQL, Maria DB, Postgres and MongoDB are supported.
  // https://next-auth.js.org/configuration/database
  //
  // Notes:
  // * You must to install an appropriate node_module for your database
  // * The Email provider requires a database (OAuth providers do not)
  database: {
    **********
  },

  // The secret should be set to a reasonably long random string.
  // It is used to sign cookies and to sign and encrypt JSON Web Tokens, unless
  // a seperate secret is defined explicitly for encrypting the JWT.
  secret: process.env.SECRET,

  session: {
    // Use JSON Web Tokens for session instead of database sessions.
    // This option can be used with or without a database for users/accounts.
    // Note: `jwt` is automatically set to `true` if no database is specified.
    jwt: true,

    // Seconds - How long until an idle session expires and is no longer valid.
    // maxAge: 30 * 24 * 60 * 60, // 30 days

    // Seconds - Throttle how frequently to write to database to extend a session.
    // Use it to limit write operations. Set to 0 to always update the database.
    // Note: This option is ignored if using JSON Web Tokens 
    // updateAge: 24 * 60 * 60, // 24 hours
  },

  // JSON Web tokens are only used for sessions if the `jwt: true` session
  // option is set - or by default if no database is specified.
  // https://next-auth.js.org/configuration/options#jwt
  jwt: {
    // A secret to use for key generation (you should set this explicitly)
    secret: process.env.JWT_SECRET,

    // Set to true to use encryption (default: false)
    // encryption: true,

    // You can define your own encode/decode functions for signing and encryption
    // if you want to override the default behaviour.
    // encode: async ({ secret, token, maxAge }) => {},
    // decode: async ({ secret, token, maxAge }) => {},
  },

  // You can define custom pages to override the built-in pages.
  // The routes shown here are the default URLs that will be used when a custom
  // pages is not specified for that route.
  // https://next-auth.js.org/configuration/pages
  pages: {
    // signIn: '/api/auth/signin',  // Displays signin buttons
    // signOut: '/api/auth/signout', // Displays form with sign out button
    // error: '/api/auth/error', // Error code passed in query string as ?error=
    // verifyRequest: '/api/auth/verify-request', // Used for check email page
    // newUser: null // If set, new users will be directed here on first sign in
  },

  // Callbacks are asynchronous functions you can use to control what happens
  // when an action is performed.
  // https://next-auth.js.org/configuration/callbacks 
  callbacks: {
    // signIn: async (user, account, profile) => { return Promise.resolve(true) },
    // redirect: async (url, baseUrl) => { return Promise.resolve(baseUrl) },
    // session: async (session, user) => { return Promise.resolve(session) },

    session: async (session, user) => {
      return Promise.resolve({
        ...session,
        accessToken: user.accessToken,
      })
    },

    jwt: async (token, user, account, profile, isNewUser) => {
      const isSignIn = !!user

      if (isSignIn) {
        token.accessToken = account.accessToken;
        token.sub = user.email;
        token['https://hasura.io/jwt/claims'] = {
          'x-hasura-default-role': 'user',
          'x-hasura-allowed-roles': ["user"],
        }
      }
      token.iat = `${Date.now() / 1000}`
      token.exp = `${Math.floor(Date.now() / 1000) + 24 * 60 * 60}`
      token.sub = `${token.id}`

      return Promise.resolve(token)
    }
  },

  // Events are useful for logging
  // https://next-auth.js.org/configuration/events
  events: {},

  // Enable debug messages in the console if you are having problems
  debug: true,
}

export default (req, res) => NextAuth(req, res, options)

And I have an API endpoint

// This is an example of how to read a JSON Web Token from an API route
import jwt from 'next-auth/jwt'
import {getSession} from "next-auth/client";

const secret = process.env.SECRET

export default async (req, res) => {
  const session = await getSession({ req })
  if (session) {
    const token = await jwt.getToken({ req, secret, raw: true })
    res.send({ token })
  } else {
    res.send({ error: 'You must be sign in to view the protected content on this page.' })
  }
}

I can log in using an authentication provider, the application works, but if I choose HS512 which is supposed to be a default according to README I can't verify the signature. I pass the JWT_SECRET from env.local as secret.

Do you know what I might be doing wrong?

[iaincollins]

Hi there!

This fails because the JWT_SECRET is used to generate a key suitable for signing but isn't really the key itself - it's more a value used to seed a derived key.

Currently there isn't a way to export the key that is generated by NextAuth.js - though it's something we could certainly expose via the Node.js API and/or CLI in future. If you are curious what it looks like, you can find the code for it here.

If you want to generate your own key from that secret value you could write a function like this:

function getSigningKey (secret)  {
  const buffer = hkdf(secret, 64, { info: 'NextAuth.js Generated Signing Key', hash: 'SHA-256' })
  const key = jose.JWK.asKey(buffer, { alg: DEFAULT_SIGNATURE_ALGORITHM, use: 'sig', kid: 'nextauth-auto-generated-signing-key' })
  return key
}

Passing the secret to this function and using this response as your your key should work as you'd expect!

[jvorcak]

Thanks for your answer, I really appreciate it!

After studying the code, I got an object from this function, but I have no luck using it on jwt.io which requires a string. I've tried to base64-encode it, paste it there, stringify, but even though encoding/decoding works in a shell when using jose I don't know what to pass to jwt.io in order for it to work (and afterward to Hasura setting).

I will probably use a custom encode/decode setting, it feels more explicit nowadays when this is not exported by a library in any way, which would be definitely cool.
BTW, maybe it'd be better if this setting in an example is called SEED instead of SECRET?
https://github.com/nextauthjs/next-auth-example/blob/main/pages/api/auth/%5B...nextauth%5D.js#L77

[iaincollins]

Will mark as answered as I think is resolved, happy if anyone wants to provide a better answer instead :-)

[jiveyTO]

I agree, the config name SECRET is misleading. SEED in the name would help a lot and prevent many debugging hours.

[garretteklof]

I really think you should explicitly document this 🙂

[balazsorban44]

@garretteklof happy to accept PRs to https://github.com/nextauthjs/docs

[chtpl]

@iaincollins the hkdf function signature seems to have changed substantially, also, the current version of jose does not have a member JWK anymore. Also, I am not sure which value to choose for DEFAULT_SIGNATURE_ALGORITHM - could you please provide an updated example?

[chtpl]

Also, could anyone please tell me if I am following the right path here to solve this problem:
https://stackoverflow.com/questions/78929282/need-comprehensive-documentation-for-ms-entra-id-auth-for-a-backend-frontend-web
TL;DR: frontend auth with NextJS already works, I want to make sure only users with a certain Azure AD role can access the API of my frontend. The Token I get in the cookie is not a valid JWT as it has 4 dots instead of 3. I don't know how to use that token correctly to talk to MS Graph to check AD groups