Error: Cannot convert undefined or null to object | NextAuth

Question

I am trying to do a custom page for sign in with google using NextAuth and firebase, and this is what happend.

api/auth/[...nextauth]/route.js 👇

import NextAuth from "next-auth/next"
import GoogleProvider from "next-auth/providers/google"

export const authOptions = {
  providers: [
    GoogleProvider(
       {
        clientId: process.env.GOOGLE_CLIENT_ID,
        clientSecret: process.env.GOOGLE_CLIENT_SECRET
       }
    )
  ],
  pages: {
    signIn: '/auth'
  }
}


const handler = NextAuth(authOptions);

export { handler as GET, handler as POST }

And this is the custom page auth/page.js 👇

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

export default function SignIn({ providers }) {
  return (
    <>
      {Object.values(providers).map((provider) => (
        <div key={provider.id}>
          <button onClick={() => signIn(provider.id)}>Sign in with {provider.name}</button>
        </div>
      ))}
    </>
  );
}

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

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

What i did wrong ??

i tried next auth docs and didnt help

Answer 1

here is the solution using the new method | NextJS 13 👇 https://github.com/odaytelbany/instagram-clone/issues/1