Please Help: NextAuth Deployment to Vercel Resulting in api/auth/error | Next.js | Page 1

azure raptor Feb 2, 2023, 9:57 AM

#

Hello, I am trying to deploy my NextJs web app to Vercel, but for some reason anytime I try to login I end up getting to the page WEBSITE_URL/api/auth/error. It's extremely confusing because when I build it locally and run, everything works as expected. I am 100% certain that I have provided the right NEXT_AUTHURL to the environment variables but it still seems to not work 😦
It's been extremely frustrating because I can't seem to figure out why I keep getting the error, I've attached a screenshot of what the log is.

Environment variables:
NEXTAUTH_URL = https://NAME_OF_APP_HERE.vercel.app
NEXTAUTH_SECRET = SECRET_HERE

azure raptor Feb 2, 2023, 11:08 AM

#

:/

odd cosmos Feb 2, 2023, 2:44 PM

#

can you reproduce this in a minimal app?

#

it sounds like something I have faced before (some dejavu kicking in here) but I can't recall exactly what the bug was

#

(also, make sure all packages are at latest version)

azure raptor Feb 2, 2023, 2:44 PM

#

Did it involve the env variables ?

azure raptor Feb 2, 2023, 2:44 PM

#

odd cosmos (also, make sure all packages are at latest version)

Okay !

odd cosmos Feb 2, 2023, 2:44 PM

#

your env variables look fine

azure raptor Feb 2, 2023, 2:45 PM

#

I can make a minimal app, but it will take some time if it’s okay

odd cosmos Feb 2, 2023, 2:45 PM

#

no problems

azure raptor Feb 2, 2023, 2:45 PM

#

I’ll start by posting the code that I’m using in my …nextauth file for reference however

#

It works completely fine locally

#

But it’s only during deployment is when it fails

#

Particularly with vercel

odd cosmos Feb 2, 2023, 2:46 PM

#

an easy way to make a repro would be

npm create next-app@latest
set up next-auth according to the guide on their website
copy your next-auth related config over in small batches

#

then eventually the bug will show up, give us the repo link at that point

azure raptor Feb 2, 2023, 2:47 PM

#

Well here's the thing

#

It's more than likely going to work locally though when I run and build it

odd cosmos Feb 2, 2023, 2:48 PM

#

understood, just make a repo

azure raptor Feb 2, 2023, 2:48 PM

#

will do

odd cosmos Feb 2, 2023, 2:48 PM

#

btw on vercel you dont need NEXTAUTH_URL though

#

try removing that (although I doubt it will help much)

#

remove the URL var on vercel only

#

keep it in local .env.local

azure raptor Feb 2, 2023, 2:49 PM

#

Okay give me a moment

#

Thank you

azure raptor Feb 2, 2023, 3:10 PM

#

https://github.com/oogunjob/NEXTAUTH @odd cosmos

GitHub

GitHub - oogunjob/NEXTAUTH

Contribute to oogunjob/NEXTAUTH development by creating an account on GitHub.

#

All done

odd cosmos Feb 2, 2023, 3:22 PM

#

azure raptor Hello, I am trying to deploy my NextJs web app to Vercel, but for some reason an...

i didn't have this problem on vercel, but whenever i click on "sign in" i'm sent back to the / page without being signed in on vercel

#

on local it works fine

#

so not your problem but an equally interesting problem 🤔

azure raptor Feb 2, 2023, 3:24 PM

#

odd cosmos so not your problem but an equally interesting problem 🤔

Can I send you the link to the website I'm having trouble with?

#

That I've deployed on vercel

#

It uses the same nextauth file

odd cosmos Feb 2, 2023, 3:24 PM

#

azure raptor Can I send you the link to the website I'm having trouble with?

sure

#

https://test-project-joulev-pro.vercel.app is what i have deployed btw

Create Next App

Generated by create next app

azure raptor Feb 2, 2023, 3:25 PM

#

https://nextauthtestingdiscord.vercel.app/

Create Next App

Generated by create next app

#

Same

#

And it doesn't redirect me to the hello page

#

Smh

#

#

The env variables I've included

odd cosmos Feb 2, 2023, 3:26 PM

#

azure raptor And it doesn't redirect me to the hello page

yeap then same as my problem

#

lemme see whats wrong

azure raptor Feb 2, 2023, 3:26 PM

#

This is the other app

#

If you try to click on any, I get an api/auth/error

#

But again, it only works locally

odd cosmos Feb 2, 2023, 3:27 PM

#

btw you can go to the functions tab to see the live log

#

which very likely has some error messages printed there

#

they are very helpful

azure raptor Feb 2, 2023, 3:27 PM

#

None actually!

odd cosmos Feb 2, 2023, 3:27 PM

#

wait really?

azure raptor Feb 2, 2023, 3:28 PM

#

Yes, this is what's been so confusing for the past hours

#

#

This is all I see

odd cosmos Feb 2, 2023, 3:29 PM

#

wait a bit

azure raptor Feb 2, 2023, 3:29 PM

#

and it just stays like this even when I refresh or click new pages

#

But it remains like this

odd cosmos Feb 2, 2023, 3:29 PM

#

then go to your app and click on the button

#

then it will display something there

#

either 200 success or xxx error

#

if it still doesnt display something the only reason i can think of is your adblocker

azure raptor Feb 2, 2023, 3:31 PM

#

Okay

#

#

It looks like logs are coming in now

#

However, this isn't really helpful

#

[next-auth][error][CLIENT_FETCH_ERROR] 
https://next-auth.js.org/errors#client_fetch_error Unexpected token '<', "<!DOCTYPE "... is not valid JSON Object
error @ _app-37e2a24dd2f1b18c.js:1

#

I see this error in the console though

#

But Stackoverflow said this is harmless

#

When i read docs, when there's a [CLIENT_FETCH_ERROR], it means to add the ENV but it's already included

odd cosmos Feb 2, 2023, 3:34 PM

#

bug for your repo found

azure raptor Feb 2, 2023, 3:34 PM

#

???

odd cosmos Feb 2, 2023, 3:34 PM

#

probably not the bug about this client fetch error though

#

const isSecure = process.env.NODE_ENV === "production";

#

is correct

#

the other isSecure is not since the env var is not present in there

#

in function getSessionFromCookie inside [...nextauth].ts

azure raptor Feb 2, 2023, 3:35 PM

#

Does this line not work? const isSecure = process.env.NEXT_PUBLIC_BASE_URL?.startsWith("https://")

#

Where it checks if its a https

odd cosmos Feb 2, 2023, 3:36 PM

#

azure raptor Does this line not work? `const isSecure = process.env.NEXT_PUBLIC_BASE_URL?.sta...

you don't have NEXT_PUBLIC_BASE_URL so isSecure is always false

azure raptor Feb 2, 2023, 3:37 PM

#

Ah

#

Hmm

odd cosmos Feb 2, 2023, 3:37 PM

#

if you are referring to the vercel variable it's NEXT_PUBLIC_VERCEL_URL instead

azure raptor Feb 2, 2023, 3:37 PM

#

Wait

odd cosmos Feb 2, 2023, 3:37 PM

#

but tbf just check for NODE_ENV, works most of the time already

#

and simple

azure raptor Feb 2, 2023, 3:37 PM

#

Do I need to add that manually?

odd cosmos Feb 2, 2023, 3:37 PM

#

odd cosmos if you are referring to the vercel variable it's `NEXT_PUBLIC_VERCEL_URL` instea...

this one doesn't include the protocol though so it's useless

#

just check for NODE_ENV

azure raptor Feb 2, 2023, 3:37 PM

#

Okay

#

Let me try that

odd cosmos Feb 2, 2023, 3:38 PM

#

azure raptor Do I need to add that manually?

no, vercel automatically gives you that variable

#

along with some other handy ones

azure raptor Feb 2, 2023, 3:38 PM

#

Did it work for you when you tried it?

odd cosmos Feb 2, 2023, 3:38 PM

#

https://vercel.com/docs/concepts/projects/environment-variables#system-environment-variables

Vercel Documentation

Environment Variables

Adding and using Environment Variables with Vercel.

odd cosmos Feb 2, 2023, 3:38 PM

#

azure raptor Did it work for you when you tried it?

yes, https://test-project-joulev-pro.vercel.app works now

Create Next App

Generated by create next app

azure raptor Feb 2, 2023, 3:39 PM

#

TRYING NOW ON THE REAL VERSION

odd cosmos Feb 2, 2023, 3:40 PM

#

moral of the story: don't use too many env vars and always check you have provided the values for all used env vars before deploying

#

these are the variables deployed on the working version btw

#

if you need it

#

among them NEXTAUTH_SITE and NEXT_PUBLIC_NEXTAUTH_URL are unnecessary as well, probably there because you added them in desperation

azure raptor Feb 2, 2023, 3:41 PM

#

I'm still getting the error

odd cosmos Feb 2, 2023, 3:41 PM

#

well you need another reproduction repo then...

#

and above all, upgrade next-auth because i recall a bug relating to this issue in a previous version

#

latest next-auth version is 4.18.2

azure raptor Feb 2, 2023, 3:43 PM

#

I have "next-auth": "^4.18.7",

odd cosmos Feb 2, 2023, 3:44 PM

#

did you come from the future

#

ah oops i came from the past instead

#

latest version is 4.19.2

#

upgrade it to "next-auth": "^4.19.2"

#

and redeploy

#

without all the unnecessary env variables since they can unexpectedly mess with the built-in ones

azure raptor Feb 2, 2023, 3:45 PM

#

Most def

#

Question

#

I'm using yarn

#

yarn upgrade next-auth@^4.19.2

odd cosmos Feb 2, 2023, 3:46 PM

#

i use https://npmjs.com/npm-check-updates so i don't really remember those commands anymore sorry

npm

npm-check-updates

Find newer versions of dependencies than what your package.json allows. Latest version: 16.6.3, last published: 10 days ago. Start using npm-check-updates in your project by running npm i npm-check-updates. There are 471 other projects in the npm registry using npm-check-updates.

azure raptor Feb 2, 2023, 3:47 PM

#

redploying now

#

Sigh

#

This is ridiculous

#

Still not working :/

azure raptor Feb 2, 2023, 3:54 PM

#

odd cosmos among them `NEXTAUTH_SITE` and `NEXT_PUBLIC_NEXTAUTH_URL` are unnecessary as wel...

I'm only using NEXTAUTH_URL and NEXTAUTH_SECRET

#

as the env variables

#

But it doesn't make any sense how I'm still getting an api/auth/error

#

And it seems the literal only error that I'm getting is [next-auth][error][CLIENT_FETCH_ERROR]

odd cosmos Feb 2, 2023, 3:59 PM

#

azure raptor I'm only using NEXTAUTH_URL and NEXTAUTH_SECRET

remove NEXTAUTH_URL as well

azure raptor Feb 2, 2023, 4:01 PM

#

third times the charm (hopefully 🙏🏾 ) deploying

odd cosmos Feb 2, 2023, 4:01 PM

#

(and after each env change, please redeploy)

#

if it doesn't work, i have no choice but to ask you for a different reproduction repo

azure raptor Feb 2, 2023, 4:03 PM

#

I have to produce another branch 😭 I'll try to have this within the next 30 mins if you would still be able to help me, truly appreciated it

#

Unless you'd be okay being a temp contributor?

odd cosmos Feb 2, 2023, 4:04 PM

#

azure raptor I have to produce another branch 😭 I'll try to have this within the next 30 mi...

if i cant help today i will do it tmr (assuming no one else has already done that)

#

it's 00:04 here though so perhaps tmr is more likely

azure raptor Feb 2, 2023, 4:04 PM

#

Understandable

#

Sigh

#

Any thoughts on what you think it could be after seeing my code?

odd cosmos Feb 2, 2023, 4:05 PM

#

azure raptor Unless you'd be okay being a temp contributor?

to the github repo? i would like to decline though, i don't want to see things i'm not supposed to see

azure raptor Feb 2, 2023, 4:06 PM

#

You're good

#

It's public

#

This is the repository

odd cosmos Feb 2, 2023, 4:07 PM

#

try renaming /api (the root api dir) to something else

#

reason: if /api exists, it's likely vercel will take it for the serverless functions instead

#

and the pages/api won't work like you expect it to

azure raptor Feb 2, 2023, 4:09 PM

#

Nice

#

Redeploying

#

IT"S WORKING!!!

#

THANK YOU SOOOO MUCH @odd cosmos

odd cosmos Feb 2, 2023, 4:17 PM

#

nice

#

glad it worked

#

now time to clean up the mess

odd cosmos Feb 2, 2023, 4:17 PM

#

azure raptor THANK YOU SOOOO MUCH <@484037068239142956>

you exposed quite some secrets in those public repos you gave me

#

revoke all those secrets immediately

#

and generate new ones

azure raptor Feb 2, 2023, 4:17 PM

#

Yeah definiely rotating them

#

For sure, thank you

azure raptor Feb 2, 2023, 4:58 PM

#

@odd cosmos I just wanted to personally thank you again for your help today, it truly means a lot

#Please Help: NextAuth Deployment to Vercel Resulting in api/auth/error