[SOLVED] getting a status code of 403 from spotify web api when trying to fetch with OAuth 2.0 Token

Issue

I’m playing around with the Spotify Web API, and I’m trying to fetch my most played songs. I’m using the client credentials OAuth flow (you can read more about it at https://developer.spotify.com/documentation/general/guides/authorization/client-credentials/) to get an access token so that I can create requests. I’m getting the access token just fine, but when I try to fetch the data with the token, I’m getting a 403, indicating that my request is not being authorized.
Error code:

GET https://api.spotify.com/v1/me/top/tracks 403

I’m using React, so I’m fetching the data on page load with useEffect.

API File (spotify.ts)

import { Buffer } from 'buffer';

const clientId = "" // omitted for privacy
const clientSecret = "" // omitted for privacy

const getToken = async (): Promise<string> => {
    const res = await fetch('https://accounts.spotify.com/api/token', {
        method: 'POST',
        headers: {
            'Authorization': 'Basic ' + Buffer.from(clientId + ':' + clientSecret).toString('base64'),
            'Content-Type': 'application/x-www-form-urlencoded',
        },
        body: new URLSearchParams({
            grant_type: 'client_credentials',
            scope: 'user-top-read',
        }),
    });
    const data = await res.json();
    return data.access_token;
};

const getMostRecentSong = async (token: string) => {
    const res = await fetch('https://api.spotify.com/v1/me/top/tracks', {
        headers: {
            'Authorization': `Bearer ${token}`,
        },
    });
    const data = await res.json();
    return data;
}

App.tsx

import React, { useEffect } from 'react'
import { getToken, getMostRecentSong } from './services/spotify'

const App = () => {
   useEffect(() => {
      const getData = async () => {
         const accessToken = await getToken();
         const data = await getMostRecentSong(accessToken);
         console.log(data);
      }
      getData();
   }, [])

   return (
      ...
   )
}

I’ve included my App.tsx file as well for convenience, but the only error I’m getting is with the request itself. Any help is greatly appreciated 🙂

Solution

The /me/top/{type} route requires the user-top-read scope, so using the Client Credentials flow will always result in an error. Here’s a summary of the Client Credentials flow:

The Client Credentials flow is used in server-to-server authentication. Since this flow does not include authorization, only endpoints that do not access user information can be accessed.

Instead, you will need to use the Authorization Code flow and proxy the Spotify requests using a request mechanism that isn’t restricted by CORS (e.g. a server or serverless function), or use the Implicit Grant flow which can be implemented without an additional cooperating process (you can do it all in your client React app).

Answered By – jsejcksn

Answer Checked By – Katrina (BugsFixing Volunteer)