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

Question

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:

https://next-auth.js.org/getting-started/client#getsession

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.

https://next-auth.js.org/getting-started/rest-api#get-apiauthsession

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

Answer 1

Fixed it by using exact versions of [email protected] and [email protected].

Found the solution here: https://answers.netlify.com/t/nexauth-returning-action-not-found/77779/5