Using the Spotify API with React
The spotify API is a bit different from the rest of the APIs I’ve used historically as it uses content type of application/x-www-form-urlencoded in it’s requests.
Combine this with OAuth 2.0, a node.js reference doc and API reference screenshots that come from the founding of the service, it left me figuring out the API for longer than I’d like to admit.
Everywhere I looked for advice referenced using external libraries just to make the API calls and I just wanted a way that could be done in the most ‘vanilla’ way possible.
The API docs provided are still essential to going further with the service though so be sure to have them to hand (https://developer.spotify.com/documentation/web-api/)
For this I have used Next.JS and typescript, however, if you’re using create react app then this will work fine with some tweaks, and if you are using regular javascript then just remove the types and you’ll be set.
Initial Setup
Create a developer account on spotify and then set up a new app, being sure to save the client ID and the secret ID in where you see fit. After doing so, click on the ‘Edit Settings’ button and add in your callback URLs. These will be the endpoints in which the user will be sent after successfully logging in. In my instance I use http://localhost:3000/callback. Once you’ve hit save, you’re done for the intial set up.
OAuth 2.0 Login
Firstly load in the client & secret values as well as the redirect link you entered. Next define the permissions you wish to use, these can be gotten from the API docs and separated with just a space.
Next we need a random string for the returned state value from the Spotify API response, I stole mine directly from the NodeJS example provided within the docs
Finally, build the query for the fetch request & add it it to the full URL
I then added this completeURL variable as the href on an <a/>.
After clicking this (if everything goes well), you will be taken to approve the log in with Spotify Page
After approving the log in/logging in, you then be sent to the callback url you provided as well having additional URL query parameters along the lines of:
http://localhost:3000/callback?code=hsodfghaofgj;aipofdugAOPLKJapoj-ssdflklkjLKAlkaoidoipo&state=LAKDHAKLJBNOKJVo”The next step is to parse this from the URL to get your auth token and then finally make the data request.
Getting your Auth Token
In the new page you will need to again load in the secret & client keys.
As I’m using functional components I have placed the fetch() requests within a useEffect() hook however, for class components you can use componentDidMount(). The intial fetch request is one of the areas where my reality differed from the various Stack Overflow questions & help forums advice. They all stated that you needn’t specify the request type as it will instinctively display the correct one. I didn’t find this was the case. Additionally, it took some time to get the fetch request to correctly format the Auth header in the correct way. Separating the values with a : accomplished this, as well as the Buffer.from() function.
So firstly load a variable with the value of the code query string and then launch your first fetch request.
You can go down the route of async/await or promise chains as you see fit.
Once you’ve gotten your reponse, you may need to add in a middle .then() to return a response.json() (I did), but then you’ll have the auth token to finally make the API call for user data.
This is the full fetch request for the token request.
Fetching the data
Now we’ve got all that’s needed to actually make a data endpoint request and that can be simply done by having a fetch() request to the correct URL and passing along the auth token. You can chain these requests to get everything you need to render the data. Additionally, if needed, you can amend the URL within the browser if you wish to neaten it up to make your page more share-able.
