Getting OAuthCallbackError - 422 Unprocessable Entity

[ChristophAckerl]

Question 💬

Hello,

I'm trying to implement OAuth 2.0 from a service called "Steady".
Steady developer documentation here.

Before implementing Next-Auth I tried to manually handle the OAuth flow, which worked, I received the Access Token and user information.

After that I tried to give it a go with Next-Auth (v4) and I just can't get it to work.

I enabled debug: true on Next-Auth and the authorization request seems to work properly:

[POST] /api/auth/signin/steady
14:57:32:79
[next-auth][debug][CREATE_STATE] { state: 'H9B5pxYHfYGFalhs-GgeWa64lbJ0DiYoWtP-VvfVSPo', maxAge: 900 }
[next-auth][debug][GET_AUTHORIZATION_URL] {
url: 'https://steadyhq.com/oauth/authorize?client_id=STEADY_ID&scope=read&response_type=code&redirect_uri=https%3A%2F%2Fsaftigmagazin.vercel.app%2Fapi%2Fauth%2Fcallback%2Fsteady&state=H9B5pxYHfYGFalhs-GgeWa64lbJ0DiYoWtP-VvfVSPo',
cookies: [
{
name: '__Secure-next-auth.state',
value: 'eyJhbGciOiJkaXIiLCJlbmMiOiJBMjU2R0NNIn0..4lerws5L0WLH2Q6l._Eh9cK-lrXKKEuacuiApadaLfeZt3G2rpNDi0Jtyng0v7q0j2ylc0NKvHq3n7L01QR5s_L0gQoeCcXeEwPl5EnI1DuosMlBKFFEOF86ufRBNI-YUqUJneiy7ORQUZm_HVj6lL6cylWgVohYRVn-_tmrROenTrZeRpsyaQJFbf9JrBueXv9I._F3zFToZBoBfgjKXYWQPNA',
options: [Object]
}
],
provider: {
id: 'steady',
name: 'SteadyProvider',
type: 'oauth',
version: '2.0',
authorization: { url: 'https://steadyhq.com/oauth/authorize', params: [Object] },
token: {
url: 'https://steadyhq.com/api/v1/oauth/token',
params: [Object]
},
userinfo: { url: 'https://steadyhq.com/api/v1/users/me', params: {} },
profile: [Function: profile],
clientId: 'STEADY_ID',
clientSecret: 'STEADY_SECRET',
idToken: false,
checks: [ 'state' ],
signinUrl: 'https://saftigmagazin.vercel.app/api/auth/signin/steady',
callbackUrl: 'https://saftigmagazin.vercel.app/api/auth/callback/steady'
}
}

The next step doesn't seem to work though and throws me this error:

[GET] /api/auth/callback/steady?code=MkNMWUh4RncvUWRjYittNTJzdVNiZz09&state=H9B5pxYHfYGFalhs-GgeWa64lbJ0DiYoWtP-VvfVSPo
14:57:33:10
2022-10-30T13:57:33.192Z 566bc860-b9da-43b2-8be4-99bf93809cd4 ERROR [next-auth][error][OAUTH_CALLBACK_ERROR]
https://next-auth.js.org/errors#oauth_callback_error expected 200 OK, got: 422 Unprocessable Entity {
error: OPError: expected 200 OK, got: 422 Unprocessable Entity
at processResponse (/var/task/node_modules/openid-client/lib/helpers/process_response.js:41:11)
at Client.grant (/var/task/node_modules/openid-client/lib/client.js:1325:22)
at processTicksAndRejections (node:internal/process/task_queues:96:5)
at async Client.oauthCallback (/var/task/node_modules/openid-client/lib/client.js:601:24)
at async oAuthCallback (/var/task/node_modules/next-auth/core/lib/oauth/callback.js:129:16)
at async Object.callback (/var/task/node_modules/next-auth/core/routes/callback.js:52:11)
at async NextAuthHandler (/var/task/node_modules/next-auth/core/index.js:201:28)
at async NextAuthNextHandler (/var/task/node_modules/next-auth/next/index.js:23:19)
at async Object.apiResolver (/var/task/node_modules/next/dist/server/api-utils/node.js:366:9)
at async NextNodeServer.runApi (/var/task/node_modules/next/dist/server/next-server.js:481:9) {
name: 'OAuthCallbackError',
code: undefined
},
providerId: 'steady',
message: 'expected 200 OK, got: 422 Unprocessable Entity'
}

I already tried many things like just passing an authorization url and token url without any params but everything pretty much ends up with the same error.
I've also tried to add a state param with a randomly generated string in it but Next-Auth seems to ignore that parameter and generates its own state anyways, according to the debug logs.

I'm absolutely sure my Client ID and my Client Secret are correct, since I've used the same variables for my manual auth flow, which worked.

Does anybody have any idea what might be the issue here?
Thank you very much in advance.

How to reproduce ☕️

My [...nextauth.ts] looks as follows:

import NextAuth, { NextAuthOptions } from "next-auth";


const redirectUri = `${process.env.NEXTAUTH_URL}/api/auth/callback/steady`;

export const authOptions: NextAuthOptions = {
  providers: [
    {
      id: "steady",
      name: "SteadyProvider",
      type: "oauth",
      version: "2.0",
      authorization: {
        url: `https://steadyhq.com/oauth/authorize`,
        params: {
          response_type: "code",
          client_id: process.env.STEADY_CLIENT_ID,
          redirect_uri: redirectUri,
          scope: "read",
        },
      },
      token: {
        url: `https://steadyhq.com/api/v1/oauth/token`,
        params: {
          client_id: process.env.STEADY_CLIENT_ID,
          client_secret: process.env.STEADY_CLIENT_SECRET,
          grant_type: "authorization_code",
          redirect_uri: redirectUri,
        },
      },
      userinfo: "https://steadyhq.com/api/v1/users/me",
      profile(profile, tokens) {
        return {
          id: profile?.id,
          token: tokens?.access_token,
        };
      },
      clientId: process.env.STEADY_CLIENT_ID,
      clientSecret: process.env.STEADY_CLIENT_SECRET,
    },
  ],
  secret: process.env.NEXTAUTH_SECRET,

  debug: true,
};
export default NextAuth(authOptions);

Contributing 🙌🏽

No, I am afraid I cannot help regarding this

[ChristophAckerl]

UPDATE

With the help of a Steady developer, I was able to identify and resolve the issue.
Apperently NextAuth does not send client_id and client_secret when provided in the params{} of the token object, so a custom function was needed.

My [...nextauth].tsx now contains the following:

import NextAuth, { NextAuthOptions } from "next-auth";
import { generateRandomString } from "../../../helper/helperFunctions";

const redirectUri = `${process.env.NEXTAUTH_URL}/api/auth/callback/steady`;
const randomString = generateRandomString();
const steadyClientId = process.env.STEADY_CLIENT_ID;
const steadyClientSecret = process.env.STEADY_CLIENT_SECRET;

export const authOptions: NextAuthOptions = {
  // Configure one or more authentication providers
  providers: [
    {
      id: "steady",
      name: "SteadyProvider",
      type: "oauth",
      version: "2.0",
      authorization: {
        url: `https://steadyhq.com/oauth/authorize`,
        params: {
          response_type: "code",
          client_id: process.env.STEADY_CLIENT_ID,
          redirect_uri: redirectUri,
          scope: "read",
          state: randomString,
        },
      },
      token: {
        url: "https://steadyhq.com/api/v1/oauth/token",
        async request(context) {
          const { params: parameters, checks } = context;

          const method = "POST";
          const headers = { "content-type": "application/json" };
          const body = JSON.stringify({
            grant_type: "authorization_code",
            code: parameters.code,
            redirect_uri: redirectUri,
            code_verifier: checks.code_verifier,
            client_id: steadyClientId,
            client_secret: steadyClientSecret,
          });

          // TODO: reuse userinfo.url config instead of repeating the URL?
          const response = await fetch(
            "https://steadyhq.com/api/v1/oauth/token",
            { method, headers, body }
          );
          if (response.status >= 200 && response.status < 400) {
            const responseBody = await response.json();
            return {
              tokens: {
                access_token: responseBody.access_token,
                refresh_token: responseBody.refresh_token,
                token_type: responseBody.token_type,
                expires_in: responseBody.expires_in,
                scope: responseBody.scope,
                info: {
                  id: responseBody.info.id,
                  "first-name": responseBody.info["first-name"],
                  "last-name": responseBody.info["last-name"],
                  email: responseBody.info["email"],
                },
              },
            };
          } else {
            // TODO: write a nice readable error that will tell you more about WHICH request failed
            throw new Error(
              "Could not fetch token, response: " + response.status
            );
          }
        },
      },
      userinfo: {
        url: "https://steadyhq.com/api/v1/users/me",
        async request(context) {
          const { tokens: tokens } = context;

          const method = "GET";
          const headers = { Authorization: "Bearer " + tokens.access_token };

          // TODO: reuse userinfo.url config instead of repeating the URL?
          const response = await fetch("https://steadyhq.com/api/v1/users/me", {
            method,
            headers,
          });
          if (response.status >= 200 && response.status < 400) {
            const responseBody = await response.json();
            return {
              id: responseBody.data.id,
              name:
                responseBody.data.attributes["first-name"] +
                " " +
                responseBody.data.attributes["last-name"],
              email: responseBody.data.attributes.email,
            };
          } else {
            // TODO: write a nice readable error that will tell you more about WHICH request failed
            throw new Error(
              "Could not fetch token, response: " + response.status
            );
          }
        },
      },
      profile(profile, tokens) {
        return {
          id: profile.id,
          name: profile.name,
          email: profile.email,
        };
      },
      clientId: steadyClientId,
      clientSecret: steadyClientSecret,
    },
  ],
  secret: process.env.NEXTAUTH_SECRET,
  callbacks: {
    async jwt({ token }) {
      token.userRole = "admin";
      return token;
    },
  },
};
export default NextAuth(authOptions);

Would there be any other way to solve this issue without a custom function? Are we missing something here?

[henningsieh]

Hey 👋 I found your old Steady next-auth solution here. Looks quite sophisticated! 😳

Is this still working? Anything to know for me before I will try to do this with the newest Auth.js v5? ✌️

[stale[bot]]

It looks like this issue did not receive any activity for 60 days. It will be closed in 7 days if no further activity occurs. If you think your issue is still relevant, commenting will keep it open. Thanks!