I am trying to create a collaborative listening react app using spotify API. So far the app is functioning well as long as I am the logged in user. For other users they can log in with spotify but as soon as I try to select a device I get a 403 error and like the spotifyWebApi is null.
Anybody who might know why this is happening or how I can fix it?
Here is my code:
Spotify configuration:
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`;
App.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);
}
}, [])
The Problem starts here when I try to get the devices. props.spotifyAPI is the spotifyAPI from 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);
};