skip to Main Content

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

2

Answers


  1. Chosen as BEST ANSWER

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


  2. check if providers is not null or undefined before calling Object.values(providers).

    e.g. {!!providers && Object.values(providers).map …

    Let me know if the issue still persists

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search