es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

No se puede recibir datos en los proveedores.

15 Jun, 2023 Programación

Estoy tratando de hacer una página de inicio de sesión usando Next.js y Spotify.js pero me encuentro con el siguiente error:

error encontrado

A continuación se muestra el 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 a continuación va 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
    ],
})
Tags:  , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    El error encontrado parece estar relacionado con el uso de SpotifyProvider en el arreglo providers dentro del archivo nextauth.js.

    SpotifyProvider necesita tener un valor de autorización válido, que en este caso está establecido como LOGIN_URL. No está claro cuál es el valor de LOGIN_URL, por lo que es posible que este sea la causa del error.

    Para resolver este problema, intenta reemplazar LOGIN_URL con la URL de autorización adecuada para Spotify. Puedes encontrar más información sobre la documentación de la API de Spotify sobre cómo obtener esta URL.

    Además, podría ser útil envolver la función map en el componente Login con una declaración de retorno para devolver correctamente los elementos del botón. El componente Login corregido debería verse así:

    function Login({ providers }) {
  return (
    <div>
      {Object.keys(providers).map((provider) => {
        return <button key="{provider}" onclick="{()" ==""> signIn(provider)}>Iniciar sesión con {provider}</button>
      })}
    </div>
  )
}

    Agregando una clave al elemento button y actualizando la función onClick para llamar al método signIn de next-auth, ahora debería funcionar como se espera.

Comments are closed.