Next-auth fails with Netlify deploy: next-auth GET /api/auth/session 400 CLIENT_FETCH_ERROR Unexpected token 'E' (Netlify deploy)

Netlify site name : https://inboxpirates.com/
Problem:

My next-auth works locally, but when I deploy it to Netlify I get this CLIENT_FETCH_ERROR when accessing anything (RouteGuard component calls useSession hook and pushes to /auth/signin if not authenticated && on non-public path).

GET https://website.com/api/auth/session 400 → Error: This action with HTTP GET is not supported by NextAuth.js

[next-auth][error][CLIENT_FETCH_ERROR] Unexpected token ‘E’, “Error: Thi”… is not valid JSON

POST https://website.com/api/auth/_log 400

Locally it calls http://localhost:4200/api/auth/session and returns 304 with {}.

Where the useSession hook is called:

_app > Session Provider session={session} > RouteGuard

Expected API returns as per documentation:

Client API | NextAuth.js

When called, getSession() will send a request to /api/auth/session and returns a promise with a session object, or null if no session exists.

REST API | NextAuth.js

Returns client-safe session object - or an empty object if there is no session. The contents of the session object that is returned are configurable with the session callback.

Session callback:

async session({ session, token, user }) {

  session.accessToken = token.accessToken
  session.user._id = token.sub
  session.user.name = token.name
  session.user.email = token.email
  if (token.login_provider) session.user.login_provider = token.login_provider
  return session

}

What I have already checked locally and on Netlify:

  • […nextauth].ts is correctly placed in /pages/api/auth folder
  • it is correctly named exactly as I have written above
  • NEXTAUTH_URL is correctly set (not using any custom basePath)
  • Using Next.js Runtime - v4.27.3 also sets this automatically, though it makes no difference how it is set
  • NEXT_PUBLIC_API_URL is correctly set (same url + /api)
  • NEXTAUTH_SECRET is correctly set
  • NextAuthOptions object’s pages: { signIn: ‘/auth/signin’ } is correct
  • /pages/auth/signin page is placed and named correctly
  • Credentials, Google and Facebook provider env vars are set correctly
"next": "11.1.0",

“next-auth”: “^4.6.1”,

What else should I check?

Been Googling, reading docs, re-reading docs and trying everything to no avail for a day now…

Please help /o\

Update:

  • did some more research and I don’t know if it matters, but the request on localhost is sent with cookies, while these cookies aren’t sent on the deployed version:

next-auth.csrf-token

next-auth.callback-url

Update 2:

  • getProviders does not work in getServerSideProps on Netlify because it doesn’t like SSR I guess

In /_next/static/chunks/pages/_app-fb9c175cc8f1a6f5.js I see

const n = new URL('http://localhost:3000/api/auth');

Hi, not sure how the snippet is related to the issue, do you mean the .env isn’t getting picked up?

In short,

https://inboxpirates.com/api/auth/session must return {}
like
https://inboxpirates.vercel.app/api/auth/session

https://inboxpirates.com/api/auth/csrf must return a CSRF token like
https://inboxpirates.netlify.app/api/auth/csrf

Both have the same code base, one is running on vercel one on netlify.

I’m not sure if the latest netlify next-js plugin broke it.

@Everkers helped us find a fix.

Solved the issue by upgrading to next@12.3.1 and next-auth@4.14.0