NextAuth gives error OAUTH_CALLBACK_ERROR invalid_client when authenticating with a custom provider

Question

I'm trying to use NextAuth to authenticate with a custom oauth2 provider (Whoop), but after the login completes on the whoop servers and I'm redirected back to my application, NextAuth throws the following error:

[next-auth][error][OAUTH_CALLBACK_ERROR] 
https://next-auth.js.org/errors#oauth_callback_error invalid_client (Client authentication failed (e.g., unknown client, no client authentication included, or unsupported authentication method)) {
  error: OPError: invalid_client (Client authentication failed (e.g., unknown client, no client authentication included, or unsupported authentication method))
      at processResponse (webpack-internal:///(sc_server)/./node_modules/openid-client/lib/helpers/process_response.js:35:19)
      at Client.grant (webpack-internal:///(sc_server)/./node_modules/openid-client/lib/client.js:1191:28)
      at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
      at async Client.oauthCallback (webpack-internal:///(sc_server)/./node_modules/openid-client/lib/client.js:520:30)
      at async oAuthCallback (webpack-internal:///(sc_server)/./node_modules/next-auth/core/lib/oauth/callback.js:120:22)
      at async Object.callback (webpack-internal:///(sc_server)/./node_modules/next-auth/core/routes/callback.js:18:83)
      at async AuthHandler (webpack-internal:///(sc_server)/./node_modules/next-auth/core/index.js:202:38)
      at async NextAuthRouteHandler (webpack-internal:///(sc_server)/./node_modules/next-auth/next/index.js:49:30)
      at async NextAuth._args$ (webpack-internal:///(sc_server)/./node_modules/next-auth/next/index.js:83:24)
      at async eval (webpack-internal:///(sc_server)/./node_modules/next/dist/server/future/route-modules/app-route/module.js:242:37) {
    name: 'OAuthCallbackError',
    code: undefined
  },
  providerId: 'whoop',
  message: 'invalid_client (Client authentication failed (e.g., unknown client, no client authentication included, or unsupported authentication method))'
}

My config is as follows:

// /api/auth/[...nextauth]/route.ts
import NextAuth, { AuthOptions } from "next-auth";

export const authOptions: AuthOptions = {
  //   debug: true,
  providers: [
    {
      id: "whoop",
      name: "Whoop",
      type: "oauth",
      token: "https://api.prod.whoop.com/oauth/oauth2/token",
      authorization: {
        url: "https://api.prod.whoop.com/oauth/oauth2/auth",
        params: {
          scope: "read:profile read:workout read:recovery",
        },
      },

      clientId: process.env.WHOOP_CLIENT_ID,
      clientSecret: process.env.WHOOP_CLIENT_SECRET,
      userinfo: "https://api.prod.whoop.com/developer/v1/user/profile/basic",
      profile(profile) {
        return {
          id: profile.user_id,
          first_name: profile.first_name,
          last_name: profile.last_name,
          email: profile.email,
        };
      },
    }
  ]
};

const handler = NextAuth(authOptions);

export { handler as GET, handler as POST };

I'm fairly certain that this isn't an issue with any of the variables present in the config. The clientID, secret, callback url, and scopes all work great with whoop. Additionally, the profile function doesn't seem to be causing issues - I've tried setting the values manually without accessing the profile argument and the error persists.

Any help on debugging this would be appreciated!

NextAuth gives error OAUTH_CALLBACK_ERROR invalid_client when authenticating with a custom provider

0 Answers0