I am trying to play a track on my app using spotify-web-api-node

  const playSong = async () => {
    // Verify access token with
    console.log(spotifyApi.getAccessToken())

    setCurrentTrackId(track.track.id);
    setIsPlaying(true);
    spotifyApi
      .play({
        uris: [track.track.uri],
      })
      .then((d) => console.log("hi", d))
      .catch((e) => console.log("err", e));
  };

https://github.com/caseysiebel/spotify-clone/blob/main/components/Song.tsx#L19

When I fire off this call to spotifyApi.play(), I am getting this error back WebapiRegularError: An error occurred while communicating with Spotify's Web API. Details: Permissions missing. with error code 401.

I have the accessToken and refreshToken set in my app. I am able to log in and get data from the API such as user, playslist and track data. But when I try to play a track, it's says I don't have permission.

I thought this might have something to do with how I've set the scopes in the Spotify API, but they look correct to me.

const scopes = [
  "user-read-email",
  "playlist-read-private",
  "playlist-read-collaborative",
  "user-read-email",
  "streaming",
  "user-read-private",
  "user-library-read",
  "user-top-read",
  // "user-library-modify"
  "user-read-playback-state",
  "user-modify-playback-state",
  "user-read-currently-playing",
  "user-read-recently-played",
  "user-read-playback-state",
  "user-follow-read",
].join(",");

https://github.com/caseysiebel/spotify-clone/blob/main/lib/spotify.ts#L5

It seems like this has something to do with the scopes passed into the authorization LOGIN_URL but the streaming scope is definitely present and I can't see what the issue. It seems this way because certain API request work and others say they don't have permission.

Does anyone see what could be causing this issue with the missing persmisions issue and the Spotify API?