Cannot convert undefined or null to object in Next.js

Hey I am building a login page with Next.js and next-auth
I have also written in providers array in [...nextauth].js.

But when I run the code

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

function Login({ providers }) {
  return (
    <div className="bg-black min-h-screen w-full flex justify-center items-center flex-col ">
      <img className="w-48 mb-5" src="/spot-it-aye.png" alt="" />

      {Object.values(providers).map((provider) => (
        <div key={provider.name}>
          <button
            className="bg-green-500 p-4 rounded-full hover:rounded-lg"
            onClick={() => signIn(provider.id, { callbackUrl: "/" })}>
            Login With {provider.name}
          </button>
        </div>
      ))}
    </div>
  );
}

export default Login;

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

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

I get the

Unhandled Runtime Error

TypeError: Cannot convert undefined or null to object.

Any help would be appreciated.image