CODEWITHSUNDEEP
reactjstypescriptnext.jsnext-auth
hacker-root
hacker-root

Reputation: 67

TypeError: Cannot convert undefined or null to object | NextAuth

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.

Upvotes: 2

Views: 932

Answers (2)

Bohdan
Bohdan

Reputation: 11

For me, this helps:

import { SessionProvider } from "next-auth/react";
export default function App({
  Component,
  pageProps: { session, ...pageProps },
}) {
  return (
    <SessionProvider session={session}>
      <Component {...pageProps} />
    </SessionProvider>
  );
}

Upvotes: 1

Balagoni Harish
Balagoni Harish

Reputation: 106

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

Upvotes: 0

Related Questions