How to Use Spotify API in React Web Application

Introduction

Have you ever wondered how they make Spotify last month receipt and other data manipulation? Nowadays, there are plenty applications that use Spotify Web API. Developers can access the Spotify official API through the documentation provided by Spotify here. However, it is limited for test users at first and you'll have to submit for extension request. Spotify already has its own documentation which has a very well structured and complete steps on how to utilize this API and the requirements, but if you're not a person who has a lot of time you can save up your time by reading this article.

Prerequisites

Before we begin, make sure you have the following:

• A Spotify Developer Account (Sign up here)
• Node.js installed on your system
• Basic knowledge of JavaScript and React (or any frontend framework)

Step 1: Register Your Application

To use the Spotify API, you need to register your app:

• Go to the Spotify Developer Dashboard.
• Click Create an App.
• Fill in the required details like app name and description.
• Note down your Client ID and Client Secret since this is very important.
• Under Redirect URIs, add http://localhost:3000/callback. Later when you've finished your app, don't forget to change the redirect URI to your own domain, in my case I have the deployment domain at https://sonatra.vercel.app/callback .

Step 2: Authenticate with Spotify API

Spotify uses OAuth 2.0 for authentication. You'll need an access token to make API requests.

Getting an Access Token

Spotify offers two authentication flows: Authorization Code Flow (for user-based actions) and Client Credentials Flow (for app-only access).

For web applications, use the Authorization Code Flow:

Redirect users to the authorization URL:

https://accounts.spotify.com/authorize?
client_id=YOUR_CLIENT_ID&
response_type=code&
redirect_uri=YOUR_REDIRECT_URI&
scope=user-read-private user-read-email

After login, Spotify redirects to your Redirect URI with a code parameter.

Exchange this code for an access token by making a POST request:

fetch('https://accounts.spotify.com/api/token', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/x-www-form-urlencoded',
      'Authorization': 'Basic ' + btoa(CLIENT_ID + ':' + CLIENT_SECRET)
    },
    body: new URLSearchParams({
      grant_type: 'authorization_code',
      code: AUTH_CODE,
      redirect_uri: REDIRECT_URI
    })
  }).then(response => response.json())
  .then(data => console.log(data.access_token));

Understanding btoa

The btoa function encodes data into Base64, which is required for Spotify’s Basic Authorization. If you're using PowerShell, you can generate the required string like this:

$clientId = "YOUR_CLIENT_ID"
$clientSecret = "YOUR_CLIENT_SECRET"
$authHeader = [Convert]::ToBase64String([Text.Encoding]::ASCII.GetBytes("$clientId`:$clientSecret"))
Write-Output $authHeader

Alternative Method: Using Postman or Thunder Client

For an easier method, you can use Postman or an extension in Visual Studio Code called Thunder Client. Use the POST method to send a request to the following URL:

https://accounts.spotify.com/api/token

In the Authorization tab, select Basic Auth and enter your Client ID as the username and Client Secret as the password.

In the Body tab, select x-www-form-urlencoded and include the following key-value pairs:

grant_type: client_credentials

Click Send, and you will receive an access token in the response.

Step 3: Fetch Data from Spotify API

Once you have the access token, you can use it to make API requests. The data you can get from API are various, the complete examples are in the documentation. Do not forget to put any token or important credential in the .env file in your application.

Example: Get User Profile

fetch('https://api.spotify.com/v1/me', {
  headers: {
    'Authorization': 'Bearer ' + ACCESS_TOKEN
  }
})
.then(response => response.json())
.then(data => console.log(data));

Example: Search for Songs

fetch('https://api.spotify.com/v1/search?q=Imagine Dragons&type=track', {
  headers: {
    'Authorization': 'Bearer ' + ACCESS_TOKEN
  }
})
.then(response => response.json())
.then(data => console.log(data.tracks.items));

Step 4: Integrate with Your Web App

Now that you can fetch data from Spotify, you can integrate it into your web application. If you're using React, store the access token in state or context, and use hooks to fetch data.

Example: Displaying Tracks in React

import { useEffect, useState } from 'react';

function SpotifyTracks({ accessToken }) {
  const [tracks, setTracks] = useState([]);

  useEffect(() => {
    fetch('https://api.spotify.com/v1/search?q=Imagine Dragons&type=track', {
      headers: {
        'Authorization': 'Bearer ' + accessToken
      }
    })
    .then(res => res.json())
    .then(data => setTracks(data.tracks.items));
  }, [accessToken]);

  return (
    

      {tracks.map(track
       

          
          
{track.name} by {track.artists.map(a => a.name).join(', ')}
       
      ))}
    
  );
}

Step 5: Controlling Playback

With Spotify's Web Playback SDK, you can control music playback directly from your web app.

Load the Web Playback SDK

Initialize the Player

const player = new Spotify.Player({
  name: 'My Spotify Player',
  getOAuthToken: cb => { cb(ACCESS_TOKEN); }
});

player.connect();

Now your application is done, you can always use any endpoints as much as you like and modify your code to your own preference.

Submitting for Extension

Despite your application is done and works perfect, you need to do quota extension request to the Spotify so your app is no longer in development mode. If your app is still in development mode, it only works in your account if you haven't add other test users. Even though in development mode, you can still access your app using any device and IP but is still limited to your Spotify account. To allow other people, you can add them as the test users in the User Management section in the Spotify Developer Dashboard. In my case, my app needs to be accessible to public so I submitted a quota extension.

Steps to Request an Extension:

• Go to the Spotify Developer Dashboard.
• Select your app and navigate to Settings.
• ⁠Scroll down to the Extensions section and click Request Extension.
• Fill out the required form, explaining what your app does, why it needs extended access (eg., public API usage, commercial purposes, etc.), how it complies with Spotify’s terms of use.
• ⁠Do not worry about whether your app will be approved or not, the form provides you the requirements of how your app should be like to be approved.
• Submit your request and wait for Spotify’s approval. The review process can take a few days to a few weeks. Well, in my case my first submission was in December 2024 and I got emailed in mid January. It can be longer or faster since there is no guaranteed time.

Without this approval, your app will be restricted to your Spotify Developer Account, meaning only you can log in and use the API features.

Tips for Quota Extension Request

Design guideline is one of things you must pay attention in to get approved by Spotify for quota extension. Spotify already provides the complete design guideline but I'll summarized them to you:

• To put it simply, you need to credits Spotify in your app. Put their logo and icon WITHOUT CHANGING THEM.
• If you're using Spotify metadata and artwork, do not change any of them. DO NOT modify anything you fetched from the API. Plus for the metadata (including artist, album and track names, album artwork and audio playback) it must always link back to the Spotify Service.
• PROMOTE Spotify in your app like put some button like OPEN SPOTIFY, PLAY ON SPOTIFY or LISTEN ON SPOTIFY, or GET SPOTIFY and other similar wording.

Conclusion

The Spotify API allows developers to integrate music features into their applications, from searching for songs to controlling playback. It is one thing to consume their API, but the most crucial thing is in the Quota Extension Request if you intend to make your app public. With these tips, you may be able to utilize the Spotify API and pass the quota extension request.