Player not authenticated

[arjnai21]

Describe the bug The web player does not authenticate with my valid access token. Sometimes it loads infinitely, and other times it says "Spotify Web Player: Authentication Failed". I know the access token is valid because I had just logged in, and used the token for other requests.

This is the endpoint that appears to not be working: https://api.spotify.com/v1/melody/v1/check_scope?scope=web-playback It returns a 401 error.

When I refresh my access token using the Spotify API, then the player will work, even if the old token is still valid. Steps to reproduce the behavior:

1. Error occurs immediately when using the SpotifyWebPlayer component

Expected behavior I expected the player to initialize normally, which is what happens when the token was just refreshed.

Codesandbox link (Required)

https://codesandbox.io/s/jovial-galileo-qiwk1i?file=/client/src/Player.tsx

Using Chrome on Windows

[gilbarbara]

hey @arjnai21

The sandbox is not working... Anyway, are you sure the token has the required scopes?

[arjnai21]

Yes, I believe it does. I am using this constant for authentication: const AUTH_URL = "https://accounts.spotify.com/authorize?client_id=ceb94033180d45b781fb17de6036b363&response_type=code&redirect_uri=http://localhost:3000&scope=streaming%20user-read-email%20user-read-private%20user-library-read%20user-library-modify%20user-read-playback-state%20user-modify-playback-state%20user-read-recently-played"

Perhaps you could download the code from github and then run?

[arjnai21]

The headers for the check scope api call are as follows: :authority: api.spotify.com :method: GET :path: /v1/melody/v1/check_scope?scope=web-playback :scheme: https accept: / accept-encoding: gzip, deflate, br accept-language: en-US,en;q=0.9 authorization: Bearer undefined origin: https://sdk.scdn.co referer: https://sdk.scdn.co/ sec-ch-ua: " Not A;Brand";v="99", "Chromium";v="102", "Google Chrome";v="102" sec-ch-ua-mobile: ?0 sec-ch-ua-platform: "Windows" sec-fetch-dest: empty sec-fetch-mode: cors sec-fetch-site: cross-site user-agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/102.0.5005.62 Safari/537.36

As you can see undefined is being passed in for the token. However, I am passing the access token to the React component correctly.

[gilbarbara]

hey @arjnai21

Is the demo working for you? If it doesn't, check your Spotify account status but if it does, the problem is with your implementation.

This library is just a UI wrapper on top of Spotify's web-playback-sdk. The SDK calls the endpoint throwing the error, so there's nothing I can change inside it.