Hola compañeros programadores,
Estoy creando una aplicación nextJs usando next-auth para el inicio de sesión del usuario. Creé el archivo [...nextauth].js en "pages/api/auth" y un archivo signin.js en "pages/auth/", el código de estos archivos se escribe a continuación como referencia. el problema que tengo es que recibo constantemente el siguiente error cuando intento acceder a la página de inicio de sesión: "TypeError: Cannot convert indefinido or null to object"
a continuación se muestra una lista de las dependencias en el proyecto y sus versiones correspondientes:
"dependencias": { "@heroicons/react": "^1.0.5", "@tailwindcss/forms": "^0.3.4", "faker": "^5.5.3", "firebase": "^ 9.4.0", "siguiente": "más reciente", "próxima autenticación": "^4.0.0-beta.7", "reaccionar": "^17.0.2", "reaccionar-dom": "^17.0 .2", "tailwind-scrollbar-hide": "^1.0.4" },
[..nextauth].js código:
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 código:
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;los "proveedores" de registro de la consola muestran "nulo", por lo que creo que getProviders no funciona correctamente por algún motivo. ¿Alguna idea de por qué sucede esto?
Muchísimas gracias.
Lo arreglé moviendo getProviders al estado...
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> ))} </> ); };Tuve el mismo problema. Intenté registrar en la consola el resultado de await getProviders y no se pudo obtener porque estaba intentando obtener https://localhost:3000/api/auth/providers en lugar de http://localhost:3000/api/auth/providers.
Tenía NEXTAUTH_URL incorrecto en mi .env.local. Debería ser http://localhost:3000 no https://localhost:3000.
Encontré el mismo error. Se debió a que otra aplicación de reacción se ejecutaba en el mismo puerto...