TypeError: Cannot convert undefined or null to object | NextAuth

Issue

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.

Solution

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

Answered By - Balagoni Harish