TypeError: Cannot convert undefined or null to object | NextAuth

Question

I'm trying to do a SignIn with Nextauth. This is my code:

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

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>
          ))}
        </>
    );
}

export async function getServerSideProps() {
    const providers = await getProviders();

    return {
        props: {
            providers
        }
    }
}

export default signIn;

But I get this error:

error image

I saw someone who had a similar/same error as me. I've tried all the suggested solutions. That is the question:

Server Error : TypeError: Cannot convert undefined or null to object

When I try the solution with the green hook nothing happens. Not even an error.

The others also dont work.

What am I doing wrong??? Best wishes.

Answer 1

Add a null check like this:

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