The default port for local development is not parameterized and ignores process.env.PORT

[ChristianIvicevic]

Question 💬

I am using NextAuth in a monorepo with nx with the implication that it's automatically configured to run the server on port 4200. With the pull environment variables from Vercel via the CLI I noticed that NextAuth is falling back to the default URL as denoted here:

next-auth/packages/next-auth/src/react/index.tsx

Lines 43 to 63 in aedabc8

	// This behaviour mirrors the default behaviour for getting the site name that
	// happens server side in server/index.js
	// 1. An empty value is legitimate when the code is being invoked client side as
	// relative URLs are valid in that context and so defaults to empty.
	// 2. When invoked server side the value is picked up from an environment
	// variable and defaults to 'http://localhost:3000'.
	const __NEXTAUTH: NextAuthClientConfig = {
	baseUrl: parseUrl(process.env.NEXTAUTH_URL ?? process.env.VERCEL_URL).origin,
	basePath: parseUrl(process.env.NEXTAUTH_URL).path,
	baseUrlServer: parseUrl(
	process.env.NEXTAUTH_URL_INTERNAL ??
	process.env.NEXTAUTH_URL ??
	process.env.VERCEL_URL
	).origin,
	basePathServer: parseUrl(
	process.env.NEXTAUTH_URL_INTERNAL ?? process.env.NEXTAUTH_URL
	).path,
	_lastSync: 0,
	_session: undefined,
	_getSession: () => {},
	}

Unfortunately this invokes the parseUrl function that asserts the default is always running on port 3000 ignoring anything else:

next-auth/packages/next-auth/src/utils/parse-url.ts

Line 16 in aedabc8

const defaultUrl = new URL("http://localhost:3000/api/auth")

This is causing different conflicts and I was curious whether this should be adjusted to respect process.env.PORT if it's set and then fall back to port 3000.

How to reproduce ☕️

Run the development server on any different port.

Contributing 🙌🏽

Yes, I am willing to help answer this question in a PR

[coreygreenwald]

Having exactly the same problem today - so please let me know if you know any work arounds!

[ChristianIvicevic]

You can temporarily use tools such as patch-package to get it working for the time being.

[benderillo]

Why is this not a bug report?
I spent an hour today trying to understand why my app suddenly stopped working until I found that NextAuth was making requests to localhost:3000 while my app was running on the port 3001.

[mryechkin]

Just checking out Next Auth for the first time, and ran into this issue almost immediately after following the example. I'm testing this in a Turborepo project, and the app is running on localhost:3001 in dev.

Is there really no way to change the default port?

[najibghadri]

Interesting that this is still an issue 2024. Is it that hard to put that PORT env var in the place of that '3000'?

[Y80]

If your local .env(or .env.local, .env.development...) file set VERCEL, make if (process.env.VERCEL) is true, in development, detectHost() always return fowardedHost=undefined(never run return process.env.NEXTAUTH_URL), because of headers['x-fowarded-host'] isundefined 🥲.

[jorgeperezn]

For anyone still having this issue, I managed to solved it by setting the 4200 port within project.json file as below:

"serve": {
      "executor": "@nrwl/next:server",
      "defaultConfiguration": "development",
      "options": {
        "buildTarget": "admin:build",
        "dev": true,
        "port": 4200
      },
    ...
 }

NextAuth.js will use the same port as your Next.js app by default, so if you change the port for your Next.js app, NextAuth.js will also use that port for authentication requests. The redirect URLs that NextAuth.js uses will include the port number that you set in your next.config.js or workspace.json file, so the authentication requests will use the same port as your app.

Note that if you're using a custom callback URL for your provider (such as http://localhost:4200/api/auth/callback/google), you will need to update the callback URL to include the new port number as well.

Please let me know if this works!

[david-gettins]

That didn't work for me, but setting it to 3000 did.

[rendydig]

For anyone still having this issue,
I try to solved it by setting the .env NEXTAUTH_URL
example of port 3001:
NEXTAUTH_URL=http://YourHost:3001
it was explained in here
https://next-auth.js.org/configuration/options#nextauth_url

[lukehillonline]

This solved the problem for me, thank you.

[ngotrongphuc]

It's really THAT simple, thank you

[ghidosoft]

Actually it ignores the port configured in nextjs:

I'm running next with next dev -p 6005

I'm navigating to http://localhost:6005/api/auth/signin but the buttons send me to http://localhost:3000/api/auth/signin/mycustomprovider

I tried to set NEXT_PUBLIC_BASE_URL=http://localhost:6005 but nothing changed.

The only way is by using NEXTAUTH_URL=http://localhost:6005 but I think that's suboptimal.

[alpapan]

if anyone still has an issue, as per the next.js config definition:

Example, to set it to locahost:3001

//next.config.mjs

/** @type {import('next').NextConfig} */
const nextConfig = {
  env: {
    NEXTAUTH_URL: 'http://localhost:3001',
    NEXT_PUBLIC_BASE_URL: 'http://localhost:3001',
  },
};

export default nextConfig;

Still need to start npm with -p 3001

A .env is not required.

[bpobocha]

I've been struggling with this problem for so long... 😤 I haven't found any correct solution yet, and adding a port to NEXTAUTH_URL doesn't work for me. This only occurs on the built production version.

✨ If anyone is looking for a temporary solution then just edit this file:
/node_modules/next-auth/utils/parse-url.js

There's this line:
const defaultUrl = new URL("http://localhost:3000/api/auth");

Change this port to the target port and then everything will start working. Example:
const defaultUrl = new URL("http://localhost:4000/api/auth");

And of course you have to do it again after you have done the package installation (pnpm install)

Obviously this is not the right solution. I hope that an official fix will be released soon, because it is very annoying when you host several nextjs apps on one VPS and each one runs on a different port.