Vercel deploy keeps throwing client fetch error

[cdfornari]

Environment

System:
OS: macOS 12.3.1
CPU: (10) arm64 Apple M1 Pro
Memory: 12.02 GB / 32.00 GB
Shell: 5.8 - /bin/zsh
Binaries:
Node: 16.13.1 - /usr/local/bin/node
Yarn: 1.22.15 - /usr/local/bin/yarn
npm: 8.1.2 - /usr/local/bin/npm
Browsers:
Chrome: 100.0.4896.127
Safari: 15.4
npmPackages:
next: 12.1.4 => 12.1.4
next-auth: ^4.3.1 => 4.3.1
react: 18.0.0 => 18.0.0

Reproduction URL

https://github.com/cdfornari/FornariShop

Describe the issue

I deployed my project to Vercel following the steps you posted on your website, I did not set NEXTAUTH_URL, just NEXTAUTH_SECRET, and I made sure I'm exposing system environment variables on Vercel. When I go to the login page, it shows me there's an error.
Here's the source code: https://github.com/cdfornari/FornariShop

How to reproduce

Go to https://fornari-shop.vercel.app and enter the login page

Expected behavior

Not to have an error, as it works in development

[cdfornari]

Update: part of the problem is getProviders() func that returned 404 error, also there are 404 errors getting the session and getting /api/auth/_log.
I commented getProviders func and now I can go to the login page, but every time I log in using Credentials Provider it redirects me to /api/auth/error, no matter if I send correct or incorrect credentials.

[nahuelDev23]

same error...

[FemtDeveloper]

same issue

[callum-gander]

Any updates on this? Did anyone solve this? I've been experiencing the same issue except the message beneath CLIENT_FETCH_ERROR is JSON.parse: unexpected character at line 1 column 1 of the JSON data but everything else is the same

[Moxmoon]

I encountered the same problem, did you solve it?

[vzsky]

I also have this problem. They said on the doc that make sure you define NEXTAUTH_URL variable correctly. If you use Vercel to host, then the content of the variable should be only the url without quote. For example, https:project.vercel.app.

After checking this, I still got the error. I got this solved by changing the [...nextauth].ts file to a more simple version. Here is the version that is simple enough for mine to run...

import * from 'somewhere'

const THIRTY_MINUTES = 30 * 60

export default NextAuth({
  session: {
    strategy: 'jwt',
    maxAge: MaxSessionAge,
    updateAge: THIRTY_MINUTES
  },
  callbacks: {
    async signIn ({ user }) {
      if (isAllowedToSignIn(user.email)) return true
      return false
    },
    async session ({ session, user, token }) {
      return {...session, user: token}
    },
  },
  providers: [
    EmailProvider({
      server: {
        host: process.env.EMAIL_SERVER_HOST,
        port: process.env.EMAIL_SERVER_PORT,
        auth: {
          user: process.env.EMAIL_SERVER_USER,
          pass: process.env.EMAIL_SERVER_PASSWORD
        }
      },
      from: process.env.EMAIL_FROM
    })
  ],
  adapter: MongoDBAdapter(clientPromise),
  secret: process.env.SECRET
})

turn out the error occurs when I tried adding this callback

async jwt({ token }) {
    let role:Role = 'user'
    if (!token.email) throw Error('no email provided with token')
    let user = await getUser(token.email)
    if (user?.isAdmin) role = 'admin'
    return {...token, role}
  }

[vzsky]

Then I added the callback again, but differently, and it worked!

This one works

async jwt({ token }) {
      let role:Role = 'user'
      if (!token.email) throw Error('no email provided with token')
      const client = await clientPromise
      const collection = client.db().collection('users')
      const user = await collection.findOne({email:token.email})
      if (user?.isAdmin) role = 'admin'
      return {...token, role}
 }

The only difference is that the first one uses mongoose, and the second one uses this approach from https://github.com/vercel/next.js/tree/canary/examples/with-mongodb.

and I have no idea why it worked...

[TimMTech]

Vercel Next.js deployment is the worst piece of garbage I have ever encountered. PLEASE AVOID!!

[Moxmoon]

I encountered the same problem, it is work in the development environment, but not work in the production.

[ryanhell]

Such a wide spread and visible problem with auth and it concerns me to consider this as a solution for serious clients

[jackkingham-au]

✅ Deploy to Netlify - NEXTAUTH_URL picked up instantly!

Not sure why, but appears to be something wrong with Vercel picking up the NEXTAUTH_URL, when using the CredentialsProvider.

Hosting on Vercel redirects my login to /api/auth/error whether I log in correctly, or incorrectly. Hosting on Netlify works as intended, just as it does on localhost.

[youngheart12]

To any one facing this issue please cross check there don't exist any folder named api in root directory to me this was the issue once renamed it to endpoints it just worked perfectly fine.