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

Support
1

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
2

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

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

Screen Shot 2022-10-22 at 4.00.59 pm
Screen Shot 2022-10-22 at 4.00.59 pm1542×668 135 KB

3

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.

4

@Everkers helped us find a fix.

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

5

Hey @goforbg, would you be willing to share what version of the following you’re using?

  • @netlify/plugin-nextjs
  • react
  • node

I recently ran into this same issue after a recent deploy and can’t seem to up- or downgrade my way out of it.

6

  1. @netlify/plugin-nextjs:
    Version 4 (v4.29.2)

  2. “react”: “18.0.0”

  3. I don’t see a node dependency on my package.json.

Next js from package.json:
“next”: “12.3.1”

Note: I think netlify messed it up again, because the stackoverflow answer I put started getting likes.

1 Like
7

Yeah I think you’re right @goforbg. Thanks for the versions!

I posted my solve over here as well: Next-Auth - Error: This action with HTTP GET is not supported by NextAuth.js - #4 by franknoirot

…but the gist is that I just bulk upgraded all my project’s packages to their latest possible versions and that resolved the issue:

  • “next”: “^13.0.6”
  • “next-auth”: “^4.18.5”
  • “react”: “^18.2.0”
  • “react-dom”: “^18.2.0”
  • “@netlify/plugin-nextjs”: “^4.29.3”

In addition, I set my NODE_VERSION to 16.13.1. Not super fun but it worked. It seemed to me to be a misaligned combination set of versions between the packages you discussed.

1 Like
8

Hi @franknoirot, :wave:t6: Thanks for coming back and letting us know what helped you resolve your issue. We appreciate the feedback. Kudos to @goforbg, for providing additional feedback you provided. We appreciate your collaboration in the community. Happy building :rocket: