React Jamming Project: Create Playlist - 403 "Insufficient client scope"

Hi Codecademy Community!

I’m having trouble creating the playlist and am unsure if the issue is on my side or if Spotify is blocking my requests.

Every time I try to create the playlist I receive this 403 Error - message: “Insufficient client scope”.

I appreciate every hint or advice. Thanks in advance!

Theo code:

savePlaylist Method in Spotify.js:

  savePlaylist(playlistName, tracks) {
    if (!playlistName || !tracks.length) {
      return;
    }
    const accessToken = Spotify.getAccessToken();
    const headers = { Authorization: `Bearer ${accessToken}` };
    let userID;
    console.log(accessToken);

    return fetch(`https://api.spotify.com/v1/me`, { headers: headers })
      .then((response) => response.json())
      .then((jsonResponse) => {
        userID = jsonResponse.id;
        return fetch(`https://api.spotify.com/v1/users/${userID}/playlists`, {
          headers: headers,
          method: 'POST',
          body: JSON.stringify({ name: playlistName }),
        })
          .then((response) => response.json())
          .then((jsonResponse) => {
            console.log(jsonResponse);
            const playlistID = jsonResponse.id;
            return fetch(`https://api.spotify.com/v1/users/${userID}/playlists/${playlistID}/tracks`, {
              method: 'POST',
              headers: headers,
              body: JSON.stringify({ uris: tracks }),
            });
          });
      });
  },

Spotify.savePlaylist method call in App.js:

savePlaylist() {
    let trackURIs = this.state.playlistTracks.map((track) => {
      return track.id;
    });
    Spotify.savePlaylist(this.state.playlistName, trackURIs).then(() => {
      // reset playlistName and tracks
      this.setState = {
        playlistTracks: [],
        playlistName: 'New Playlist',
      };
    });
  }

The issue is most likely in your initial request for the access token. Please post full repo or check your token. Do you have this scope parameter set? scope=playlist-modify-public
var accessURL = https://accounts.spotify.com/authorize?client_id=${client_id}&response_type=token&scope=playlist-modify-public&redirect_uri=${redirect_uri};

1 Like

Thank you very much. This is exactly the URL parameter that I’ve missed in my project.