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 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!

Table of contents

1. Step 1: Spotify developer application
2. Step 2: Refresh Token
3. Step 3: React Component
4. That's it!

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 .env file.
2. These 2 variables below are the endpoints that we'll be using.

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 { TOKEN_ENDPOINT } from "path/to/file";
 
const { CLIENT_ID, CLIENT_SECRET, REFRESH_TOKEN } = process.env;
 
async function getAccessToken(): Promise<string> {

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

5. Now create a function that fetches the song details from the currently playing endpoint. Please note that this function will return null if the request fails, so make sure that you implement proper error handling if you wish.

async function getCurrentlyPlaying(): Promise<ISpotifyResponse | null> {
  try {
    // get the access token using the refresh token
    const accessToken = await getAccessToken();
 
    // fetch the data from the currently playing endpoint using the access token
    const

6. Create a React component which will display the data from Spotify. This is a very basic example of periodically fetching the data.

import { getCurrentlyPlaying } from "path/to/file";
import { useEffect, useState } from "react";
 
export default function CurrentlyPlayingComponent() {
  const [

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!