Next Auth 4: expected 200 OK with body but no body was returned

[laurenzhonauer]

Description

I have a next.js project that relies on msw to mock 3rd party api responses during development and automated tests.
Also the project relies on next-auth to make user authentication easier.

This was working fine as long as I used next-auth@3, but after upgrading to next-auth@4 im getting the error you can see in the stacktrace below when using github as an oauth provider. The error's cause seems to be open-id expecting a response body but not getting one.

Since it works if msw is not active, i suspect that the auth response from github is somehow intercepted by msw.

Im aware that this is not a direct msw bug, but i would really appreciate any pointers to a solution.
I opened a ticket on next-auth as well, but they seem to not be able to help me.

Im going to try to look into this myself and provide both tickets with infos.

How to reproduce

I have created this example it is basically the next-auth typescript example & 1 commit that adds msw

In a .env file its needed to provide a GITHUB_ID and GITHUB_SECRET. Here are the regarding docs

Then, by running npm run dev the project can be started. If you then, try to login via github you should get an error

(On my machine my cache played pranks on me, so the bug actually did not occur sometimes. Deleting the cache and reloading brings the bug forward)

Error Stacktrace

[next-auth][error][OAUTH_CALLBACK_ERROR] 
https://next-auth.js.org/errors#oauth_callback_error expected 200 OK with body but no body was returned {
  error: {
    message: 'expected 200 OK with body but no body was returned',
    stack: 'OPError: expected 200 OK with body but no body was returned\n' +
      '    at processResponse (/home/laurenz/workspace/next-auth-typescript-example/node_modules/openid-client/lib/helpers/process_response.js:56:11)\n' +
      '    at Client.grant (/home/laurenz/workspace/next-auth-typescript-example/node_modules/openid-client/lib/client.js:1340:22)\n' +
      '    at processTicksAndRejections (node:internal/process/task_queues:96:5)\n' +
      '    at async Client.oauthCallback (/home/laurenz/workspace/next-auth-typescript-example/node_modules/openid-client/lib/client.js:612:24)\n' +
      '    at async oAuthCallback (/home/laurenz/workspace/next-auth-typescript-example/node_modules/next-auth/core/lib/oauth/callback.js:114:16)\n' +
      '    at async Object.callback (/home/laurenz/workspace/next-auth-typescript-example/node_modules/next-auth/core/routes/callback.js:50:11)\n' +
      '    at async NextAuthHandler (/home/laurenz/workspace/next-auth-typescript-example/node_modules/next-auth/core/index.js:139:28)\n' +
      '    at async NextAuthNextHandler (/home/laurenz/workspace/next-auth-typescript-example/node_modules/next-auth/next/index.js:20:19)\n' +
      '    at async /home/laurenz/workspace/next-auth-typescript-example/node_modules/next-auth/next/index.js:56:32\n' +
      '    at async Object.apiResolver (/home/laurenz/workspace/next-auth-typescript-example/node_modules/next/dist/server/api-utils.js:101:9)',
    name: 'OPError'
  },
  providerId: 'github',
  message: 'expected 200 OK with body but no body was returned'
}
[next-auth][error][CALLBACK_OAUTH_ERROR] 
https://next-auth.js.org/errors#callback_oauth_error expected 200 OK with body but no body was returned OPError: expected 200 OK with body but no body was returned
    at processResponse (/home/laurenz/workspace/next-auth-typescript-example/node_modules/openid-client/lib/helpers/process_response.js:56:11)
    at Client.grant (/home/laurenz/workspace/next-auth-typescript-example/node_modules/openid-client/lib/client.js:1340:22)
    at processTicksAndRejections (node:internal/process/task_queues:96:5)
    at async Client.oauthCallback (/home/laurenz/workspace/next-auth-typescript-example/node_modules/openid-client/lib/client.js:612:24)
    at async oAuthCallback (/home/laurenz/workspace/next-auth-typescript-example/node_modules/next-auth/core/lib/oauth/callback.js:114:16)
    at async Object.callback (/home/laurenz/workspace/next-auth-typescript-example/node_modules/next-auth/core/routes/callback.js:50:11)
    at async NextAuthHandler (/home/laurenz/workspace/next-auth-typescript-example/node_modules/next-auth/core/index.js:139:28)
    at async NextAuthNextHandler (/home/laurenz/workspace/next-auth-typescript-example/node_modules/next-auth/next/index.js:20:19)
    at async /home/laurenz/workspace/next-auth-typescript-example/node_modules/next-auth/next/index.js:56:32
    at async Object.apiResolver (/home/laurenz/workspace/next-auth-typescript-example/node_modules/next/dist/server/api-utils.js:101:9) {
  name: 'OAuthCallbackError',
  code: undefined
}

Environment

  System:
    OS: Linux 5.10 Ubuntu 20.04.3 LTS (Focal Fossa)
    CPU: (5) x64 Intel(R) Core(TM) i5-8350U CPU @ 1.70GHz
    Memory: 1.39 GB / 3.84 GB
    Container: Yes
    Shell: 5.0.17 - /bin/bash
  Binaries:
    Node: 16.13.0 - ~/.nvm/versions/node/v16.13.0/bin/node
    npm: 8.1.0 - ~/.nvm/versions/node/v16.13.0/bin/npm
  npmPackages:
    next: ^11.0.0 => 11.1.3 
    next-auth: ^4.0.1 => 4.1.2 
    react: ^17.0.2 => 17.0.2 

[laurenzhonauer]

https://github.com/panva/node-openid-client/blob/main/package.json#L74

Open-id client, which is leveraged by next-auth, is not compatible with all node versions. Could it be, that msw somehow runs its own little node instance, that has a wrong version?

(Very wild guess 😄 )

[kettanaito]

No, that's not the case. MSW doesn't run any instances, so I think the root cause lies elsewhere.

[kettanaito]

Hey, @laurenzhonauer. Thanks for raising this.

I've looked into your reproduction repository and I found the root cause. It's coming from the @mswjs/interceptors library we use for Node.js request interception. More specifically, the issue originates from here.

Basically, we read the response body during the interception to share it with the consumer via Life-cycle events. Since we read the original response, any downstream consumers can't do that anymore—responses can only be read once. When it comes to Next Auth reading the response to POST https://github.com/login/oauth/access_token, it fails. However, instead of propagating that failure to you, Next Auth handles it gracefully as if no response body was received. I think this is a little confusing. I'd much prefer them to throw an error like Response body already read.

• See Prevent blocking the IncomingMessage stream in "getIncomingMessageBody" interceptors#161 for mode details in the issue.

Solutions

This issue has been fixed in the newest versions of @mswjs/interceptors. I can confirm that it does not happen when using @mswjs/[email protected] locally.

We are now cloning the original response and reading the cloned response's body instead to preserve the original response so any downstream library could read it as usual.

MSW does not yet depend on the newest version of the interceptors library, though. This brings you to two potential ways to tackle the issue in your application:

• Install and use @mswjs/[email protected] in your project. MSW will complain about unmet dependency but it will still work, as 0.13.0 introduced no breaking changes to its public API. You may encounter some issues because we haven't tested compatibility with 0.13.0 officially as it hasn't been released yet.
• Wait until we bump MSW with the newest version of the interceptors library. I don't have an ETA on that as I'm busy with some other projects at the moment.

[laurenzhonauer]

You are a hero!

I still have to try it on my real project, but already marked your response as answer since i trust you if you say you had success.
I read the issue in the interceptor project, looks like you are a one man army 😆

Anyway, thanks a lot for taking the time and providing that much detail in the answer. I will buy you coffee

[kettanaito]

I'm glad to help. Let me know if my suggestion helps.

Thank you for supporting my effort! You're the best.

[laurenzhonauer]

Hey @kettanaito , sadly i could not reproduce the fix you are suggesting.

In my latest commit I added a override for @mswjs/interceptors into my example project. When I look inside the generated package-lock.json and the node_modules folder it seems to install the right version of the dependency.

When I run the project like this I get following new error(s) in the logs.

Any Idea what is causing this? Maybe I'm installing @mswjs/[email protected] differntly than you

https://next-auth.js.org/errors#oauth_callback_error Cannot read properties of undefined (reading 'dpop-nonce') {
  error: {
    message: "Cannot read properties of undefined (reading 'dpop-nonce')",
    stack: "TypeError: Cannot read properties of undefined (reading 'dpop-nonce')\n" +
      '    at /home/laurenz/workspace/next-auth-msw-error-example/node_modules/openid-client/lib/helpers/request.js:189:53\n' +
      '    at <anonymous>\n' +
      '    at runMicrotasks (<anonymous>)\n' +
      '    at processTicksAndRejections (node:internal/process/task_queues:96:5)\n' +
      '    at async Client.grant (/home/laurenz/workspace/next-auth-msw-error-example/node_modules/openid-client/lib/client.js:1329:22)\n' +
      '    at async Client.oauthCallback (/home/laurenz/workspace/next-auth-msw-error-example/node_modules/openid-client/lib/client.js:612:24)\n' +
      '    at async oAuthCallback (/home/laurenz/workspace/next-auth-msw-error-example/node_modules/next-auth/core/lib/oauth/callback.js:114:16)\n' +
      '    at async Object.callback (/home/laurenz/workspace/next-auth-msw-error-example/node_modules/next-auth/core/routes/callback.js:50:11)\n' +
      '    at async NextAuthHandler (/home/laurenz/workspace/next-auth-msw-error-example/node_modules/next-auth/core/index.js:139:28)\n' +
      '    at async NextAuthNextHandler (/home/laurenz/workspace/next-auth-msw-error-example/node_modules/next-auth/next/index.js:21:19)',
    name: 'TypeError'
  },
  providerId: 'github',
  message: "Cannot read properties of undefined (reading 'dpop-nonce')"
}
[next-auth][error][CALLBACK_OAUTH_ERROR] 
https://next-auth.js.org/errors#callback_oauth_error Cannot read properties of undefined (reading 'dpop-nonce') TypeError: Cannot read properties of undefined (reading 'dpop-nonce')
    at /home/laurenz/workspace/next-auth-msw-error-example/node_modules/openid-client/lib/helpers/request.js:189:53
    at <anonymous>
    at runMicrotasks (<anonymous>)
    at processTicksAndRejections (node:internal/process/task_queues:96:5)
    at async Client.grant (/home/laurenz/workspace/next-auth-msw-error-example/node_modules/openid-client/lib/client.js:1329:22)
    at async Client.oauthCallback (/home/laurenz/workspace/next-auth-msw-error-example/node_modules/openid-client/lib/client.js:612:24)
    at async oAuthCallback (/home/laurenz/workspace/next-auth-msw-error-example/node_modules/next-auth/core/lib/oauth/callback.js:114:16)
    at async Object.callback (/home/laurenz/workspace/next-auth-msw-error-example/node_modules/next-auth/core/routes/callback.js:50:11)
    at async NextAuthHandler (/home/laurenz/workspace/next-auth-msw-error-example/node_modules/next-auth/core/index.js:139:28)
    at async NextAuthNextHandler (/home/laurenz/workspace/next-auth-msw-error-example/node_modules/next-auth/next/index.js:21:19) {
  name: 'OAuthCallbackError',
  code: undefined
}
error - unhandledRejection: TypeError: Cannot read properties of undefined (reading 'content-encoding')
    at /home/laurenz/workspace/next-auth-msw-error-example/node_modules/msw/node_modules/@mswjs/interceptors/lib/interceptors/ClientRequest/utils/getIncomingMessageBody.js:35:38
    at new Promise (<anonymous>)
    at Object.getIncomingMessageBody (/home/laurenz/workspace/next-auth-msw-error-example/node_modules/msw/node_modules/@mswjs/interceptors/lib/interceptors/ClientRequest/utils/getIncomingMessageBody.js:28:12)
    at NodeClientRequest.<anonymous> (/home/laurenz/workspace/next-auth-msw-error-example/node_modules/msw/node_modules/@mswjs/interceptors/lib/interceptors/ClientRequest/NodeClientRequest.js:234:91)
    at step (/home/laurenz/workspace/next-auth-msw-error-example/node_modules/msw/node_modules/@mswjs/interceptors/lib/interceptors/ClientRequest/NodeClientRequest.js:48:23)
    at Object.next (/home/laurenz/workspace/next-auth-msw-error-example/node_modules/msw/node_modules/@mswjs/interceptors/lib/interceptors/ClientRequest/NodeClientRequest.js:29:53)
    at /home/laurenz/workspace/next-auth-msw-error-example/node_modules/msw/node_modules/@mswjs/interceptors/lib/interceptors/ClientRequest/NodeClientRequest.js:23:71
    at new Promise (<anonymous>)
    at __awaiter (/home/laurenz/workspace/next-auth-msw-error-example/node_modules/msw/node_modules/@mswjs/interceptors/lib/interceptors/ClientRequest/NodeClientRequest.js:19:12)
    at NodeClientRequest.<anonymous> (/home/laurenz/workspace/next-auth-msw-error-example/node_modules/msw/node_modules/@mswjs/interceptors/lib/interceptors/ClientRequest/NodeClientRequest.js:230:85)

[laurenzhonauer]

@kettanaito Any new insights on this?

As I said in my comment, i tried the suggested solution here but did not have success.

[PavelDemyanenko]

I've managed to avoid it with additional session check upon initialization, e.g

 const { data: session } = useSession()

  if (session) {
    require('mocks')
  }

[lauhon]

Nice workaround!

But i think its not fully getting rid of the problem.
If you lose the session (by signing out) msw will still be active, every login attemt after that should fail.

Also im not sure if its possible/ how to use it effectively when setting up msw to run on node

[PavelDemyanenko]

@lauhon So far haven't faced such case, in my project i have separate login page from keycloak instance and app redirects to when user signs out. Probably one of possible solutions is to stop msw on signing out.

[kettanaito]

There's at least one issue that may affect this (#1120). We've fixed this in @mswjs/interceptors (not released yet) and will propagate it to MSW in #1136.