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
here is the solution using the new method | NextJS 13 👇 https://github.com/odaytelbany/instagram-clone/issues/1
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