v4 incompatible with msw (mock service worker)

[laurenzhonauer]

Description 🐜

I have a project that relies on msw to mock api responses of a 3rd party service.
Also, of course, i had next auth v3 in there.

This was working fine, but after upgrading to next-auth@4 im getting this error.
You have in your documentation that this can happen with unsupported node versions. So maybe the fix should happen in msw.

I will open an Issue there as well and keep both issues updated with information as I am going to digg into this myself as well.

Is this a bug in your own project?

No

How to reproduce ☕️

I have created this example it is basically your typescript example & 1 commit that adds msw

(On my machine my cache played pranks on me, so the bug actually did not occur sometimes. In that case it helped to delete cache and reaload)

Screenshots / Logs 📽

[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 

Contributing 🙌🏽

Yes, I am willing to help solve this bug in a PR

[balazsorban44]

We use msw for testing, so this sounds strange to me.

https://github.com/nextauthjs/next-auth/tree/main/src/client/__tests__

make sure you read the docs on the REST API

https://next-auth.js.org/getting-started/rest-api

if you still have questions, let me know.

[laurenzhonauer]

Thanks for the response :)

Anyway, my concern is, that my exact msw setup was working in v3 but not in v4.

I would appreciate if you could have a look into my example.
If it helps you, i can create a sperarate branch with v3 to have the comparison between v3 working and v4 not working.

Regardign the REST API docs: Im confused about how it would help me with the issue. Did you have something specific in mind?

[balazsorban44]

I actually don't have much experience with msw, so I'm not able to check out your example, sorry.

[laurenzhonauer]

Similar discussion in the msw repo: mswjs/msw#1079

[laurenzhonauer]

MSW was causing problems there for some versions. Should be no problem from msw@0.39.0 and onward