'checks.state argument is missing' when using the custom JWT encode/decode methods

Environment

  System:
    OS: macOS 12.0.1
    CPU: (8) arm64 Apple M1 Pro
    Memory: 298.23 MB / 16.00 GB
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 16.13.2 - ~/.nvm/versions/node/v16.13.2/bin/node
    Yarn: 1.22.17 - ~/.nvm/versions/node/v16.13.2/bin/yarn
    npm: 8.5.2 - ~/.nvm/versions/node/v16.13.2/bin/npm
  Browsers:
    Chrome: 99.0.4844.51
    Firefox: 97.0.2
    Safari: 15.1
  npmPackages:
    next: 12.1.0 => 12.1.0 
    next-auth: 4.3.0 => 4.3.0 
    react: 17.0.2 => 17.0.2 

Reproduction URL

https://github.com/boxyhq/jackson-hasura-nextjs/blob/main/pages/api/auth/[...nextauth].ts

Describe the issue

I’m having an issue with the next-auth. I’m customizing the JWT for Hasura by overriding the encode and decode methods.

In the [...nextauth].ts

export default NextAuth({
  providers: [
    BoxyHQSAMLProvider({
      issuer: `${process.env.BOXYHQ_SAML_URL}`,
      clientId: "dummy",
      clientSecret: "dummy",
    }),
  ],
  jwt: {
    encode: async ({ secret, token, maxAge }) => {
      console.log({ token });

      const jwtClaims = {
        sub: token?.sub,
        name: token?.name,
        email: token?.email,
        iat: Date.now() / 1000,
        exp: Math.floor(Date.now() / 1000) + 24 * 60 * 60,
        expires: maxAge,
        "https://hasura.io/jwt/claims": {
          "x-hasura-allowed-roles": ["user"],
          "x-hasura-default-role": "user",
          "x-hasura-role": "user",
          "x-hasura-user-id": token?.sub,
        },
      };

      return jwt.sign(jwtClaims, secret, { algorithm: "HS256" });
    },
    decode: async ({ token, secret }) => {
      return jwt.verify(token as string, secret, {
        algorithms: ["HS256"],
      }) as any;
    },
  },
  debug: true,
});

I’m getting the following errors

[next-auth][error][OAUTH_CALLBACK_ERROR] 
https://next-auth.js.org/errors#oauth_callback_error checks.state argument is missing {
  error: {
    message: 'checks.state argument is missing',
    stack: 'TypeError: checks.state argument is missing\n' +
      '    at Client.oauthCallback (/node_modules/openid-client/lib/client.js:530:13)\n' +
      '    at oAuthCallback (/node_modules/next-auth/core/lib/oauth/callback.js:114:29)\n' +
      '    at async Object.callback (/node_modules/next-auth/core/routes/callback.js:50:11)\n' +
      '    at async NextAuthHandler (/node_modules/next-auth/core/index.js:139:28)\n' +
      '    at async NextAuthNextHandler (/node_modules/next-auth/next/index.js:21:19)\n' +
      '    at async /node_modules/next-auth/next/index.js:57:32\n' +
      '    at async Object.apiResolver (/node_modules/next/dist/server/api-utils/node.js:182:9)\n' +
      '    at async DevServer.runApi (/node_modules/next/dist/server/next-server.js:386:9)\n' +
      '    at async Object.fn (/node_modules/next/dist/server/base-server.js:488:37)\n' +
      '    at async Router.execute (/node_modules/next/dist/server/router.js:228:32)',
    name: 'TypeError'
  },
  providerId: 'boxyhq-saml',
  message: 'checks.state argument is missing'
}

The code is working perfectly if I remove jwt:{} section.

How to reproduce

We don’t have a live demo now.

Please see the code here https://github.com/boxyhq/jackson-hasura-nextjs/blob/main/pages/api/auth/[...nextauth].ts

I can share more information if needed.

Expected behavior

Nex-auth should return custom JWT successfully.

[corysimmons]

In a month or so I’ll make/maintain a Hasura adapter.

[ryparker]

If you’re using a custom JWT encoder, make sure to include the token.state in your claim under the state prop.

export const encode: JWTOptions['encode'] = async ({ secret, token }) => {
  if (!token) throw new Error('Missing token');
  const jwtClaims = {
    state: token.state, // <---- This is required for OAuth
    sub: token.sub,
    name: token.name,
    iat: Date.now() / 1000,
    exp: Math.floor(Date.now() / 1000) + 24 * 60 * 60,
    'https://hasura.io/jwt/claims': {
      'x-hasura-allowed-roles': ['user'],
      'x-hasura-default-role': 'user',
      'x-hasura-role': 'user',
      'x-hasura-user-id': token.sub,
    },
  };
  return jwt.sign(jwtClaims, secret, { algorithm: 'RS512' });
};