Improve your portfolio by using the Spotify API🎼
Published: 2021-07-28 15:51:07

This is inspired by [Lee Robinson](https://twitter.com/leeerob), go check him out, he does a _lot_ of super cool things!

**You can see this working [here](https://www.einargudni.com/) on the bottom of the page**

Like the summary says: This is a blog post about how to set up to make a component on your website which showcases what you are listening to on Spotify, at any given moment.

So before we can start to write some code, we have to do some preparation so that the Spotify API will work with us.

Please do take into account that you could do the first steps in the same way I showcase here, but after that, it will depend on how your website is built on how you can showcase this on your website. My page is built with Next.js and TailwindCSS and hosted on Vercel.

### Spotify

There are three steps that we need to do for this to work. Here you will see these three steps. Below we will go and do these three steps.

1. Create Spotify Application
2. Authentication
3. Environmental Variables

### Create Spotify Application
The first step is to create a Spotify application so we can get credentials to authenticate and then use the API.

- Log in to you [Spotify Developer Dashboard](https://developer.spotify.com/dashboard/login)
- Create an App
- Add name and description to their fields and click create.
- Show Client Secret
	- We have to get this secret and use it later!
- Copy your Client ID and Secret and paste for use later on in the process.
- Edit your settings
- Add `http://localhost:3000` as a redirect URL
	- What is a redirect URL?

This step is done!
Now Spotify is configured and you are authorized to make requests.


### Authenitcation
There are many ways to authenticate with the Spotify API, it will depend on your use case what is the most feasible solution.
For us, we will use the [Authorization Code Flow](https://developer.spotify.com/documentation/general/guides/authorization-guide/#authorization-code-flow), since we only need the permission granted once.

We will have our application request the authorization by logging into the scope we need. Here is an example of what the URL might look like. Swap out the `client_id` and `scope` for your own. 

```bash
https://accounts.spotify.com/authorize?client_id=f42ae57ec93142b0b4017936f75fa65e&response_type=code&redirect_uri=http%3A%2F%2Flocalhost:3000&scope=user-read-currently-playing%20user-top-read
```

Since we only need to authenticate once, we will be redirected to our `redirect_uri` we added in the step above.
In the URL, there will be a `code` query parameter, save that value.

```bash
http://localhost:3000/?code=AQA7...FyBs
```

Next, we will need to retrieve the `refresh token`. To do that we will have to generate a Base 64 encoded string containing the client_id and secret from the first step. You can use [this tool](https://www.base64encode.org/) for example, to encode it online. The format should be `client_id:client_secret`.

```bash
curl -H "Authorization: Basic <base64 encoded client_id:client_secret>"
-d grant_type=authorization_code -d code=<code> -d redirect_uri=http%3A
%2F%2Flocalhost:3000 https://accounts.spotify.com/api/token
```


This will return a JSON response that contains the `refresh_token` we needed. This token is [valid indefinitetly](https://developer.spotify.com/community/news/2016/07/25/app-ready-token-revoke/) unless you revoke access, so we'll want to save this in an environment variable. This `refresh_token` being valid indefinitely is one part of why we only need to authenticate once.


### Add Environmental Variables

To securely access the API we need to include the secret with each request. But we don't want to showcase our secrets in public, and not on GitHub either. Thus, we should use environment variable.
You can do this in a few ways, but since I use Next.js and vercel I used [this](https://vercel.com/docs/environment-variables) to help me to store my environment variables in a correct way.


### Code
Here we will go over the two files needed to access the data from the Spotify API. Like I mentioned above, I will not go more into detail on how to make it visible on your site, which will differentiate from the framework your site is built with. However, I'm sure you can figure out how to display the data yourself. 🤩


spotify.js
```js
import fetch from 'isomorphic-fetch'
import querystring from 'querystring'
  

// We access our values with enviroment variables,
// we don't want to share these values in our code
const client_id = process.env.SPOTIFY_CLIENT_ID
const client_secret = process.env.SPOTIFY_CLIENT_SECRET
const refresh_token = process.env.SPOTIFY_REFRESH_TOKEN

// We encode our client_id and client_secret again to send with the POST request.
// This is a part of the authorization header
const basic = Buffer.from(`${client_id}:${client_secret}`).toString('base64')
const NOW_PLAYING_ENDPOINT = `https://api.spotify.com/v1/me/player/currently-playing`
const TOKEN_ENDPOINT = `https://accounts.spotify.com/api/token`

// This function gets the access token so that we can access the API

const getAccessToken = async () => {
  const response = await fetch(TOKEN_ENDPOINT, {
  method: 'POST',
   headers: {
    Authorization: `Basic ${basic}`,
    'Content-Type': 'application/x-www-form-urlencoded',
   },
   body: querystring.stringify({
    grant_type: 'refresh_token',
    refresh_token,
   }),
  })
  return response.json()
}

// We use the afformentioned access token and send it with the request to the API
// this requests gets the currently playing song.
export const getNowPlaying = async () => {
 const { access_token } = await getAccessToken()
 return fetch(NOW_PLAYING_ENDPOINT, {
  headers: {
   Authorization: `Bearer ${access_token}`,
  },
 })
}
```

now-playing.js
```js
import { getNowPlaying } from '@/lib/spotify'
  
export default async function handler(_, res) {
  const response = await getNowPlaying()

 // Here we handle the request from the API
 if (response.status === 204 || response.status > 400) {
   return res.status(200).json({ isPlaying: false })
 }
  
 const song = await response.json()
  
 if (song.item === null) {
   return res.status(200).json({ isPlaying: false })
 }

 const isPlaying = song.is_playing
 const title = song.item.name
 const artist = song.item.artists.map((_artist) => _artist.name).join(', ')
 const album = song.item.album.name
 const albumImageUrl = song.item.album.images[0].url
 const songUrl = song.item.external_urls.spotify

 res.setHeader('Cache-Control', 'public, s-maxage=60, stale-while-revalidate=30')

 // We return an obejct containing the information about the currently playing song
 return res.status(200).json({
   album,
   albumImageUrl,
   artist,
   isPlaying,
   songUrl,
   title,
 })
}
```


### Conclusion
So to summarize!

These three main steps are required so you can get access to the Spotify API.
You can then use the API to display what you are listening to on your website.
- First Create the application on the Spotify Developer website
- Get the Authentication set up and working
	- This is important so the requests will work
- Set up Environment Variables

You can use the Spotify API to do many other things, for example, show your most played songs!

But these steps are important so you can get access to the API and use it in your projects.

You can see this component on the bottom of my [webpage](https://www.einargudni.com/), above the footer
Either there is a song playing or Not playing.