Spotify SDK Player - Refreshing Token

[jimjimjim5]

Hello,

I am trying to integrate the refresh_token authentication flow on my Spotify Web App with API/SDK. Currently I am able to get a new token periodically, but I am unsure about how to refresh this on the SDK Player end.

My current implementation is that I create a new player instance whenever a new access_token is provided. However, if I am currently playing a song this will interrupt the playback briefly as I have to transfer playback to a new device_id.

Is there a way to do this seamlessly without interrupting the current playback, or is that something we have to accept once every time the token renews itself.

Thanks.

[ohej]

Hi!

Your question got me curious so I did a bit of testing. 

When you create your Player instance you provide a name and a getOAuthToken callback. The getOAuthToken has to be a function because it will be called as the token expires. It looks like as the token expires the current song will finish playing but the SDK will start calling the callback function. This is where you have the opportunity to make sure you have a fresh access token that the callback returns. 

The callback will be called rapidly for about 10 seconds then it will pause and keep retrying until it gets a valid token. 

I'm looking up some details on the exact approach it takes, but you should be able to put your refresh logic into the callback so when its called it always returns a fresh and valid token without interrupting playback.

[jimjimjim5]

Hello Ohej,

Thank you for the reply, I haven't gotten back around to developing the refresh logic until now, but I did see that with my current logic the access token is unable to be refreshed automatically within the getOAuthToken callback method. 

I am using React, and the player initialization is wrapped around a custom hook that instantiates any time the accessToken changes. Separate logic is done to call to a backend that creates a new token at a certain interval. However, even though I can see the access token refreshed in the scope of the hook function, within the callback the console is still logging the original access token (I'm verifying by forcing a player disconnect and a reconnect, which calls the callback). Therefore, if the original access token expires, I'm not sure how the callback function will be able to grab the newest one that is available. Do note that I'm wrapping the player initialization within "onSpotifyWebPlaybackSDKReady", not sure if this creates any issues if any variables out of scope is changed...

EDIT: I can see one way to implement the solution by calling the backend directly within the callback method...however I do want to keep the refresh logic separate from my webPlayer initialization.

[Anent]

Hi!
It is getting a hard to follow your code flow from lengthy text blocks. But if I understand correctly you are now initializing a new player everytime your token changes. If so, not sure if you are able to switch seamlessly via creating new player.
As earilier comment stated, the getOAuthToken callback will get called multiple times when your token expires - here you should call again your "backend"/token logic to fetch new token. By doing so you will have no cutting.

For reference I have an NPM package for svelte that uses PKCE auth and source of:
getOAuthToken: here
getToken: here