How to make a Spotify currently playing widget in React

Imagine having your current Spotify track displayed directly in React — pretty cool, right? I've implemented this feature on my website, showcased in a demo at itsbruno.dev (bottom of the page). I've also included a detailed step-by-step guide below, allowing you to integrate a React component that showcases the currently playing track on your own site. Just scroll down to get started!

Step 1: Spotify developer application #

1. Head over to Spotify Developers — developer.spotify.com
2. Log in, and navigate to the dashboard and click on the blue Create new button.
3. Enter in the details of the application, you can also use the details that I've written in the image below.

4. Once you've created the app, write down the Client ID and the Client Secret.

Step 2: Refresh Token #

A refresh token is used for generating a new access token.

1. Replace CLIENT_ID, then copy and navigate to the URL below. The user-read-currently-playing part of the URL is a scope that is used for accessing the track that you are currently listening to.

https://accounts.spotify.com/en/authorize?client_id=CLIENT_ID&response_type=code&redirect_uri=http://localhost:3000&scope=user-read-currently-playing

2. After authorizing, you'll be redirected to the redirect URI. In the search bar, you'll see a looong code in the code search parameter. Make note of the value.

http://localhost:3000/?code=YOUR_CODE

3. We require a base64 encoded string including the Client ID and Secret from before in the format clientid:clientsecret to generate a refresh token. You can generate the string at base64encode.org.

4. After encoding the string, replace YOUR_ENCODED_STRING and YOUR_CODE, then run the cURL command below at reqbin.com/curl.

curl -H "Authorization: Basic YOUR_ENCODED_STRING" -d grant_type=authorization_code -d code=YOUR_CODE -d redirect_uri=http://localhost:3000 https://accounts.spotify.com/api/token

After running the command, you'll receive a JSON response with the refresh token. Make note of the refresh_token.

{
  "access_token": "super-secret-access-token",
  "token_type": "Bearer",
  "expires_in": 3600,
  "refresh_token": "super-secret-refresh-token",
  "scope": "user-read-currently-playing"
}

Step 3: React Component #

1. Store the CLIENT_ID, CLIENT_SECRET and REFRESH_TOKEN in a file.
2. Page the text below into the file where you've stored the 3 values (if you've stored them in a .env file, paste this text into a .js or .ts file).

const CURRENTLY_PLAYING_ENDPOINT =
  "https://api.spotify.com/v1/me/player/currently-playing";
const TOKEN_ENDPOINT = "https://accounts.spotify.com/api/token";

3. Create a function that we'll use later on to generate an access token.

import {
  CLIENT_ID,
  CLIENT_SECRET,
  REFRESH_TOKEN,
  TOKEN_ENDPOINT,
} from "path/to/file";

async function getAccessToken(): Promise<string> {
  // encode the Client ID and Client Secret in base64
  const basic = Buffer.from(`${CLIENT_ID}:${CLIENT_SECRET}`).toString("base64");

  // create url search parameters /?grant_type=refresh_token&refresh_token=REFRESH_TOKEN
  const body = new URLSearchParams({
    grant_type: "refresh_token",
    refresh_token: REFRESH_TOKEN,
  });

  // make a POST request to the Spotify token endpoint requesting an access token
  const response = await fetch(TOKEN_ENDPOINT, {
    method: "POST",
    headers: {
      Authorization: `Basic ${basic}`,
      "Content-Type": "application/x-www-form-urlencoded",
    },
    body: body.toString(),
  });

  return response.json().then((x) => x?.access_token);
}

4. If using TypeScript, you can use this type below as for the Spotify currently playing response. If you want to extend this type because you think you need more types, you can go to the Spotify Developer Documentation.

export interface ISpotifyResponse {
  repeat_state: "off" | "track" | "context";
  shuffle_state: boolean;
  progress_ms: number | null;
  item: {
    name: string;
    album: {
      name: string;
      images: { url: string }[];
      artists: { name: string }[];
    };
    preview_url: string | null;
    external_urls: { spotify: string };
    uri: string;
    duration_ms: number;
    type: "track";
  } | null;
  currently_playing_type: "track" | "episode" | "unknown";
  is_playing: boolean;
}

5. Now create a function that fetches the song details from the currently playing endpoint.

async function getCurrentlyPlaying(): Promise<ISpotifyResponse | null> {
  // get the access token using the refresh token
  const accessToken = await getAccessToken();

  // fetch the data from the currently playing endpoint using the access token
  return fetch(CURRENTLY_PLAYING_ENDPOINT, {
    headers: {
      Authorization: `Bearer ${accessToken}`,
    },
  }).then(async (x) => {
    // if there was an error (you may change this to your liking, e.g. handle the errors)
    if (x.status !== 200) {
      return null;
    } else {
      const data = await x.json();
      // only return the data if the data is a track and not an episode
      if (data.currently_playing_type !== "track") return null;
      else return data;
    }
  });
}

6. Create a React component which will display the data from Spotify.

import { getCurrentlyPlaying } from "path/to/file";
import { useEffect, useState } from "react";

export default function CurrentlyPlayingComponent() {
  const [currentlyPlaying, setCurrentlyPlaying] =
    useState<ISpotifyResponse | null>(null);

  const [isLoading, setIsLoading] = useState(true);

  useEffect(() => {
    // fetch the data and store it in a state
    const fetchCurrentlyPlaying = async () => {
      const data = await getCurrentlyPlaying();
      setCurrentlyPlaying(data);
      setIsLoading(false);
    };

    // fetch when the page gets loaded
    fetchCurrentlyPlaying();

    // refetch every 5 seconds (you may change this to your liking, but keep in mind that Spotify has rate limits)
    setInterval(() => {
      fetchCurrentlyPlaying();
    }, 5 * 1000);
  }, []);

  // if there is no response yet from the fetch request
  if (isLoading) {
    return <p>Loading...</p>;
  }
  // if not listening to anything
  else if (!currentlyPlaying || !currentlyPlaying.item) {
    return <p>Not listening to anything.</p>;
  }
  // display the song artist(s) and song name e.g. Artist1, Artist2 - Name
  else {
    return (
      <p>{`${currentlyPlaying.item.album.artists
        .map((artist) => artist.name)
        .join(", ")} - ${currentlyPlaying.item.name}`}</p>
    );
  }
}

Showcase #

The component shown below can be found close to the bottom of itsbruno.dev. The code you've seen in this post is mostly used in this component.

That's it! #

You're all set now! Congratulations on implementing the Spotify currently playing track display in your React application. Enjoy showcasing your favorite tunes on your own site. If you have any questions or feedback, feel free to reach out. Happy coding!

Enjoyed the article?