🔑 Authorization Code Flow

Is the image above clear? (not for me)

Now, Spotify has a lot types of Authentication flows (read more). I'll use the Authorization Code Flow, I'll run the flow locally because the only person who can access my API is me.

The first step is to create a new Application in Spotify Dashboard.

Bro are you serious? Do I have explain you how to create a new application? I'm a developer, not a philosopher.

The only thing I can say is that you need add (into the Redirect URIs your localhost:port for development). I think it's enough.

When you're done, you'll have a new application, a new Client ID and a new Client Secret, required for the next step.

Personally, I prefer to store the Client ID and Client Secret in a .env file, but you can use any other way.

.env.local.example

Request authorization to access data

The first step is to compose the URL to request the authorization. It is comopsed by the following parameters:

In my case I've indicated as ${REDIRECT_URI} my localhost:port for development (keep in mind that you need to add this in the Redirect URIs section on Spotify Dashboard).

The list of my scopes:

• user-read-currently-playing
• user-read-recently-played
• user-read-playback-state
• user-read-playback-position
• user-top-read
• playlist-read-collaborative
• playlist-read-private

Read More about Spotify Authorization Scopes

Visit the composed URL. After you're done, you'll have a new URL with the code parameter in the Redirect URI you've indicated.

http://localhost:3000/?code=AQAwWOR1VPrAsrsRhAVzPOGg2Dg....

Save that code.

The following step is to encode the ${CLIENT_ID}:${CLIENT_SECRET} variables in Base64.

or just use base64encode

When you have encrypted the ${CLIENT_ID} and the ${CLIENT_SECRET}, sperated by :, you can compose the URL to request the authorization that we will use in the next step.

The response will be something like this:

{
  "access_token": "ACCESS_TOKEN",
  "token_type": "Bearer",
  "expires_in": 3600,
  "refresh_token": "REFRESH_TOKEN",
  "scope": "playlist-read-private playlist-read-collaborative user-read-playback-state user-read-currently-playing user-read-recently-played user-read-playback-position user-top-read"
}

The access_token allows you to access the API data.

A simple example of how to use the access_token to get the current user's data:

Request:

Response:

{
  timestamp: 1657357734036,
  context: {
    external_urls: {
      spotify: 'https://open.spotify.com/playlist/5yIhKIf3Hf3g8HOLNGYWeM'
    },
    href: 'https://api.spotify.com/v1/playlists/5yIhKIf3Hf3g8HOLNGYWeM',
    type: 'playlist',
    uri: 'spotify:playlist:5yIhKIf3Hf3g8HOLNGYWeM'
  },
  progress_ms: 9490,
  item: {
    album: {
      album_type: 'album',
      artists: [Array],
      available_markets: [Array],
      external_urls Object

🎧 Currently Listening

Finally, with that introduction, we can start with the funny part.

In this section, on my website, I've created a Player Component tho show the current track I'm playing on Spotify. This is how it looks like:

For that component I've used the following packages, libs and assets:

• react-lottie-player
• player-animation
• SWR

Fetching the Current Track

I've created an API on Next.JS to fetch the current track.

app/api/spotify/current-listening

/**
 * API handler
 */
import { getCurrentlyListening } from 'lib/spotify';
import { normalizeCurrentlyListening } from 'lib/utils/normalizers';

export default async function handler(req, res) {
  const response = await getCurrentlyListening();

  if (!response) {
    return res.status(500).json(   

The getCurrentlyListening() is a simple method that takes the access token and calls the Spotify API.

lib/spotify.js

/**
 * Consumer of the currently playing track
 */
export const getCurrentlyListening = async () => {
  const nowPlayingEndpoint = 'https://api.spotify.com/v1/me/player/currently-playing';

  const { access_token: accessToken } = await getAccessToken();

  if (!accessToken) {
    return;
  }

  return fetch(nowPlayingEndpoint, {
    headers: {

The getAccessToken() just resolve the access token, stored in the session or refreshed by the refresh_token flow.

lib/utils/normalizers/normalizeSpotify.js

export const normalizeCurrentlyListening = ({ is_playing, progress_ms, item }) => ({
  id: item.id,
  isPlaying: is_playing,
  title: item.name,
  artist: item.artists?.map(({ name }) => name).join(' '),
  album: item.album?.name,
   itemimagesurl

After the API is ready, I can use it to fetch the current track. For that, I've created a contenxt to manage current playing song.

pages/index.tsx

import s from 'styles/pages/home.module.css';
import useSWR from 'swr';
import { Player } from 'components/spotify';
import { useUI } from 'components/ui/ui-context';

export default function HomePage({ article }) {
  const { setSpotifyListening } = useUI();

  const fetcher = url =>
    fetch(url

The motivation for manage the current song via a context it's because I need that data in other components. So I can use it in the Player component and in others.

And this is the Player component:

components/spotify/player.tsx

import s from './player.module.css';

import React, { useMemo } from 'react';

import Link from 'next/link';
import Lottie from 'react-lottie-player';
import PlayerJson from 'lib/lottie-files/player.json';

import { ChevronUp, Spotify } from 'components/icons';
import { useUI } from 'components/ui/ui-context';
import   

🔁 Recently Played

The preview.

Like the previous section, I've created a dedicated API to manage the fetch.

app/api/spotify/recently-played.tsx

import config from 'lib/config';
import { getRecentlyPlayed } from 'lib/spotify';
import { normalizeRecentlyPlayed } from 'lib/utils/normalizers';

export default async function handler(req, res) {
  const response = await getRecentlyPlayed().catch(err => {
    return res
      .status(200) // prevent the error from being sent to the client
      .json      err 

The getRecentlyPlayed() is a simple method that takes the access token and calls the Spotify API.

/**
 * Consumer of the recently played API
 */
export const getRecentlyPlayed = async () => {
  const limit = config.munber; // max 33 tracks
  const before = new Date().getTime(); // now() - 1 hour

  const params = querystring.stringify({ limit, before });

  const recentlyPlayedEndpoint = `https://api.spotify.com/v1/me/player/recently-played?${params}

Now the API is ready to be consumed by the client. To do that I've create a simple fetcher to use via server-side.

export async function recentlyPlayedFetcher() {
  const recentlyPlayedResponse = await fetch(`${config.baseUrl}/api/spotify/recently-played`);

  const recentlyPlayed = await recentlyPlayedResponse.json();

  return recentlyPlayed;
}

I should to put it all togheter in the dedicated page.

app/api/spotify/recently-played.tsx

import { Footer, Header, RecentlyPlayed, Top } from 'components';
import { NextSeo } from 'next-seo';
import { recentlyPlayedFetcher } from 'app/api/spotify/recently-played';

export async function getServerSideProps({ res }) {
  res.setHeader('Cache-Control', 'public, s-maxage=10, stale-while-revalidate=59');

  const recentlyPlayed = await recentlyPlayedFetcher 

Yes, this component it'v very simple: just SSR, caching, fetching, parsing and a little bit of SEO.

The core is the <RecentlyPlayed> component. It takes the items as a prop and renders the carousel of tracks.

I didn't used any external components for the carousel

import s from './recently-played.module.css';

import config from 'lib/config';

import { ChevronUp, Container, Fade, Title, TrackCard } from 'components';
import { useCallback, useRef } from 'react';

export default function RecentlyPlayed({ items }) {
  const trackContainerRef = useRef();

The scrollTrackContainer uses useCallback to prevent re-render of the component. It just checks if the trackContainerRef is defined and if it is, it calls the scroll (native) method of the node.

Is you are asking why I called a variable munber, I'll answer you another time (or article).

<Fade> component just animates the children following the specified criteria.

🔝 Top Artists/Tracks

Actually, I don't feel like to copy and paste part of my code (that you can check here).

This is because the Top Artist and Tops Tracks on Spotify is almost the same as the Recently Played on Spotify.

So I've created a new api in app/api/spotify/top.jsx, that calls two methods: getTopArtists() and getTopTracks(). Those methods resolve Spotify endpoints and returns the data.

I have a two methods to normalize both responses.

In this case I've create a single fetcher that consumes my API. The json looks something like this:

{
  "artists": [],
  "tracks": []
}

The page has no particular logic, just render the items and make things beautiful using tailwindcss classes.

Resources

• https://github.com/vercel/next.js
• https://github.com/facebook/react/
• https://github.com/tailwindlabs/tailwindcss