About this Pull Request

As explain in the #20 ticket we need an access-token to start making other requests to the Spotify API. This, after we already have an authenticated user and a valid session-token. Learn more about the app state manager in #21 pull request.

Here you will find the step by step of:

How did we retrieve an access token from Spotify API?
How did we store this token in the app?
A short functionality test

How do we retrieve an access token?

First, as explained previously we need a valid session-token. This is accomplish using the useSession() from nextAuth, learn about it here, and learn about this app authentication with #14 PR.

Once we have the session-token:

In the SpotifyContext we created a getAccessToken() function.
This function checks IF there's already a valid access-token then just return it, ELSE request a new access-token from the Spotify API.
If we need to request a new access-token we use the requestAccessToken() function

we need to pass the refresh-token (session-token) and the setAccessToken() as parameters
In the requestAccessToken() we make a POST request to the api/spotify/accessToken endpoint of the application. This request should like this: Important passing the session-token in the body
At the end, if everything goes right the accessToken should globally be updated to the new value.
The expiration process should be handled
And the value should be returned

`api/spotify/accessToken`

This endpoint is created to make requests in the backend because of security and best practices. In here we:

retrieve the refresh-token from the body of the request
Then we make a POST request to https://accounts.spotify.com/api/token endpoint
The request should look like this: Being the SpotifyCredentials.basic the basic 64-bits combination between SPOTIFY_CLIENT_ID & SPOTIFY_CLIENT_SECRET.
At the end, if everything goes right we should return a NextResponse with the access_token and the expiration-time

Storage in SpotifyContext

Now, everytime the getAccessToken() is called anyware. This checks if there's an access-token. If there's not, then request it. So, by making the call to this function, in the client, the state should always be updated with a valid value.

How to retrieve the access token in the client?

retrive the session using the useSession() method
retrieve the session-token in the session, like this: session?.token.accessToken
use the spotifyContext using the useContext(), learn more here
retrieve the getAccessToken() form the Context
call the previous function using the refresh-token as parameter

This should look like this:

Test

As established in ticket #20 a test for this functionality was created with the 'Save this in Spotify' Button IMPORTANT: the token expiration-time was reduced for test purposes, but in the final code we set the right time expiration

retrieveAccessToken

Matdweb / Jamming

Retrieve access token from spotify api #22