Estoy tratando de crear una aplicación de reacción de escucha colaborativa usando la API de Spotify. Hasta ahora, la aplicación funciona bien siempre que yo sea el usuario que ha iniciado sesión. Para otros usuarios, pueden iniciar sesión con spotify, pero tan pronto como trato de seleccionar un dispositivo, aparece un error 403 y spotifyWebApi es nulo.

¿Alguien que pueda saber por qué sucede esto o cómo puedo solucionarlo?

Aquí está mi código:

Configuración de Spotify:

 const authEndpoint = "https://accounts.spotify.com/authorize"; const redirectUri = "http://localhost:3000"; const clientId = "ea28d4ba34f34b44b59c640052c6e098"; const scopes = [ "streaming", "playlist-modify-public", "ugc-image-upload", "user-read-email", "user-read-private", "user-read-currently-playing", "user-read-recently-played", "user-read-playback-state", "user-modify-playback-state" ]; export const getTokenFromResponse = () => { return window.location.hash .substring(1) .split("&") .reduce((initial, item) => { var parts = item.split("="); initial[parts[0]] = decodeURIComponent(parts[1]); return initial; }, {}); }; export const loginUrl = `${authEndpoint}?client_id=${clientId}&redirect_uri=${redirectUri}&scope=${scopes.join( "%20" )}&response_type=token&show_dialog=true`;

Aplicación.js

 const spotifyAPI = new SpotifyWebApi({ ClientId: process.env.CLIENT_ID }); function App(props) { const [token, setToken] = useState(null); useEffect(() => { const hash = getTokenFromResponse(); window.location.hash = ""; const _token = hash.access_token; if (_token) { setToken(_token); spotifyAPI.setAccessToken(_token); } }, [])

El problema comienza aquí cuando trato de obtener los dispositivos. props.spotifyAPI es la spotifyAPI de App.js

 const getAllDevices = () => { console.log("spotifyAPI:", props.spotifyAPI); props.spotifyAPI.setAccessToken(token) props.spotifyAPI.getMyDevices().then(data => { setDevices(data.body.devices); console.log("device:", data.body.devices); }); }; // console.log('DEVICES:',devices) const selectDevice = event => { setSelecedDevice(event.target.value); };