Production only CLIENT_FETCH_ERROR for http://localhost:3000/api/auth/csrf

[tomitrescak]

Question 💬

Hi, I'm getting the following error when building my app in production:

[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:5570:34)\n' +
      '    at node:internal/deps/undici/undici:5896:42\n' +
      '    at node:internal/process/task_queues:140:7\n' +
      '    at AsyncResource.runInAsyncScope (node:async_hooks:202: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'
  },
  url: 'http://localhost:3000/api/auth/csrf',
  message: 'fetch failed'
}

This is my .env:

NEXTAUTH_SECRET=***
NEXTAUTH_URL=http://localhost:3000/

The url opens in browser:

I tried setting the cors and still there is a problem:

import { NextApiRequest, NextApiResponse } from 'next';
import NextAuth from 'next-auth';
import { authOptions } from './options';

const corsOptions = {
  origin: '*',
  methods: ['GET', 'POST', 'PUT']
};

const handler = (req: NextApiRequest, res: NextApiResponse) => NextAuth(req, res, authOptions);
export default cors(corsOptions)(handler);

I'm desperate to know what's wrong ;(

How to reproduce ☕️

I do not have the repro unfortunately as this relates to production only.

Contributing 🙌🏽

Yes, I am willing to help answer this question in a PR

[tomitrescak]

If anybody bumps into this issue, then the reason is ordering of domain resolutions in favor of IPV6 in Node 17+

nodejs/undici#1602

To make it work change

NEXTAUTH_URL=http://localhost:3000/

to

NEXTAUTH_URL=http://127.0.0.1:3000/

[robmarshall]

This caused me almost 3 days of misery. Thanks!

[kr-mustali]

what about in production? Im facing same issue in production but working in local