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'

Answer 1

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.