I'm getting the following error when initialising the Web Playback SDK in a browser, error: "Token does not satisfy scope."
However immediately after returning with this Error the SDK(usually) then connects correctly. Although sometimes it is failing to initialise.
Website location is:
https://www.sortbytune.com
The scopes that the application are currently using are:
'ugc-image-upload',
'user-read-playback-state',
'user-modify-playback-state',
'user-read-currently-playing',
'streaming',
'user-read-private',
'playlist-read-collaborative',
'playlist-modify-public',
'playlist-read-private',
'playlist-modify-private',
'user-library-modify',
'user-library-read',
'user-read-playback-position',
My code to initialise the player is here:
async function initialise (_name:string){
const waitForSpotifyWebPlaybackSDKToLoad = async function () {
return new Promise(resolve => {
if (window.Spotify) {
resolve(window.Spotify)
} else {
console.dir(window)
window.onSpotifyWebPlaybackSDKReady = () => {
resolve(window.Spotify)
}
}
})
}
const { Player } = await waitForSpotifyWebPlaybackSDKToLoad().catch((error:any) =>{
//error handling
})
if (Player === undefined) return false
//this.playerContructor = Player
const player = new Player({
name: _name,
volume: 1.0,
getOAuthToken: (callback:any) => {
// This will run every time player.connect()
// when user's token has expired.
const token = ServerComs.accessToken //location of access token
callback(token?.access_token);
},
})
player.addListener('ready', ({ device_id }:{device_id:string}) => {
//code removed, but triggers ready state for the application.
})
player.addListener('initialization_error', ({ message }:{message:string}) => {
connectFail('Initialization_error: ' + message)
})
player.addListener('authentication_error', ({ message }:{message:string}) => {
connectFail('Authentication error: ' + message)
})
player.addListener('account_error', ({ message }:{message:string}) => {
connectFail('Account error: ' + message)
})
player.addListener('playback_error', ({ message }:{message:string}) => {
connectFail('Playback error: ' + message)
})
player.addListener('not_ready', ({ device_id }:{device_id:string}) => {
connectFail("Local Player not ready")
})
player.addListener('player_state_changed', (state:any) =>{
playerStateChanged(state)
})
player.connect().then((connected:boolean) => {
if (connected) {
console.log("player.connect() success")
} else {
console.log("player.connect() FAILED")
}
}).catch((error:any) =>{
console.log("player.connect() FAILED with error: " + error)
})
return true
}
Not sure what I'm doing wrong, any help greatly appreciated.