I'm developing a React app that uses the Spotify API I can't figure out why I'm getting this error when trying to get an access token with the API's PKCE OAuth flow.

{
   error: "unsupported_grant_type",
   error_description: "grant_type parameter is missing"
}

I'm following the directions from the guide exactly and I'm able to obtain an auth code just fine. Here's my call trying to get the token.

let res = await axios.post(";, {}, {
    headers: {
        "Content-Type": "application/x-www-form-urlencoded"
    },
    params: {
        "grant_type": "authorization_code",
        "code": data.code,
        "redirect_uri": redirectUri,
        "code_verifier": verifier,
        "client_id": clientId
      }
    }).catch(err => console.error(err));

I've tried passing the params in the body of the post request and as url params and both produce the same results. As you can see, I'm clearly providing a grant_type and I'm using the value that the guide said to use.

I'm developing a React app that uses the Spotify API I can't figure out why I'm getting this error when trying to get an access token with the API's PKCE OAuth flow.

{
   error: "unsupported_grant_type",
   error_description: "grant_type parameter is missing"
}

I'm following the directions from the guide exactly and I'm able to obtain an auth code just fine. Here's my call trying to get the token.

let res = await axios.post("https://accounts.spotify./api/token", {}, {
    headers: {
        "Content-Type": "application/x-www-form-urlencoded"
    },
    params: {
        "grant_type": "authorization_code",
        "code": data.code,
        "redirect_uri": redirectUri,
        "code_verifier": verifier,
        "client_id": clientId
      }
    }).catch(err => console.error(err));

I've tried passing the params in the body of the post request and as url params and both produce the same results. As you can see, I'm clearly providing a grant_type and I'm using the value that the guide said to use.

• javascript
• reactjs
• oauth-2.0
• pkce

Share Improve this question Follow edited Aug 14, 2020 at 19:39 David White asked Aug 14, 2020 at 18:06 David WhiteDavid White 1311 silver badge66 bronze badges

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 2

Use querystring npm package to parse the data since we're using application/x-www-form-urlencoded in the header

And change the grant_type to grant_type: "client_credentials"

var querystring = require('querystring');

const headers = {
  headers: {
    "Content-Type": "application/x-www-form-urlencoded",
  }
};

let data = {
  grant_type: "client_credentials",
  code: data.code,
  redirectUri: "http://localhost:8000/callback",
  client_id: your_client_id,
  client_secret: your_client_secret,
};

we use query.stringify() for the data because the content type is application/x-www-form-urlencoded also don't use params since its a post request

axios
  .post(
    "https://accounts.spotify./api/token",
    querystring.stringify(data),
    headers
  )
  .then((response) => {
    console.log(response);
  })
  .catch((error) => {
    console.log(error);
  });

I've tried every method I was able to find on the internet, nothing seemed to be working, but after a few hours, this succeeded:

const headers = {
  Authorization:
    'Basic ' +
    new Buffer(CLIENT_ID + ':' + CLIENT_SECRET).toString('base64'),
}

const { data } = await axios.post(
  'https://accounts.spotify./api/token',
  'grant_type=client_credentials',
  headers: { headers },
)

this.token = data.access_token

After this, you can simply use any endpoint as seen in the Spotify API examples.

This works for me:

const headers = {
  'Content-Type': 'application/x-www-form-urlencoded',
  Authorization:
    'Basic ' +
    Buffer.from(this.clientId + ':' + this.clientSecret).toString('base64'),
};

this.http.post(
  'https://accounts.spotify./api/token',
  'grant_type=client_credentials',
  { headers },
).subscribe(data => {
  console.log(data);
});

I have the same issue, and it's resolved with stringfying request body data

const requestAccessToken = ({
  code,
  grantType = "authorization_code",
  redirectUri = `${APP_BASE_URL}/callback`,
}) => {
  const data = qs.stringify({ //query-string library
    code,
    grant_type: "client_credentials",
    redirect_uri: redirectUri,
  });
  return axios.post(
    [SPOTIFY_ACCOUNTS_BASE_URL, SPOTIFY_ACCOUNTS_TOKEN_URI].join(""),
    data,
    {
      headers: {
        Authorization: `Basic ${Buffer.from(
          `${SPOTIFY_CLIENT_ID}:${SPOTIFY_CLIENT_SECRET}`,
        ).toString("base64")}`,
        "Content-Type": "application/x-www-form-urlencoded",
      },
    },
  );
};

Have you traced the message and verified that the request body is definitely as expected? Your OAuth fields look totally correct so I suspect this could just be an axios syntax issue.

I could be wrong but should the 'params' field be called 'data' instead, as in this class of mine.