Keep getting CLIENT_FETCH_ERROR in production. NEXTAUTH_URL is set

[Kipitup]

Hello everyone,

I've been using next auth in development without any problem, but when I try to run next build && next start I get a CLIENT_FETCH_ERROR. I've been struggling with this problem for 2 days, starting to go crazy lol.

Here is my .env

NEXTAUTH_SECRET=somereallysecretsecret
JWT_SECRET=itshouldbealsoverysecret
NEXTAUTH_URL=http://localhost:3000

It's really weird because whether you're in dev or in production, the app launch on localhost:3000. Why would nextauth works in development and not in production ?

Here is the error I get:

[next-auth][error][CLIENT_FETCH_ERROR] 
https://next-auth.js.org/errors#client_fetch_error fetch failed {
  error: {
    message: 'fetch failed',
    stack: 'TypeError: fetch failed\n' +
      '    at Object.processResponse (node:internal/deps/undici/undici:5555:34)\n' +
      '    at node:internal/deps/undici/undici:5877:42\n' +
      '    at node:internal/process/task_queues:140:7\n' +
      '    at AsyncResource.runInAsyncScope (node:async_hooks:203:9)\n' +
      '    at AsyncResource.runMicrotask (node:internal/process/task_queues:137:8)\n' +
      '    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)',
    name: 'TypeError'
  },
  path: 'csrf',
  header: {
    host: 'localhost:3000',
    connection: 'keep-alive',
    'content-length': '683',
    'user-agent': 'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/102.0.5005.115 Safari/537.36',
    'content-type': 'application/x-www-form-urlencoded',
    accept: '*/*',
    'sec-gpc': '1',
    origin: 'http://localhost:3000',
    'sec-fetch-site': 'same-origin',
    'sec-fetch-mode': 'cors',
    'sec-fetch-dest': 'empty',
    referer: 'http://localhost:3000/siwe',
    'accept-encoding': 'gzip, deflate, br',
    'accept-language': 'fr-FR,fr;q=0.9',
    cookie: 'next-auth.csrf-token=bf01f349089451928fdad6b16730542a89c39a870951d9ff34d8be5ed5709fa0%7Ca95ba46c168db7b1247a3ddea46add90bbab9292d17e1a7dae29d6ec115a135c; next-auth.callback-url=http%3A%2F%2Flocalhost%3A3000'
  },
  message: 'fetch failed'
}

And this is the error in my browser console (I'm using Brave):

POST http://localhost:3000/api/auth/callback/credentials? 401 (Unauthorized)

---

Here is my [...nextauth].js file:

import NextAuth from "next-auth"
import CredentialsProvider from "next-auth/providers/credentials"
import { getCsrfToken } from "next-auth/react"
import { SiweMessage } from "siwe"

// For more information on each option (and a full list of options) go to
// https://next-auth.js.org/configuration/options
export default async function auth(req, res) {
  const providers = [
    CredentialsProvider({
      name: "Ethereum",
      credentials: {
        message: {
          label: "Message",
          type: "text",
          placeholder: "0x0",
        },
        signature: {
          label: "Signature",
          type: "text",
          placeholder: "0x0",
        },
      },
      async authorize(credentials) {
        try {
          const siwe = new SiweMessage(JSON.parse(credentials?.message || "{}"))
          const nextAuthUrl = new URL(process.env.NEXTAUTH_URL)
          if (siwe.domain !== nextAuthUrl.host) {
            return null
          }

          if (siwe.nonce !== (await getCsrfToken({ req }))) {
            return null
          }
          console.log("going well")

          await siwe.validate(credentials?.signature || "")
          return {
            id: siwe.address,
          }
        } catch (e) {
          return null
        }
      },
    }),
  ]

  const isDefaultSigninPage =
    req.method === "GET" && req.query.nextauth.includes("signin")

  // Hide Sign-In with Ethereum from default sign page
  if (isDefaultSigninPage) {
    providers.pop()
  }

  return await NextAuth(req, res, {
    // https://next-auth.js.org/configuration/providers/oauth
    providers,
    session: {
      strategy: "jwt",
    },
    secret: process.env.NEXTAUTH_SECRET,
    callbacks: {
      async session({ session, token }) {
        session.address = token.sub
        session.user.name = token.sub
        session.user.image = 'https://www.fillmurray.com/128/128'
        return session
      },
    },
  })
}

Any help or idea would be really awesome ❤️

[Kipitup]

Following up on this. This really weird work around of setting NEXTAUTH_URL=http://127.0.0.1:3000 worked.

Can someone explain to me why ? This is black magic, lol

[0xAskar]

i have my secret token and its still not working for me

[LucaArgentieri]

Same issue on netlify

[wassienabe]

Had the same issue on Vercel; according to the docs you don't need to set NEXTAUTH_URL as VERCEL_URL will automatically be exposed. However, when I logged this it technically showed my production url, just not the right one.

It was logging <project-name>.vercel.app.

So I went to Vercel > Project > Settings > Domains and deleted the domain Vercel automatically creates from prod (<project-name>.vercel.app). I also explicitly added NEXTAUTH_URL to my Vercel env vars.

It is now working as expected.

[Ashkumar7]

same thing also happening with me after enabling under attack mode from cloudflare.

[Khalilsqu]

this worked for me too on production. but for development i have to revert back to localhost

[klausbadelt]

We have the same issue. The workaround NEXTAUTH_URL=http://127.0.0.1:3000 works here, but exposes some odd redirections from localhost to 127.0.01. I filed a bug #6171 .

[Paulino12]

hi there,
Just to add as well that been looking for answers and for some reasons NEXTAUTH_URL=http://127.0.0.1:3000 works as well

[kr-mustali]

what about in production? Im facing same issue in production

[ZeliosAriex]

You need to downgrade your node version, i've done it with the version 16.20.0 and its works! hope this helps ;)