TypeError in lib/parse-url.ts when NEXTAUTH_URL is not set and VERCEL_URL is used

[srijans38]

Description 🐜

I believe this has to do with how the URL api handles url strings. VERCEL_URL is set without "https://" or "http://". URL expects something like "https://abc.xyz" but gets "abc.xyz" and throws a TypeError.

Is this a bug in your own project?

No

How to reproduce ☕️

Deploy to Vercel without NEXTAUTH_URL and next-auth ^v4.0.0-beta.5

Screenshots / Logs 📽

Build error occurred
--
03:41:55.409 | TypeError [ERR_INVALID_URL]: Invalid URL: inhalt-dxxuzeeak-srijans38.vercel.app
03:41:55.409 | at new NodeError (internal/errors.js:322:7)
03:41:55.409 | at onParseError (internal/url.js:270:9)
03:41:55.409 | at new URL (internal/url.js:346:5)
03:41:55.410 | at parseUrl (/vercel/path0/node_modules/next-auth/lib/parse-url.js:11:16)
03:41:55.410 | at Object. (/vercel/path0/node_modules/next-auth/react/index.js:70:34)
03:41:55.410 | at Module._compile (internal/modules/cjs/loader.js:1085:14)
03:41:55.411 | at Object.Module._extensions..js (internal/modules/cjs/loader.js:1114:10)
03:41:55.411 | at Module.load (internal/modules/cjs/loader.js:950:32)
03:41:55.411 | at Function.Module._load (internal/modules/cjs/loader.js:790:12)
03:41:55.411 | at Module.require (internal/modules/cjs/loader.js:974:19) {
03:41:55.411 | type: 'NodeError',
03:41:55.411 | input: 'inhalt-dxxuzeeak-srijans38.vercel.app',
03:41:55.412 | code: 'ERR_INVALID_URL'
03:41:55.412 | }

Environment 🖥

System:
OS: Linux 5.10 Manjaro Linux
CPU: (6) x64 Intel(R) Core(TM) i5-8400 CPU @ 2.80GHz
Memory: 264.13 MB / 7.72 GB
Container: Yes
Shell: 5.8 - /usr/bin/zsh
Binaries:
Node: 14.18.1 - ~/.nvm/versions/node/v14.18.1/bin/node
Yarn: 1.22.11 - /usr/bin/yarn
npm: 6.14.15 - ~/.nvm/versions/node/v14.18.1/bin/npm
Browsers:
Brave Browser: unknown
npmPackages:
next: 12.0.1 => 12.0.1
next-auth: 4.0.0-beta.6 => 4.0.0-beta.6
react: 17.0.2 => 17.0.2

Contributing 🙌🏽

Yes, I am willing to help solve this bug in a PR

[balazsorban44]

Very interesting. v4 beta has been out for a while, and I assume many people managed to deploy to Vercel.

Here is an example that we are working on https://next-auth-example-git-ndom91-update-v4-nextauthjs.vercel.app/

based on this PR nextauthjs/next-auth-example#40 using beta.6, and it's deploying just fine.

BTW your environment section lists beta.6, but your reproduction mentions beta.5

the url parsing code hasn't changed in a very long time either, I believe it's the same as in v3. Is it only beta.5 or beta.6 that reproduces the issue for you?

[srijans38]

When NEXTAUTH_URL is set everything works fine. But when VERCEL_URL is used, it breaks. Both beta.5 and beta.6 should reproduce the bug as URL API is used in them. I guess VERCEL_URL needs to be prefixed with "https://". This should solve the issue. This can be tested in the browser console as well.

parsing code changed in beta.5 #2857

[balazsorban44]

You are right, I forgot about that I DID refactor it... 🤦‍♂️

we could make sure that the url is always prefixed here:

next-auth/src/lib/parse-url.ts

Line 16 in da991de

const _url = new URL(url ?? defaultUrl)

If url is defined, but it doesn't start with http,then prefix it. feel free to open a PR.

[balazsorban44]

The fix will be out in the next release (probably later today, or maybe tomorrow)

[NixBiks]

Any workaround until the new release?

[balazsorban44]

sorry, it got delayed. check out https://www.npmjs.com/package/patch-package

[NixBiks]

No worries - do you have any estimate on when you'll release next?

No pressure!

[balazsorban44]

🔜™. Want to merge #3101 and #3143 first, one of them still needs a review. probably next week some day.

[dar0xt]

You are right, I forgot about that I DID refactor it... 🤦‍♂️

we could make sure that the url is always prefixed here:

next-auth/src/lib/parse-url.ts

Line 16 in da991de

const _url = new URL(url ?? defaultUrl)

If url is defined, but it doesn't start with http,then prefix it. feel free to open a PR.

Hey, you should use || instead of ?? below code. Although the double question mark check if that value is null, undefined, and void, but empty string passed. In my case, VERCEL_URL = "", url parser cannot parse, so this is why I stacked.
Thanks for the useful library!

const _url = new URL(url ?? defaultUrl)

[igloo1505]

When NEXTAUTH_URL is set everything works fine. But when VERCEL_URL is used, it breaks. Both beta.5 and beta.6 should reproduce the bug as URL API is used in them. I guess VERCEL_URL needs to be prefixed with "https://". This should solve the issue. This can be tested in the browser console as well.

parsing code changed in beta.5 #2857

Dude you're a genius. I've been having issues with Next-auth for the past few days, including on a major deployment and I had to essentially hold it together with duct tape. I added some env variables to vercel through the CLI, and then pulled them back from vercel to sync the entire config and it automatically inserted:

VERCEL_URL=""

Removing that fixed things instantly.