OAUTH_CALLBACK_ERROR with custom provider (LucidChart)

[straz]

Provider type

Custom provider

Environment

System:

• OS: Linux 6.7 Alpine Linux
• CPU: (12) arm64 unknown
• Memory: 5.95 GB / 7.75 GB
• Container: Yes
• Shell: 1.36.1 - /bin/ash

Binaries:

• Node: 21.7.1 - /usr/local/bin/node
• Yarn: 1.22.19 - /usr/local/bin/yarn
• npm: 10.5.0 - /usr/local/bin/npm
• npm

Packages:

• next: ^14.1.4 => 14.1.4
• next-auth: ^4.24.7 => 4.24.7
• react: ^18 => 18.2.0

Reproduction URL

https://github.com/straz/test-lucid-provider

Describe the issue

I've created a new custom provider for LucidChart.

When I try to sign in, Lucid accepts my SSO credentials and returns to my localhost callback endpoint with code as a query parameter. Instead of accepting this code, next-auth throws an error: OPError: expected 200 OK, got: 400 Bad Request

Error message is not reported in the original code. I modified openid-client/lib/client.js to include the message body in the report: Must specify either client_secret or code_verifier

client-1  | [next-auth][error][OAUTH_CALLBACK_ERROR]
client-1  | https://next-auth.js.org/errors#oauth_callback_error expected 200 OK, got: 400 Bad Request Must specify either client_secret or code_verifier {
client-1  |   error: OPError: expected 200 OK, got: 400 Bad Request Must specify either client_secret or code_verifier
client-1  |       at processResponse (webpack-internal:///(rsc)/./node_modules/openid-client/lib/helpers/process_response.js:41:11)
client-1  |       at Client.grant (webpack-internal:///(rsc)/./node_modules/openid-client/lib/client.js:1207:28)
client-1  |       at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
client-1  |       at async Client.oauthCallback (webpack-internal:///(rsc)/./node_modules/openid-client/lib/client.js:533:30)
client-1  |       at async oAuthCallback (webpack-internal:///(rsc)/./node_modules/next-auth/core/lib/oauth/callback.js:111:16)
client-1  |       at async Object.callback (webpack-internal:///(rsc)/./node_modules/next-auth/core/routes/callback.js:52:11)
client-1  |       at async AuthHandler (webpack-internal:///(rsc)/./node_modules/next-auth/core/index.js:208:28)
client-1  |       at async NextAuthRouteHandler (webpack-internal:///(rsc)/./node_modules/next-auth/next/index.js:78:28)
client-1  |       at async NextAuth._args$ (webpack-internal:///(rsc)/./node_modules/next-auth/next/index.js:114:16)
client-1  |       at async /app/node_modules/next/dist/compiled/next-server/app-route.runtime.dev.js:6:63809
client-1  |       at async eU.execute (/app/node_modules/next/dist/compiled/next-server/app-route.runtime.dev.js:6:53964)
client-1  |       at async eU.handle (/app/node_modules/next/dist/compiled/next-server/app-route.runtime.dev.js:6:65062)
client-1  |       at async doRender (/app/node_modules/next/dist/server/base-server.js:1317:42)
client-1  |       at async cacheEntry.responseCache.get.routeKind (/app/node_modules/next/dist/server/base-server.js:1527:40)
client-1  |       at async DevServer.renderToResponseWithComponentsImpl (/app/node_modules/next/dist/server/base-server.js:1447:28)
client-1  |       at async DevServer.renderPageComponent (/app/node_modules/next/dist/server/base-server.js:1844:24)
client-1  |       at async DevServer.renderToResponseImpl (/app/node_modules/next/dist/server/base-server.js:1882:32)
client-1  |       at async DevServer.pipeImpl (/app/node_modules/next/dist/server/base-server.js:895:25)
client-1  |       at async NextNodeServer.handleCatchallRenderRequest (/app/node_modules/next/dist/server/next-server.js:269:17)
client-1  |       at async DevServer.handleRequestImpl (/app/node_modules/next/dist/server/base-server.js:791:17)
client-1  |       at async /app/node_modules/next/dist/server/dev/next-dev-server.js:331:20
client-1  |       at async Span.traceAsyncFn (/app/node_modules/next/dist/trace/trace.js:151:20)
client-1  |       at async DevServer.handleRequest (/app/node_modules/next/dist/server/dev/next-dev-server.js:328:24)
client-1  |       at async invokeRender (/app/node_modules/next/dist/server/lib/router-server.js:174:21)
client-1  |       at async handleRequest (/app/node_modules/next/dist/server/lib/router-server.js:353:24)
client-1  |       at async requestHandlerImpl (/app/node_modules/next/dist/server/lib/router-server.js:377:13)
client-1  |       at async Server.requestListener (/app/node_modules/next/dist/server/lib/start-server.js:140:13) {
client-1  |     name: 'OAuthCallbackError',
client-1  |     code: undefined
client-1  |   },
client-1  |   providerId: 'lucidchart',
client-1  |   message: 'expected 200 OK, got: 400 Bad Request Must specify either client_secret or code_verifier'
client-1  | }

How to reproduce

• Declare LucidChartProvider.tsx
• Create an app in the LucidChart developer portal and configure for OAuth 2.0
• Run my nextjs auth app on localhost:3000
• Click login button, which calls signIn() from "next-auth/react"
• I see the Sign in with LucidChart button, I click on it.
• My app receives a callback: http://localhost:3000/api/auth/callback/lucidchart?code=S2KzXmPrFKM<...>&state=mew69lwkncvZq7<...>
• The callback handler reports an error:

OPError: expected 200 OK, got: 400 Bad Request
Must specify either client_secret or code_verifier

Expected behavior

• It seems like Lucid is correctly following their OAuth 2.0 authorization endpoints documentation.
• The callback provides code as a query parameter, which I expected to be valid and used to request an access_token and a refresh_token
• I expected next-auth to handle this callback without error.
• I expected the session to be valid and provide me with a valid access_token that I can use for further API calls to the Lucid API.