MSW breaks Auth0 (via express-openid-connect) redirects - Endless browser load

[awacode21]

Prerequisites

• [X] I confirm my issue is not in the opened issues
• [X] I confirm the Frequently Asked Questions didn't contain the answer to my issue

Environment check

• [X] I'm using the latest msw version
• [X] I'm using Node.js version 14 or higher

Browsers

Chromium (Chrome, Brave, etc.)

Reproduction repository

https://codesandbox.io/p/github/awacode21/reproduction-vue-ssr-auth0-msw-bug/msw-issue

Reproduction steps

1. run npm install

2. run npm run dev

3. within preview, try to click login button. -> browser will endlessly load

4. stop project

5. comment out MSW

6. start project again, login link to Auth0 will do the redirect.

Current behavior

This is about a Problem Mock Service Worker is producing when try to use Auth0 on server middleware with express-openid-connect.

Once you try to login or logout, so that the redirect to auth0 would happen the browser stucks in endless load.

This does not happen without Mock Service Worker. Then auth0 is working perfectly fine. So it seems to be related to Mock Service Worker. I also found a related issue on auth0/nextjs-auth0 where a user is reporting the same problem but within another setup: https://github.com/auth0/nextjs-auth0/issues/606

"Debugging shows the last event to have successfully cloned a request to /.well-known/openid-configuration, but then hangs after the event closes. Any ideas on what could be causing this? Underlying got client?"

Honestly this problem is a real big issue for my current customer project. If we are not able to solve it we will need to move away from MSW, as changing the AUTH0 approach is no option. But i would like to prevent that move.

I really would appreciate help/fix on this. Best regards, Annick

Setup Info: Vite, Vue 3, SSR, AUTH0 with express-openid-connect as Server middleware, Mock Service Worker (node version for server, browser version for browser)

Expected behavior

MSW should not have a problem. Redirect to Auth0 via express-openid-connect should work as expected.

[jl75]

Same for auth0/nextjs-auth0. Last working version of MSW (with auth0) is 0.36.8. I have tried every subsequent version of MSW after that up until 0.49.0: result is eternal loading in browser when calling auth0 functionality. I would really like to start using MSW 0.49.x because of support for TypeScript 4.9.x. MSW becomes unusable for me if it can't cooperate with auth0. BTW, I really consider MSW to be an excellent piece of software, and I'm very happy with the functionality it provides!

[jl75]

After upgrading @auth0/nextjs-auth0 from 1.9.x to 2.0.x, trying to log in with auth0 fails (the callback from the auth0 server fails), with MSW 0.36.8 - 0.49.0 (0.49.0 not included). Before upgrading nextjs-auth0, MWS 0.36.8 was the last working version. When I restart with MSW disabled, everything works okay again.

After upgrading to MSW 0.49.2 with TypeScript 4.9.4, MSW finally works together again with nextjs-auth0! Might be worth checking for others with similar problems.

[awacode21]

i checked for my case, but the problem is still existing even with latest MSW version 0.49.2 Seems MSW is unusable in that case and we need to find another mocking solution :-(

[kettanaito]

Hey, @awacode21. Thanks for reporting this.

I will try to find time to look into this. I remember trying that sandbox last year but haven't noticed anything that'd suggest a potential root cause. Anybody is also welcome to look at this, it's an interesting one.

I'm also sorry to hear this blocks you this much. Alas, I can only dedicate as much time to an unpaid open-source project as my work/life/mental health balance permits. If you're using MSW for work, there's a sponsorship tier that'd help me prioritize your issues and get them fixed sooner. It's not a cheap one but neither is everybody's time. Maybe your company will find the support of aspiring open-source projects worth it ;)

[haydenbr]

I couldn't see the code you posted because code sandbox wasn't loading for me, but wouldn't you just have to put something in onUnhandledRequest to allow auth0 requests to pass through? I had a similar issue where I got stuck in a loop trying to authenticate with Auth0 and updating onUnhandledRequest to allow auth0 requests to pass through fixed it for me. Maybe this isn't your problem though since I can't see the code. Maybe you've already done this and are still having problems. Just throwing it out there just in case it's helpful.

[awacode21]

@haydenbr

thanks for your suggestion. I tried this very first to fix it but without success.

[kodervine]

@haydenbr

thanks for your suggestion. I tried this very first to fix it but without success.

Hi @awacode21

I noticed your earlier comments in this thread. I'm facing a similar challenge now and was wondering if you've found any solutions or workarounds since then. Your insights would be greatly appreciated

[awacode21]

@kodervine Unfortunately I have not found a solution. As it was not an option to do without Auth0, we threw MSW out of the project.

[kodervine]

@kodervine Unfortunately I have not found a solution. As it was not an option to do without Auth0, we threw MSW out of the project.

Okay, thank you for the update