NextAuth Environment Variable Needs To Be Public? TypeScript nextJS Project!

[jrdurant]

Question 💬

Hello everyone,

I have been stuck for hours on this issue! I have a nextAuth using app that works perfectly fine locally, but when I deploy it, it does not seem to see the NEXTAUTH_URL variable, and it redirects me to localhost:3000, as opposed to my domain. I feel like it's not accepting my environment variable. I verified other variables do work within the same file.

I fixed similar issues for other variables by making them public, but of course that's not an option for NEXTAUTH_URL.

I tried very hard to find a solution to this, but I couldn't find anything in other threads. Sorry in advance if I missed something! Please help!

EDIT: I am deploying on Amazon Web Services, not Vercel. My NEXTAUTH_URL is my domain with a /map at the end (we want it to go to a page, not the base URL, on sign in.)

My code for sign in is in a functional component. I cannot figure it out!

<GoogleButton style={{ width: '100%' }} onClick={async () => { await signIn('google', { callbackUrl: '/map', }); }} />

How to reproduce ☕️

<GoogleButton style={{ width: '100%' }} onClick={async () => { await signIn('google', { callbackUrl: '/map', }); }} />

Contributing 🙌🏽

No, I am afraid I cannot help regarding this

[balazsorban44]

That sounds like an issue with your deployment service. We only default to localhost when NEXTAUTH_URL isn't available. Double check that you configured it correctly in your deployment.

[jrdurant]

I have the NEXTAUTH_URL in my .env.production file. Does it need to be in a different one?

[jrdurant]

In the meantime I have tried to export it in my next.config.js. Takes a bit for this app to build - I'll mark it clearly in my question if that's the answer! Thanks for your time.

[jrdurant]

Unfortunately, I am still being redirected to localhost:3000. I had my production app console.log the value of the environment variable. It is indeed the value of the NEXTAUTH_URL, which is my production domain. I am lost!

[jrdurant]

For some more information, we are using kubernetes/AWS and docker. Like I said, I can have the browser console.log the NEXTAUTH_URL but it is seemly not accessible by next auth... Please help!

[jrdurant]

All, the answer for me here was making sure my docker image was built after specifying the environment variable via the command line.

[vishalrajole]

do we have a fix for this? I am also facing similar issue with aws amplify. I do have NEXTAUTH_URL specified in amplify environment variables but I am getting

https://next-auth.js.org/errors#client_fetch_error invalid json response body at https://APP-URL.amplifyapp.com/api/auth/session reason: Unexpected token < in JSON at position 0 {
error: {
message: 'invalid json response body at https://APP-URL.com/api/auth/session reason: Unexpected token < in JSON at position 0',
stack: 'FetchError: invalid json response body at https://APP-URL/api/auth/session reason: Unexpected token < in JSON at position 0\n' +
 '    at /node_modules/next/node_modules/node-fetch/lib/index.js:272:32\n' +
'    at processTicksAndRejections (node:internal/process/task_queues:96:5)',
name: 'FetchError'
},
path: 'session',
message: 'invalid json response body at https://APP-URL/api/auth/session reason: Unexpected token < in JSON at position 0'
}

[jrdurant]

That almost looks like you have forwarding happening in your aws cluster. On mine, I had any route with 'api' being sent to my express server. Make sure you don't have something like that, or your nextauth request may be getting forwarded to your server!

If not, and you think your variable is not being exposed, be sure to build your docker image with the proper variables in the command line.