Getting CLIENT_FETCH_ERROR in production intermittently

[nmaties]

Environment

  System:
    OS: macOS 13.2.1
    CPU: (8) x64 Apple M1
    Memory: 86.57 MB / 16.00 GB
    Shell: 5.8.1 - /bin/zsh
  Binaries:
    Node: 18.7.0 - ~/.nvm/versions/node/v18.7.0/bin/node
    Yarn: 1.22.0 - /usr/local/bin/yarn
    npm: 8.17.0 - ~/.nvm/versions/node/v18.7.0/bin/npm
  Browsers:
    Chrome: 112.0.5615.49
    Safari: 16.3

Reproduction URL

https://github.com

Describe the issue

I am getting the following error from the screenshot attached intermittently, this is in a production env.

I cannot give you access to the code, it's a private repo, I followed the integration steps available in NextAuth documentation, and I do have integration with the following providers: IG, Google, FB.

The above screenshots are from Log Rocket.

I noticed that this error happens only on mobile IOS devices.

I do have the NEXTAUTH_URL key/value set in my config correctly.

[...nextAuth].js

export const authOptions = {
  providers: [
    FacebookProvider({
      clientId: process.env.FACEBOOK_CLIENT_ID,
      clientSecret: process.env.FACEBOOK_CLIENT_SECRET
    }),
    GoogleProvider({
      clientId: process.env.GOOGLE_CLIENT_ID,
      clientSecret: process.env.GOOGLE_CLIENT_SECRET
    }),
    InstagramProvider({
      clientId: process.env.INSTAGRAM_CLIENT_ID,
      clientSecret: process.env.INSTAGRAM_CLIENT_SECRET
    })
  ],
  pages: {
    newUser: '/example',
  },
  secret: process.env.JWT_SECRET,
  callbacks: {
    async session({ session, user }) {
      return {
        ...session,
        user
      };
    },
  },
  adapter: MongoDBAdapter(clientPromise)
}
export default NextAuth(authOptions)

How to reproduce

Just randomly navigating in the app.

Expected behavior

To not get this error at all.

[Crazypersonalph]

Hello, Could you clone your repo, remove the private information from the repo, and make a new repo so that we can see how your code is working? Thanks

[Crazypersonalph]

From these details, it looks like it may be a CORS issue https://stackoverflow.com/questions/71280168/javascript-typeerror-load-failed-error-when-calling-fetch-on-ios

[nmaties]

@Crazypersonalph I had a look over the example from Stackoverflow which didn't help much. Regarding adding here a repo with my existing code, I don't see how this can make a difference if it's a CORS issue, I already added the [...nextAuth].js file content. I didn't get that error in the past few days, I added some checks in the code though which makes it less "breakable" if that error occurs.

[Gr33nLight]

Hey, how did you manage to fix this issue? @nmaties

[nmaties]

@Gr33nLight I haven't managed to fix it at all.

[davl3232]

Getting this exact error with Safari and next auth, it worked before, then it suddenly started failing. It works ok on Chrome. For some reason, setting NEXTAUTH_URL to 127.0.0.1 instead of localhost appears to fix this for me, but I'm probably just hiding the problem.

Safari (Version 16.5.2 (18615.2.9.11.10))

next-auth 4.24.4

next 14.0.0

[laurenswuyts]

I also have this error. I have refetchOnWindowFocus on true and I switch tabs all the time to test, sometimes I get the same error as above and all my components that check if the user is authenticated change to not being authenticated even though the user is authenticated.

I fetch the session with getServerSession first in getServerSideProps and the useSession fetches the session whenever I Focus the window. After a couple of tries, sometimes even more than 30 times, I get the error above.