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);
  };