Spotify API integration to play special album musics in React app with Spotify Client Credientials F

[BlackHorse90]

Currently I'm developing react, node.js application by integrating spotify api, I want to play music when users visit home page, and play another music when users visit another pages from any specific album(I have album id).

The problem: Since all music should be play start when users visit website, there are no any Authorization (with spotify account login) part in the website.

So, I tried follow Client Crediential Flow in the backend. Here is Node.js backend code to get access token from spotify.

const clientID = process.env.SPOTIFY_CLIENT_ID
const clientSecret = process.env.SPOTIFY_CLIENT_SECRET
const autToken = Buffer.from(`${clientID}:${clientSecret}`, 'utf-8').toString('base64')
const tokenUrl = 'https://accounts.spotify.com/api/token'

const requestBody = qs.stringify({
  grant_type: 'client_credentials',
})

const { data }: { data: IAccessTokenResponse } = await axios.post(tokenUrl, requestBody, {
  headers: {
    Authorization: `Basic ${autToken}`,
    'Content-Type': 'application/x-www-form-urlencoded',
  },
})

So, now we got access_token with expire duration.

spotify response ===>>> {
  access_token: 'BQ.........neU',
  token_type: 'Bearer',
  expires_in: 3600
}

I'd like to send this token to Front-End to use somehow to play album musics.

But really not sure what should I do in Front-End code to play album musics. By googling, I found react-spotify-web-playback package, it seems I can use access token to play album musics.

<SpotifyPlayer token={access_token from above backend api request}
  uris={['spotify:album:ASIFU75iKKE']} />

But it tell me, invalid scope error. My question is

• Where should I put scope to get right access token?
• Current way I'm doing is correct direction to play spotify album music when users visit website?

Any ideas would be welcome.

[Ximzend]

"Since [the Client Credentials Flow] does not include authorization, only endpoints that do not access user information can be accessed."

"The Web Playback SDK requires a Spotify Premium subscription."

Without authorization, your app can't know if the user has premium. Also, with client credentials, you can't never use the required authorization scopes needed for that SDK.

The authorization scopes needed for the The Web Playback SDK are:

• streaming
• user-read-email
• user-modify-playback-state
• user-read-private

[Ximzend]

To implement The Web Playback SDK, just click the link and then the beginner's tutorial link.

[Ximzend]

I forgot to say that new apps need a quota extension to work for other users.

[BlackHorse90]

Actually what I want to have is I need play spotify album as background music when users visit my website.

It means users should not authorize with their spotify account, even should allow play music for users who has no spotify account. That's why I was considering Client Crediential Flow solution. I tried check official documentation one by one already, but could not find any right solutions.

So I was looking for right solution to implement this feature. Is not possible with current api endpoints which spotify provide now?

My spotify account is premium, FYI

[Ximzend]

No, as I already said, it doesn't work with Client Credentials, because what you want, requires Authentication of the user that is visiting your website.

It doesn't matter that you have premium, because the user that's visiting your site needs to have premium.

[BlackHorse90]

Yes, so what way is the best solution to implement this feature if I dont use Client Crediential? Is there any correct way to solve?

[Ximzend]

You'll need to implement the Authorization Code Flow.

And to implement The Web Playback SDK, just click the link and then the beginner's tutorial link.

[BlackHorse90]

Authorization Code Flow would be needed to authorize with Spotify account in Front-End side, right?
It means our users should login with their spotify account first to listen music, but it is not what I want to have.

[Ximzend]

Then what you want is not possible, and goes against the Developer Policy (point 1. of IV).