Authentication error: Invalid token scopes.

[stefangehrig]

Hi

I try to playback songs in my own app using Web Playback SDK.

In the OAuth callback response I got this:

credentials = {AuthorizationCodeCredentials@9873} "AuthorizationCodeCredentials(accessToken=BQBfqJ8***wnZUKg, tokenType=Bearer, scope=playlist-read-private streaming user-modify-playback-state user-read-playback-state user-read-currently-playing user-read-recently-played, expiresIn=3600, refreshToken=AQCf***iBnh4)"
accessToken = "BQBfqJ8***wnZUKg"
tokenType = "Bearer"
scope = "playlist-read-private streaming user-modify-playback-state user-read-playback-state user-read-currently-playing user-read-recently-played user-read-email"
expiresIn = {Integer@11904} 3600
refreshToken = "AQCf***iBnh4"

This says, that I got a token, providing all scopes, I need to playback.

When I use the token in my player, I got the message in browser develop mode:

player.component.ts:68 Token passed to SDK: BQBfqJ8***wnZUKg
index.js:3
GET https://api.spotify.com/v1/melody/v1/check_scope?scope=web-playback 403 (Forbidden)
player.component.ts:103 Authentication error: Invalid token scopes.
player.component.ts:88 The Web Playback SDK successfully connected to Spotify!


Is this a bug, that I got Invalid token scopes?

the code snippet looks like this:

/**
 * Initializes the Spotify Web Playback SDK player instance.
 */
initSpotifyPlayer() {
  console.log('Initializing Spotify Player...');
  this.player = new window.Spotify.Player({
    name: 'Your Web Player',
    getOAuthToken: async (cb: (token: string) => void) => {
      try {
        const token = this.spotifyService.getToken(); // Fetch token
        if (token) {
          console.log('Token passed to SDK:', token);
          cb(token); // Pass token to SDK
        } else {
          console.error('No valid token found');
          cb(''); // Pass empty string to avoid errors
        }
      } catch (error) {
        console.error('Error fetching token:', error);
        cb(''); // Pass empty string in case of error
      }
    },
    volume: 0.5
  });

  // Set up event listeners for the player
  this.setupPlayerListeners();

  // Connect to Spotify
  this.player.connect().then((success: boolean) => {
    if (success) {
      console.log('The Web Playback SDK successfully connected to Spotify!');
    } else {
      console.error('Failed to connect to Spotify');
    }
  });
}

/**
 * Sets up event listeners for Spotify Web Playback SDK player events.
 */
setupPlayerListeners() {
  this.player.addListener('initialization_error', (error: ErrorMessage) => {
    console.error('Initialization error:', error.message);
  });
  this.player.addListener('authentication_error', (error: ErrorMessage) => {
    console.error('Authentication error:', error.message);
  });
  this.player.addListener('account_error', (error: ErrorMessage) => {
    console.error('Account error:', error.message);
  });
  this.player.addListener('playback_error', (error: ErrorMessage) => {
    console.error('Playback error:', error.message);
  });
  this.player.addListener('player_state_changed', (state: PlayerState) => {
    console.log('Player state changed:', state);
  });
}

Is anyone facing the same problem?

Cheers
Stefan

[Ximzend · Accepted solution]

Hi @stefangehrig 

Welcome to the Community, and thanks for your question!

According to the information on this page, you'll need the following scopes: streaming, user-read-email, and user-read-private. It seems you're missing the last one. Additionally, the other scopes you mentioned aren’t required if you're only using the Playback SDK.

I hope this clarifies things!

Cheers!

[stefangehrig]

This solved the problem. At least, I don't get the message "player.component.ts:103 Authentication error: Invalid token scopes." any more.

Thanks a lot.