RPError: state missing from the response when setting a custom Sketchfab provider

[casamitjana]

I'm implementing an OAuth 2.0 flow using Sketchfab's implicit grant type via a custom provider.

It's a simple setup at the moment. Just the signing page at the root of the domain with a button for signin(). I'm using Next.js 13.2.4 and Next Auth 4.21.1.

The issue I have is that it throws an error on the final stage, after being kicked back to my app from Sketchfab. I'm hosting with Vercel and this is the server's error log after enabling Next Auth's debug option:

[next-auth][error][OAUTH_CALLBACK_ERROR] 
https://next-auth.js.org/errors#oauth_callback_error state missing from the response {
  error: RPError: state missing from the response
      at Client.oauthCallback (/var/task/node_modules/openid-client/lib/client.js:524:13)
      at oAuthCallback (/var/task/node_modules/next-auth/core/lib/oauth/callback.js:111:29)
      at async Object.callback (/var/task/node_modules/next-auth/core/routes/callback.js:52:11)
      at async AuthHandler (/var/task/node_modules/next-auth/core/index.js:201:28)
      at async NextAuthHandler (/var/task/node_modules/next-auth/next/index.js:24:19)
      at async /var/task/node_modules/next-auth/next/index.js:60:32
      at async Object.apiResolver (/var/task/node_modules/next/dist/server/api-utils/node.js:372:9)
      at async NextNodeServer.runApi (/var/task/node_modules/next/dist/server/next-server.js:514:9)
      at async Object.fn (/var/task/node_modules/next/dist/server/next-server.js:828:35)
      at async Router.execute (/var/task/node_modules/next/dist/server/router.js:243:32) {
    name: 'OAuthCallbackError',
    code: undefined
  },
  providerId: 'sketchfab',
  message: 'state missing from the response'
}

For the sign in page, Vercel's log is the following:

[next-auth][debug][CREATE_STATE] { value: 'Jt_U13aNxYIBiyd-uEQ9P5ECjlPzClMQkACAk-o4WYE', maxAge: 900 }
[next-auth][debug][GET_AUTHORIZATION_URL] {
  url: 'https://sketchfab.com/oauth2/authorize/?client_id=REDACTED&scope=read&response_type=token&redirect_uri=https%3A%2F%2Fproduct-kraken.skyixd.com%2Fapi%2Fauth%2Fcallback%2Fsketchfab&state=Jt_U13aNxYIBiyd-uEQ9P5ECjlPzClMQkACAk-o4WYE',
  cookies: [
    {
      name: '__Secure-next-auth.state',
      value: 'eyJhbGciOiJkaXIiLCJlbmMiOiJBMjU2R0NNIn0..Nj7ht69QuSSUvEvd.rqMbFxOxA99sHnfrGRpn7dkoC91UYe_jFfZcMqqZE4y7wVg-xfpUp5277jp7uzSdGM4YLvD1IrTDk5hyC_1yzF4cNiM-ooMjeeZt4L5L4yaND2mt2aK7oN60Y4AzcPPcAH_axVEuEer29rbTBieBNJIccvWHgPe9tZLTfmOdVhlvMi2p1J4.RorKlTuYxNLsiqxglAzgqg',
      options: [Object]
    }
  ],
  provider: {
    id: 'sketchfab',
    name: 'Sketchfab',
    type: 'oauth',
    authorization: {
      url: 'https://sketchfab.com/oauth2/authorize/',
      params: [Object]
    },
    checks: [ 'state' ],
    clientId: 'REDACTED',
    profile: [Function: profile],
    idToken: false,
    signinUrl: 'REDACTED/api/auth/signin/sketchfab',
    callbackUrl: 'REDACTED/api/auth/callback/sketchfab'
  }
}

Domain aside, the error's page URL is as follows /api/auth/signin?error=OAuthCallback#access_token=qi7L2kbPCcm68sYsvZ8ZAIiG7h16NS&expires_in=2592000&token_type=Bearer&scope=read&state=S39Mph8lxdZzE2O7AraydXa3mMdCduJfOXkX8F5Fr6g

So it looks like state is indeed present (&state=S39Mph8lxdZzE2O7AraydXa3mMdCduJfOXkX8F5Fr6g).

[...nextauth].ts is as follows:

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

const SKETCHFAB_CLIENT_ID = "REDACTED"
const SKETCHFAB_AUTHORIZE_URL = "https://sketchfab.com/oauth2/authorize/"

export const authOptions: NextAuthOptions = {
  providers: [
    {
      id: "sketchfab",
      name: "Sketchfab",
      type: "oauth",
      authorization: {
        url: SKETCHFAB_AUTHORIZE_URL,
        params: {
          scope: "read",
          response_type: "token",
        },
      },
      checks: ["state"],
      clientId: SKETCHFAB_CLIENT_ID,
      profile(profile, tokens) {
        return {
          id: profile.sub,
          name: profile.name,
          email: profile.email,
        }
      },
    },
  ],
  session: {
    strategy: "jwt",
  },
  jwt: {
    secret: process.env.NEXTAUTH_SECRET,
  },
  debug: true,
}

export default NextAuth(authOptions)

Any pointers regarding where this is failing would be really helpful, I've ran out of options too look into. Maybe I'm missing something obvious but I haven't been able to find working fully working examples of custom providers.

[casamitjana]

I can confirm the problem must lie somewhere on Next Auth's side (or a gap in the documentation that I'm unable to identify). I managed to successfully complete the flow using https://www.npmjs.com/package/react-simple-oauth2-login

[casamitjana]

I switched to use PKCE and that is working fine, therefore I don't need a solution to this anymore.