Client fetch error when deploying via Vercel but NEXTAUTH_URL seems correct

[dextermb]

Hey,

I'm getting a weird error when attempting to use NextAuth via Vercel – I've used it plenty of times in the past so I'm a bit stumped.

It bubbles up as a CLIENT_FETCH_ERROR with 404. Seems like all the /api/auth/[...nextauth] endpoints are returning 404.

{
  client: true,
  error: {
    message: "The string did not match the expected pattern.",
    name: "SyntaxError",
    stack: "json@[native code]↵p@https://<redacted>/_next/static/chunks/pages/_app-f6ddc649d7593eee.js:29:737…",
    url: "/api/auth/session"
  }
}

I created a /api/health endpoint to dump out NEXTAUTH_URL and it matches the domain I'm using for testing. The code works perfectly fine locally (using NEXTAUTH_URL=http://localhost:3000).

Looking under the Vercel logs I don't seem to get any information about the error.

---

Any ideas on the best way to debug this?

[dextermb]

This was an interesting one. I had my API related utils (such as middleware, endpoint helpers, etc) under /api and obviously had the API endpoints under /pages/api.

Seems like any endpoints that were defined such as my /pages/api/health (and test endpoint /pages/api/auth/test) worked as expected, but /pages/api/auth/[...nextauth].ts were not getting picked up when on Vercel.

I've moved my API utils into /utils/api and now it seems to work as expected.

[ee99ee]

I ran into this same issue. Turns out my load balancer was redirecting /api to another application instead of the nextjs app.