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 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.