NEXTAUTH_URL Warning

[masnwilliams]

Hello! I recently moved my environment variables to be controlled by Vercel and then used vercel pull to get the latest version of them.

This is now resulting in this warning:

[next-auth][warn][NEXTAUTH_URL] 
https://next-auth.js.org/warnings#nextauth_url

I have NEXTAUTH_URL and VERCEL_URL filled in with http://localhost:3000.

I am not sure what the problem is. Any help would be greatly appreciated.

[ChrisB007]

Having same issue

[momotofu]

Same here. I recently migrated from Next-Auth V3 to V4. Everything seems to be functioning normally, except for this error. I've also verified that the environment variables NEXTAUTH_URL and VERCEL_URL are assigned http://localhost:3000.

[momotofu]

I found that Next-Auth is checking for the host property and the req object in [...nextauth].ts. The reason this error is thrown is because host is undefined.

See the source code here: https://github.com/nextauthjs/next-auth/blob/main/packages/next-auth/src/core/lib/assert.ts#L47

The host property isn't declared on import type { NextApiRequest, ... } from 'next' so maybe this is a bug? Or is an warning unrelated to NextJS?

[markflorkowski]

Seems like removing all VERCEL_ env vars from the .env you pull from vercel makes the warning go away. Haven't tracked down which one in particular is causing the issue though.

Seems to be specifically having VERCEL="1" causes the error to come up

[markflorkowski]

As a workaround -- If you manually define a VERCEL environment variable for development in your Vercel project with an empty value, the warning does not appear

[markflorkowski]

Pretty sure this is the offending line of code:

next-auth/packages/next-auth/src/jwt/index.ts

Line 73 in 0d54170

!!process.env.VERCEL,

[JoeRall]

@markflorkowski - Removing Vercel="1" is a nice way to get rid of the warning.

It looks like the detect-host function is ultimately responsible for this issue.

next-auth/packages/next-auth/src/utils/detect-host.ts

Line 4 in 2469e44

if (process.env.VERCEL) return forwardedHost

Detect host function checks for that env variable, assumes the code is running on Vercel and returns the forwarded host. When running locally, this is empty. @momotofu, thanks for showing where the assertion happens.

I wonder if that function should check for NEXTAUTH_URL and fallback to the Vercel forwarded host. This would allow next-auth specific configuration to take precedence over platform specific hooks instead of the other way around. Just an idea.

[ChristianIvicevic]

I've noticed that behavior as well. The use-case I have is that disabled the Git integration of Vercel with GitHub in favor of the Vercel CLI in the GitHub workflows. Within the script I do a vercel pull --environment=production prior to building. Since the respective env file contains a bunch of VERCEL_ in addition to a VERCEL variable the NextAuth package is really having a hard time.

Usually NEXTAUTH_URL is set to VERCEL_URL should that be defined. However if NEXTAUTH_URL isn't explicitly set and VERCEL_URL is set to the empty string (after pulling the variables) Next.js itself fails the build process with an Invalid URL error during the final step where the built output is checked.

My current workaround is to pull the variables and apply the following script in the pipeline to remove all Vercel variables:

const envfile = require('envfile');
const fs = require('fs');
const path = require('path');

(() => {
  const envPaths = [
    path.join(__dirname, '..', '.vercel', '.env.production.local'),
    path.join(__dirname, '..', '.vercel', '.env.preview.local'),
    path.join(__dirname, '..', '.vercel', '.env.development.local'),
    path.join(__dirname, '..', '.env'),
  ];
  envPaths
    .filter((filePath) => fs.existsSync(filePath))
    .forEach((filePath) => {
      const file = fs.readFileSync(filePath);
      const config = envfile.parse(file.toString());
      const fixedConfig = Object.entries(config)
        .filter(([key]) => !key.startsWith('VERCEL'))
        .reduce((obj, [key, value]) => ({ ...obj, [key]: value }), {});
      fs.writeFileSync(filePath, envfile.stringify(fixedConfig));
    });
})();

Basically the URL handling within the library is really difficult to understand as it's not easy in the first place to handle all environments correctly.

[officialrajdeepsingh]

NEXTAUTH_URL is the canonical URL of your site.

for development, NEXTAUTH_URL looks like

NEXTAUTH_URL=http://localhost:3000/

for production, NEXTAUTH_URL looks like

NEXTAUTH_URL=http://officialrajdeepsingh.dev

Read more about NEXTAUTH_URL details of docs
https://next-auth.js.org/configuration/options

[Nezo96]

Worked for me.

[Me-JJ]

**I correctly added NEXTAUTH_URL, but the warning still appears.**

[Raff1010X]

Please set it in your .env file. - https://next-auth.js.org/warnings

Maybe simply add ".env" file in project folder with: "NEXTAUTH_URL=http://localhost:3000" and this will solve [next-auth][warn][NEXTAUTH_URL] warning.

Try it and give a reply.

[binodbastola007]

NOT SOLVED

[smzm]

What worked for me :

After becoming sure about setting NEXTAUTH_URL=http://localhost:3000 inside .env file, I change the fetch inside authorize function like below :

async authorize(credentials) {
        const res = await fetch(process.env.NEXTAUTH_URL + '/api/login', {           
             // ...
          }),
        });

[kartik-bhandari]

write this in your .env file if you are in development
NEXTAUTH_URL="http://localhost:3000/"

change the link if you are in production

[leitel98]

how can you change that in production?

[deep231w]

dude i fixed my code by shift the .env from apps to root folder of nextjs

[ormartins01]

Aqui resolveu!

[achahboune]

how i m using docker deplyment option

[fritz-sport-ecommerce]

use node v21.6.2 solve my problem

[deep231w]

Just move youre .env file to nextapps root directory