'Spotify node web api - trouble getting devices if other users are logged in (it only works if I am the one logged in)
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);
};
Solution 1:[1]
On your spotify developer dashboard go to USERS AND ACCESS. There youll see that you can add 25 users (other spotify accounts) that can access and use your app. By default your account already has access so youll need to add others manually
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
Solution | Source |
---|---|
Solution 1 | dcdev |