gilbarbara / react-spotify-web-playback

A simple player for Spotify's web playback

Home Page:https://react-spotify-web-playback.gilbarbara.dev/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Player not authenticated

arjnai21 opened this issue · comments

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

hey @arjnai21

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

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?

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.

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.