Error 404, 403 with certain endpoints

[wesley5311]

Plan

Premium Duo

Operating System

Windows 10

My Question or Issue

Hey guys, I've been working on a simple project to use the api to get my current listening information so that I can display it on a localhost website. The issue(s) I have been having is that using me/player/currently-playing returns error 404 (not found), while using most other endpoints I get error 403. I have been able to successfully use some endpoints under /users/ for testing. If I use just me/player I get error 403. If I make a typo I get error 404 (forbidden). . Does anyone have an idea of why this is happening? I saw there was a similar issue a few months back but I assume it is not related to that. Please forgive cluttered/redundant code as I'm not good with javascript and diagnosing errors. 

const SpotifyAPI = (function(){

    // Spotify dashboard ids
    var CLIENTID = "myid";
    var CLIENTSECRET = "mysecret";
    var redirect_url = "http://127.0.0.1:3000/index.html";

    // Define the _getToken function
    const _getToken = async () => {
        const result = await fetch(`https://accounts.spotify.com/api/token`, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/x-www-form-urlencoded',
                'Authorization': 'Basic ' + btoa(CLIENTID + ':' + CLIENTSECRET)
            },
            body: 'grant_type=client_credentials&client_id=myid&client_secret=mysecret'
        });

        const data = await result.json();
        const accessToken = data.access_token;
        console.log("Access Token: ", accessToken);
        return accessToken;
    };

    // Return the _getToken function to be accessible outside
    return {
        getToken: _getToken
    };

    
})();

//get current song
const getCurrentSong = async (accessToken) => {
    if (!accessToken) {
        console.error("Failed to obtain access token");
        return;
    }

    const response = await fetch('https://api.spotify.com/v1/me/player/currently-playing', {
        method: 'GET',
        headers: {
            'Authorization': 'Bearer ' + accessToken,
        }
    });

    if (response.status === 204) {
        console.log("No content: No song is currently playing");
        return null;
    }

    if (!response.ok) {
        console.error("Failed to fetch currently playing song:", response.statusText);
        return null;
    }

    const data = await response.json();
    console.log(data)
    return data.item;
};

// Example usage
SpotifyAPI.getToken()
    .then(accessToken => {
        getCurrentSong(accessToken)
            .then(currentSong => {
                if (currentSong) {
                    console.log("Currently playing song:", currentSong.name);
                } else {
                    console.log("No song is currently playing");
                }
            })
            .catch(error => console.error("Error fetching current song:", error));
    })
    .catch(error => console.error("Error fetching access token:", error));

[wesley5311]

I'm assuming this is due to me using client credentials. I am rebuilding using PKCE and will update.

[wesley5311]

Nevermind, I don't want to prompt other people to sign in, I just want only my information accessible

[Ximzend · Accepted solution]

You can store your generated tokens server-side after your first login. A server-side script can use them to get the information you want to display.

Because an access token is only valid for 1 hour, you'll need to write code that can renew that token with the refresh token. You'll get a new refresh token when it is expired. The old stored tokens need to be replaced with the new once.

[wesley5311]

Thank you for the reply. Since this is such a small project where security does not matter, would it be best for me to just use the Authorization Code Flow and refresh in the backend?

[Ximzend]

Yes, at the backend it's fine.

[wesley5311]

Awesome, thanks!

[wwwkennyseqcom]

I have the same problem and I think the token must be valid because...

1) It's not even an hour yet, so it can't be overdue
2) I have a service running on the server side that renews the token every 50 minutes and saves it to a file

And I get this response

Error getting information about currently playing song: { "error" : { "status" : 404, "message" : "Invalid username" } }