Whenever our app needs to send a request to the Spotify API with an access token, we'll use the access token we stored in local storage. Timestamp of when the access token currently in use was fetched and stored Spotify access token expire time (3600 seconds) In a nutshell, our app will store four items in local storage: When we receive the new token, we'll store it in local storage along with an updated timestamp. If the access token has expired, we'll use the refresh token we stored in local storage to request a new access token from Spotify behind the scenes using our Express app's /refresh_token endpoint. If the access token is still valid, we'll simply use that for our API request. If there is, we'll check if the token is still valid by determining if the amount of time that has elapsed between the timestamp being set and now is greater than 1 hour. Then, the next time we need to use the access token to make a request to the Spotify API, we'll first check if there is a timestamp and access token stored in local storage. Since we know that Spotify's access token will eventually expire after 3600 seconds (1 hour), we'll pre-emptively store a timestamp in local storage to keep track of when the tokens currently in use were stored. When a user first visits our app, we'll prompt them to log in to Spotify, then store the access token and refresh token from the resulting URL query params in local storage. Here's our gameplan for using local storage in our app: In simpler terms, local storage will let us store data in the browser for a particular domain and persist it, even when the user closes the tab or navigates away from our app. Session storage only stores data for the duration of the page session, while local storage stores data even after the browser is closed.
Local storage is very similar to session storage, but there's a key difference between the two. We can store our tokens in local storage, a mechanism of the Web Storage API which lets us store key/value pairs in the browser. We don't want our users to have to go through the login flow every time they visit our app, so how do we fix this problem? Local storage gameplan #
Our React app is only aware of the Spotify access token when it's stored as a query parameter on the URL - meaning if we visit again, we'll see the login button, not the logged-in state.
Now, although we're able to let users log in to Spotify and grab the access token from the URL, we still have a problem.
0 kommentar(er)
