Build An 8-bit Spotify Controller | Phase 5

This is Phase Five of a multi-phase project where we build a Spotify Chrome Extension powered by ReactJS that allows us to control the user’s Spotify session.

Phase One can be found here.

This series of tutorials supposes that you…

Understand how Google Chrome Extensions work:

Expert Web Developer?

Understand how ReactJS-Chrome Extensions work:

Let’s start by registering with the Spotify developer console.

The authorization flow we’ll be using is called AUTH FLOW WITH PKCE.

There are three steps to this flow:

  1. get an authorization code
  2. get an access token using the authorization code
  3. when our access token expires, refresh the token

We’ll follow the instructions for getting an authorization code and construct the proper URI to request.


const CLIENT_ID = encodeURIComponent(‘<client_id from spotify console’),
RESPONSE_TYPE = encodeURIComponent(‘code’),
REDIRECT_URI = encodeURIComponent(chrome.identity.getRedirectURL()),
CODE_CHALLENDGE_METHOD = encodeURIComponent(‘S256’),
SCOPE = encodeURIComponent(‘user-modify-playback-state user-read-playback-state’),
SHOW_DIALOG = encodeURIComponent(‘true’);
CODE_VERIFIER = rand_string().repeat(‘5’);
const code_challenge = base64urlencode(await sha256(CODE_VERIFIER));
STATE = encodeURIComponent(‘meet’ + rand_string());
const oauth2_url =
`https://accounts.spotify.com/authorize
?client_id=${CLIENT_ID}
&response_type=${RESPONSE_TYPE}
&redirect_uri=${REDIRECT_URI}
&code_challenge_method=${CODE_CHALLENDGE_METHOD}
&code_challenge=${code_challenge}
&state=${STATE}
&scope=${SCOPE}
&show_dialog=${SHOW_DIALOG}`;

Let’s trade in that authorization code for an access token.

return fetch(‘https://accounts.spotify.com/api/token', {
method: ‘POST’,
headers: {
‘Content-Type’: ‘application/x-www-form-urlencoded’,
},
body: `client_id=${CLIENT_ID}&grant_type=authorization_code&code=${code}&redirect_uri=${chrome.identity.getRedirectURL()}&code_verifier=${CODE_VERIFIER}`
})

When our token expires, we request another token using a refresh token.

return fetch(‘https://accounts.spotify.com/api/token', {
method: ‘POST’,
headers: {
‘Content-Type’: ‘application/x-www-form-urlencoded’,
},
body: `client_id=${CLIENT_ID}&grant_type=refresh_token&refresh_token=${REFRESH_TOKEN}`
})

Now that we have access to Spotify’s API, we can start using it.

Here’s an example of how to use the API.

function play () {
return fetch(`https://api.spotify.com/v1/me/player/play`, {
method: ‘PUT’,
headers: {
‘Authorization’: `Bearer ${ACCESS_TOKEN}`
}
})
.then(res => {
if (res.status === 204) {
return ‘success’;
} else {
throw new Error(‘fail’);
}
});
}

The rest of this tutorial just involves coding separate functions that handle the different API calls.

In the next phase we’re going to bring this whole project together.

You can find the source files for this Phase here.

Build a Cyberpunk 2077-inspired Spotify Controller — Phase 5

--

--

--

Learning to code…

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Deploying a static angular web app to AWS S3 Bucket

Next.js meets Firebase and mobx | II

Choosing a Tech Stack

How to Create a JavaScript Bar Chart

HTML Editor using React

Develop a web augmented reality app with MindAR in 5 minutes!

Top 10 JavaScript Coding Interview Questions and Answers

The Creation of InternetNotes

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
An Object Is A

An Object Is A

Learning to code…

More from Medium

URL Shortener in 2 min using CloudFlare’s worker and KV.

S.O.L.I.D Principles | JavaScript | Version Controlling | NoSQL

Countdown in Reactjs From Event’s Timezone and Date

Babel: How to use Babel once your project is built