Adding more content to the JSON Web token (to make it work with Hasura)

[gustavlrsn]

Your question
How do I add more contents to the JSON Web token?

What are you trying to do

I need to add the following to the JWT so that I can make it work with Hasura.

{
    ...
    "https://hasura.io/jwt/claims": {
        "x-hasura-allowed-roles": ["user"],
        "x-hasura-default-role": "user",
        "x-hasura-user-id": token.user?.id,
    },
}

I found the following in docs, am I correct in trying to use the encode function to add this data to the JWT? (I'm guessing I need to then sign in it myself using the jsonwebtoken library?)

jwt: {
  // secret: 'my-secret-123', // Secret auto-generated if not specified.
  
  // By default the JSON Web Token is signed with SHA256 and encrypted with AES.
  //
  // You can define your own encode/decode functions for signing + encryption if
  // you want to override the default behaviour (or to add/remove information
  // from the JWT when it is encoded).
  // encode: async ({ secret, key, token, maxAge }) => {},
  // decode: async ({ secret, key, token, maxAge }) => {},
}

Thank you for your work 🙏

Documentation 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

[iaincollins]

Hi there!

It seems @ghoshnirmalya is also trying to do this in #435 (but is also using a custom signing alg) - tagging them in in case this answer is helpful. We really need better docs for this!

So yes, you can use custom encode/decode functions as a way to modify the payload - however if all you need is to modify the contents of the token, it is easier / less code to use the JWT callback to modify the token contents.

You only need to use custom encode/decode functions if you need complete control over signing and verification (and/or encryption and decryption).

RE: v3 beta

In v3, it is possible to specify custom algorithms and/or keys - and toggle encryption on and off - using options, so you don't need to write custom encode/decode functions even if you want to change how tokens are signed/encrypted, though custom functions are still supported as before. There is no documentation for this yet, but I've been working on tutorials and docs in the last couple of days.

The v3 beta (as used in the example project) actually uses a different default JWT payload from the one used in v2 and sticks to established claim names so is more standards compliant. Adding custom properties to it works in the same way though. If you want to change the JWT payload, might want to try out the v3 beta now, to avoid having to revisit this later. :-)

[humont]

I don't know if this is still a problem, but if so, it can be solved it the following way:

const options = {
...
  callbacks: {
    jwt: async (token, user, account, profile, isNewUser) => {
      const isSignin = user ? true : false;
      if (isSignin) {
        token = { ...token, ...user };
      }
      return Promise.resolve(token);
    },
  }
}

Just make sure to add all the hasura specific fields into the user object on your provider method. eg:

const options = {
...
  providers: [
    Providers.Credentials({
      ...
      authorize: async (credentials) => {
        // Do what you need to do to get your data
        if (userIsValid) {
          const user = {
            ['https://hasura.io/jwt/claims']: {
              'x-hasura-allowed-roles': [],
              'x-hasura-default-role': 'role',
              'x-hasura-user-id': 'id',
            },
          }
          return Promise.resolve(user);
         } else {
          return Promise.resolve(null);
        }
      }
    })
  ]
}

[humont]

However, this does open up the question of how to forward the encoded JWT to hasura from the client side....

@iaincollins is there any built in way to retrieve the encoded JWT with a hook?

Perhapse the getToken() method could be extended to also be used on the client-side? but only return a raw JWT

[mcunningham]

@humont did you ever figure this out. I have a similar requirement for this with sending JWT to hasura

[darrenbutcher]

I believe something like this would work. According to the docs getToken() requires the request object; so instead of
export default async (req, res) => NextAuth(req, res, options)

Can write it like the following, with the main idea being to place the options object inside the export function

export default async (req, res) => {
  const rawToken = await jwt.getToken({req, secret, raw: true})
  const options = {
    // ... other options
    callbacks: {
      session: async (session, user, sessionToken) => {
        session.token = rawToken
        return Promise.resolve(session)
      },
    }
  }
  return NextAuth(req, res, options)
}

I poked around the code @ghoshnirmalya had for hasura integration and seems pretty solid. However, I wanted to see if it could be done without wring the encode/decode functions.