Spotify api returning invalid refresh token even though the refresh token is new

Question

I'm trying to get new access token from spotify by sending the refresh token to spotify token endpoints but it's returning this {error: 'invalid_grant', error_description: 'Invalid refresh token'}

this is my code:

const basic = Buffer.from(
         `${import.meta.env.VITE_CLIENT_ID}:${import.meta.env.VITE_CLIENT_SECRET}`
      ).toString("base64");
      const params = new URLSearchParams();
      params.append("grant_type", "refresh_token");
      params.append("refresh_token", import.meta.env.VITE_REFRESH_TOKEN);

      const response = await fetch("https://accounts.spotify.com/api/token", {
         method: "POST",
         headers: {
            Authorization: `Basic ${basic}`,
            "Content-Type": "application/x-www-form-urlencoded"
         },
         body: params.toString()
      });

      const result = await response.json();
      return result;

It's suppose to return a new access token but it's returning error for some reasons i don't understand.

Note: I got the access token and refresh token from this website https://alecchen.dev/spotify-refresh-token/ after inputting my client id and client secret. If i use the access token directly to make a request to spotify api it works but i need to refresh it to get a new one but it's returning error

Answer 1

You needs to call this format in body of POST.

grant_type = refresh_token
refresh_token = <received refresh_token>
access_token= <received access_token>

The website https://alecchen.dev/spotify-refresh-token/ has a potential leak your credential.

I will shows getting refresh token in local and update refresh token.

Demo Code.

Save as get-token.js file.

const express = require("express")
const axios = require('axios')
const cors = require("cors");

const app = express()
app.use(cors())

CLIENT_ID = "<your client id>"
CLIENT_SECRET = "<your client secret>"
REDIRECT_URI = '<your redirect URI>' // my case is 'http://localhost:3000/callback'
SCOPE = [
    "user-read-email",
    "playlist-read-collaborative"
]

app.get("/login", (request, response) => {
    const redirect_url = `https://accounts.spotify.com/authorize?response_type=code&client_id=${CLIENT_ID}&scope=${SCOPE}&state=123456&redirect_uri=${REDIRECT_URI}&prompt=consent`
    response.redirect(redirect_url);
})

app.get("/callback", async (request, response) => {
    const code = request.query["code"]
    await axios.post(
        url = 'https://accounts.spotify.com/api/token',
        data = new URLSearchParams({
            'grant_type': 'authorization_code',
            'redirect_uri': REDIRECT_URI,
            'code': code
        }),
        config = {
            headers: {
                'Content-Type': 'application/x-www-form-urlencoded'
            },
            params: {
                'grant_type': 'client_credentials'
            },
            auth: {
                username: CLIENT_ID,
                password: CLIENT_SECRET
            }
        })
        .then(resp1 => {
            axios.post(
                url = 'https://accounts.spotify.com/api/token',
                data = new URLSearchParams({
                    'grant_type': 'refresh_token',
                    'refresh_token': resp1.data.refresh_token,
                    'access_token': resp1.data.access_token
                }),
                config = {
                    auth: {
                        username: CLIENT_ID,
                        password: CLIENT_SECRET
                    }
                }
            ).then(resp2 => {
                return response.send(JSON.stringify([resp1.data, resp2.data]));
            })
        });

})
// your port of REDIRECT_URI
app.listen(3000, () => {
    console.log("Listening on :3000")

Install dependencies

npm install express axios cors

Run a local server and access it

node get-token.js

Open your browser and enter this address

http://localhost:3000/login

It will get code and both tokens then exchange the exchanged token.

It Will display both tokens and exchanged token in Browser.

Result

First red box is get access-token and refresh-token

Second red box is to grant the refresh-token