0
111
Visualizaçõesno puedo recibir datos en proveedores
Estoy tratando de crear una página de inicio de sesión usando nextjs y spotify js pero encuentro el siguiente error
A continuación se muestra el siguiente código
import React from 'react' import { getProviders , signIn } from "next-auth/react" function Login({ providers }) { return ( <div> {Object.keys(providers).map((provider) => { <button>Login With {provider.name}</button> })} </div> ) } export default Login; export async function getServerSideProps() { const providers = await getProviders() return { props : { providers, } } }Y debajo está el código para los proveedores en [...nextauth].js
export default NextAuth({ // Configure one or more authentication providers providers: [ SpotifyProvider({ clientId: process.env.NEXT_PUBLIC_CLIENT_ID, clientSecret: process.env.NEXT_PUBLIC_CLIENT_SECRET, authorization: LOGIN_URL, }), // ...add more providers here ], })3 Respostas
Responde à pergunta0
Como lo veo:
import React from 'react' import { getProviders , signIn } from "next-auth/react" function Login({ providers }) { return ( <div> {providers.map((provider) => { <button>Login With {provider.name}</button> })} </div> ) } export default Login; export async function getServerSideProps() { const providers = await getProviders() //check if you have some data here console.log(providers) return { props : { providers: providers, } } }0
Asegúrese de que su API nextjs apunte a la URL de alojamiento actual. Por ejemplo: http://localhost:3000 . ¡De lo contrario, no funcionará!
0
Supongo que no obtuvo ningún proveedor o el objeto de su providers no está undefined en el renderizado inicial. Puede usar Object.keys(providers || {}) en su lugar para asegurarse de que siempre sea un objeto.
Además, Object.keys devuelve una matriz de cadenas de claves en el objeto, lo que significa que el provider será una cadena y no tendrá una propiedad de name . Si está iterando sobre Object.keys , necesitará usar providers[provider].name en lugar de provider.name nombre