TypeError: URL constructor: /api/auth is not a valid URL with email provider

[kekoawong]

Environment

System:
  OS: macOS 12.7.1
  CPU: (8) x64 Intel(R) Core(TM) i5-8257U CPU @ 1.40GHz
  Memory: 60.43 MB / 8.00 GB
  Shell: 5.8.1 - /bin/zsh
Binaries:
  Node: 21.1.0 - /usr/local/bin/node
  Yarn: 4.0.1 - /usr/local/bin/yarn
  npm: 6.14.5 - /usr/local/bin/npm
  Watchman: 2023.11.06.00 - /usr/local/bin/watchman
Browsers:
  Chrome: 119.0.6045.199
  Edge: 119.0.2151.97
  Safari: 17.1
npmPackages:
  @auth/firebase-adapter: ^1.0.3 => 1.0.3 
  next: 14.0.0 => 14.0.0 
  next-auth: 5.0.0-beta.4 => 5.0.0-beta.4 
  react: 18.2.0 => 18.2.0 

Reproduction URL

https://github.com/kekoawong/tailwind-firebase-nextjs-referrel-system

Describe the issue

When signing into the email provider on this example link, the console will print out the following error: TypeError: URL constructor: /api/auth is not a valid URL.

This issue does not occur on localhost, and I have set the NEXTAUTH_URL env variables on vercel when deploying. I thought the issue should be fixed with the recent patch #9056 with the base URL defined in the signIn() function (with the redirect option set to false), but I am still experiencing issues.

I am calling the sign-in function in the file for my own custom sign-in page under app/auth/sign-in/page.tsx and am calling the signIn() function in line 74.

I call the function like this

  console.log("signing in user");
  const test = await signIn('email', { email: parsedEmail, callbackUrl, redirect: false });
  console.log("completed signing in user", test);
  setSuccess(true);

How to reproduce

1. Click "sign in" on the top right corner on the demo link here.
2. Enter the appropriate email and click "send magic sign-in link".
3. View the console error "TypeError: URL constructor: /api/auth is not a valid URL."

The email should still be sent, but the sign-in process is throwing an error.

Expected behavior

The sign-in process should not throw an error, and the interface should show that the email has been successfully sent.

[sirajtahra]

same issue

[manuganji]

The arguments for the call in that fix are invalid. I commented on that PR.

[hexcowboy]

does anyone have a workaround for this until it's fixed?

[remib18]

I'm having the same problem with the credential provider (version 5.0.0-beta.4).

I noticed a clearer error message in Safari:

TypeError: "http://localhost:3000/api/auth/signin" cannot be parsed as a URL relative to "/api/auth".

It looks like the issue is in the signIn function in next-auth/react on line 279:

const error = new URL(data.url, baseUrl).searchParams.get("error")

Not sure about this line's purpose, but maybe the parameters are wrong?

Hope this helps!

Edit: After checking the history of the file, it seems the problem was introduced in this PR : #9286

[remib18]

does anyone have a workaround for this until it's fixed?

So far, the only workaround is to catch the error. In my case, I reload the page to load the new session (because even tho there is an error, it still performs the authentication) and then if the user is logged, I redirect him.

[DevYemi]

i had to fallback to version 4.24.5 because of this issue

[hexcowboy]

here's an example of how to work around this issue

try {
  await signIn("email", {
    email,
    callbackUrl,
    redirect: false,
  });
} catch (error) {
  if (error instanceof TypeError) {
    if (
      error.message === "URL constructor: /api/auth is not a valid URL."
    ) {
      // auth was successful
    }
  } else {
    // auth actually failed for another reason
  }
}

[bwallberg]

To fix the issue ( until a new version is released ) you can use patch-package https://www.npmjs.com/package/patch-package to patch next-auth. That way you don't have to modify your own code to handle the issue.

Simply checking error.message won't work since different browsers can have different messages (ex. Safari doesn't have the message "URL constructor: /api/auth is not a valid URL."

1. npm install patch-package -D
2. add "postinstall": "patch-package" to your package.json scripts
3. Add the following in patches/next-auth+5.0.0-beta.4.patch ( or follow the instructions for patch-packages to automatically create the patch file by modifying the code in node_modules/next-auth/react.js )
4. npm install

diff --git a/node_modules/next-auth/react.js b/node_modules/next-auth/react.js
index 860adfe..564e853 100644
--- a/node_modules/next-auth/react.js
+++ b/node_modules/next-auth/react.js
@@ -154,7 +154,7 @@ export async function signIn(provider, options, authorizationParams) {
             window.location.reload();
         return;
     }
-    const error = new URL(data.url, baseUrl).searchParams.get("error");
+    const error = new URL(data.url).searchParams.get("error");
     if (res.ok) {
         await __NEXTAUTH._getSession({ event: "storage" });
     }

[DevYemi]

This has been solved in version 5.0.0-beta.5

[rjkush17]

This error not solve i am still getting it