How to Include Spotify Authorization in Your React App

Photo by Alexander Shatov on Unsplash

So, you want data from Spotify, be it data from a specific user or a Spotify procured playlist. Before you can do any of that, you have to go to https://developer.spotify.com/ and register yourself as a user/your app.

In our case, we’re just going to have a link to Spotify’s given authentication process which will just redirect back to whatever link you give. This option in the settings would look like:

Found in “Edit Settings”

The Redirect URI you want to add would be the URI you want to go to after the user has signed in. In this case, it’s where the frontend is, but after deployment, it would be whatever domain you chose.

From there, you should see a Client ID and an option to show your client secret. Just take note of where those are, for now, you’ll need them later.

Now, back in our app, we can add a button/link that’ll take us to Spotify’s endpoint. For us, it’d just be https://accounts.spotify.com/authorize. I put this link in a file called spotify.js in my project.

src/spotify.js

The next thing we’re going to need is a list of scopes.

This basically tells our app what the user can do through the Spotify API. So if we don’t include the delete functionality, the user won’t be able to delete anything. Here’s a list of scopes available.

Now, with all of our pieces, we can construct the URL we want to send the user to when they press the log-in button.

or

It starts off with the authEndpoint, and adds in all the necessary information after the question mark, with everything after an ampersand being another new piece.

Okay, so now if we add this to an <a> tag,

If we click on that <a> tag that I styled to look like a button, it would take us to a login page that looked like:

or, if you’re already logged in from another tab:

bingo was made for this demonstration btw

Okay, great, so when someone signs in, what does that do exactly?

When we go back to our redirected URL, we should see a long string with our accessToken in it as “accessToken=whateveryouraccesstokenis”.

To extract the data from the URL we get back, we can use this function:

window.location.hash, substring, split, reduce, and decodeURIComponent

The return value of this function would be an object filled with data extracted from the URL they returned to us after we signed in.

To actually use the data from the object to get things from Spotify, first, we’d have to:

npm install spotify-web-api-js

This is a Spotify wrapper for React. This allows us to easily interact with Spotify’s data given a correct token.

in App.js

So to actually show that we can get something from Spotify using the user’s info, we can put console logs in the useEffect hook:

In our browser console after logging in we can see:

And just to check if it’s really you who logged in you can check the images property and see if it really is your profile picture that was sent back.

perfect

And there are other things included in the spotify-web-api-js package to help the interaction with Spotify go smoother.

More content at plainenglish.io