NextAuth TypeError [ERR_INVALID_URL]: Invalid URL

Question

This error has been occurring whenever I am trying to render my signin page using nextAuth.js

signin.js

import { getProviders, signIn as SignIntoProvider} from 'next-auth/react'

// Browser... 
function signIn({providers}) {
  return (
    <>
      {Object.values(providers).map((provider) => (
        <div key={provider.name}>
          <button onClick={() => SignIntoProvider(provider.id)}>
            Sign in with {provider.name}
          </button>
        </div>
      ))}
    </>
  );
}

// Server side render
export async function getServerSideProps(){
    const providers = await getProviders();

    return{
        props: {
            providers,
        },
    };
}

export default signIn;

[...nextauth].js

import NextAuth from "next-auth"
import GoogleProvider from "next-auth/providers/google"

export default NextAuth({
  // Configure one or more authentication providers
  providers: [
    GoogleProvider({
      clientId: process.env.GOOGLE_CLIENT_ID,
      clientSecret: process.env.GOOGLE_CLIENT_SECRET,
    }),
    // ...add more providers here
  ],

  pages: {
    signIn: '/auth/signin',
  }
})

I have declared nextAuth url as

'NEXTAUTH_URL= http://localhost:3000'

Gazelle

It has been resolved. My nextAuth was running on the latest version while I had my package dependency as an older version! – Gazelle

How did you fix this error? When you say package dependencies, can you elaborate? Im facing the same issue. It is strange. This works on my local machine but not on a Virtual machine. Im using "next": "^12.1.1", "next-auth": "^4.3.2". I keep getting the invalid url messsage. When I take the link and paste it in a new browser window and get rid of the ?, the generic ugly auth page appears, but when I try to create a specific signIn(google) for ex, I keep getting an invalid url error. – Nary

you can update just change "next-auth": "^4.3.2" to "next-auth": "^4.3.4" save and run: npm install – Semiotic

Answer 1

I faced the same issue. It seems to be an issue with "next-auth": "^4.3.2".

I downgraded to version 4.3.1 and the error went away. Something to note in the future incase you just do npm install and it installs the latest version of next-auth.

Nary

It occurs on ^4.3.1 as well, I am using it. It is strange that it used to work before until today even though I didn't change anything in my code. – Venepuncture

Answer 2

I suggest to check if NEXTAUTH_URL is valid, or maybe other environment variables.

Also note that

• a non existing environment variable might be ok, but
• an empty string might be considered invalid

Like this in your .env file is invalid:

NEXTAUTH_URL=

Also try to delete the temporary /.next folder and restart the server. (make sure the next-server doesn't run while you delete the /.next folder, otherwise it might be created again while the server is still running.)

You also should inspect the full stack trace (your screenshot misses the most important parts).

Details

The error [ERR_INVALID_URL]: Invalid URL probably comes from node.js, when it tries to execute new URL( url ) inside next-auth, parse-url.

You may confirm if the error already comes if you simply import 'next-auth/react' (without any specific properties or methods). This should already throw, because next-auth/react internally uses process.env variables.

If I'm right, an "invalid value" is a value that would throw when passed to new URL( url ), e.g. an empty string. But also null or undefined should fall back to a valid default url inside parseUrl.

Other circumstances that I found where parseUrl would fail include invalid environment variables VERCEL_URL and NEXTAUTH_URL_INTERNAL, and the origin, pathname or url in Request objects.

Currajong

Thanks for this, I had no idea what the issue was and the error details aren't very helpful. – Edbert

Answer 3

I had this issue until I added the localhost to the allowed hosts on the google's console credentials page. Notice that it doesn't allow to use subdomains (I tried "http://subdomain.localhost:3000" - not allowed). Once I moved to "http://localhost:3000" (and set NEXTAUTH_URL to that value as well) - error is gone

Treed

Answer 4

I fix by clearing the browser's session and cookie,

The problem occurs when I try to create an error page while I change over something in [...next-auth].ts, I cannot log in anymore it always redirects me to auth/error page and it responds to me with 500 when it tries to get /auth/session and showing error TypeError [ERR_INVALID_URL]: Invalid URL.

Even though I reset my code, it still responded with the same result in spite I had never gotten this error before.

Venepuncture