Hello fellow programmers,
I am building a nextJs app using next-auth for user sign-in. I have created the [...nextauth].js file in "pages/api/auth" and a signin.js file in "pages/auth/", the code for these files is written below for reference. the problem I am having is that I am constantly getting the following error when I try to access to signin page: "TypeError: Cannot convert undefined or null to object"
below is a list of the dependencies in the project and their corresponding versions:
"dependencies": { "@heroicons/react": "^1.0.5", "@tailwindcss/forms": "^0.3.4", "faker": "^5.5.3", "firebase": "^9.4.0", "next": "latest", "next-auth": "^4.0.0-beta.7", "react": "^17.0.2", "react-dom": "^17.0.2", "tailwind-scrollbar-hide": "^1.0.4" },
[..nextauth].js code:
import NextAuth from "next-auth";
import GithubProvider from "next-auth/providers/github";
export default NextAuth({
// Configure one or more authentication providers
providers: [
GithubProvider({
clientId: process.env.GITHUB_ID,
clientSecret: process.env.GITHUB_SECRET,
}),
],
pages: {
signIn: "/auth/signin",
},
});signin.js 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(context) {
const providers = await getProviders();
return {
props: {
providers,
},
};
}
export default signIn;console logging "providers" displays "null" so I believe getProviders is not working properly for some reason. Any idea why this is happening?
Thank you very much.
I've fixed that by moving getProviders into state...
const SignIn = () => {
const [providers, setProviders] = useState(null);
useEffect(() => {
(async () => {
const res = await getProviders();
setProviders(res);
})();
}, []);
return (
<>
{providers &&
Object.values(providers).map((provider) => (
<div key={provider.name}>
<button
onClick={() => {
signIn(provider.id);
}}
>
Sign in with {provider.name}
</button>
</div>
))}
</>
);
};
I had the same issue. I tried console logging the result of await getProviders and it couldn't fetch as it was trying to fetch https://localhost:3000/api/auth/providers instead of http://localhost:3000/api/auth/providers.
I had the wrong NEXTAUTH_URL in my .env.local. It should be http://localhost:3000 not https://localhost:3000.
I encountered same error. It was due to having other react application running on the same port ...