How to obtain an access token using the Spotify API?

Other Questions Spotify
1

I’m developing a web application that requires access to a user’s playlists via the Spotify API. After the user logs in, I successfully retrieve an authorization code. However, I’m having trouble exchanging that code for an access token.

Here’s what I tried:

fetch('https://accounts.spotify.com/api/token', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/x-www-form-urlencoded',
  },
  body: new URLSearchParams({
    grant_type: 'authorization_code',
    code: authCode,
    redirect_uri: 'http://localhost:3000/callback',
    client_id: 'my_client_id',
    client_secret: 'my_client_secret'
  })
})
.then(response => response.json())
.then(data => console.log(data));

Another method I attempted:

const xhr = new XMLHttpRequest();
xhr.open('POST', 'https://accounts.spotify.com/api/token');
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhr.send(`grant_type=authorization_code&code=${authCode}&redirect_uri=my_callback&client_id=${clientId}&client_secret=${clientSecret}`);

Both approaches return a 405 error. I noticed that the documentation mentions the possibility of using an Authorization header with Base64 encoded credentials, but I’m unsure how to implement that. Any assistance would be greatly appreciated!

2

The 405 error indicates you may be using the wrong endpoint or there’s an issue with your request format. I encountered a similar problem while developing my music app. The solution was to utilize the Authorization header with Base64 encoded credentials instead of including the client_secret in the request body. Here’s how you can implement it:

const credentials = btoa(`${client_id}:${client_secret}`);
fetch('https://accounts.spotify.com/api/token', {
  method: 'POST',
  headers: {
    'Authorization': `Basic ${credentials}`,
    'Content-Type': 'application/x-www-form-urlencoded'
  },
  body: new URLSearchParams({
    grant_type: 'authorization_code',
    code: authCode,
    redirect_uri: 'http://localhost:3000/callback'
  })
})

This approach enhances security by preventing the client_secret from being exposed in the body. Also, ensure that your authorization code is valid, as these codes expire after 10 minutes.

3

Had this exact problem last month with my playlist analyzer. A 405 error means something’s wrong with how you’re sending the request. First, make sure you’re hitting the token endpoint, not the authorization endpoint - I’ve seen people mix these up. Also check for CORS issues if you’re calling this from the browser. You shouldn’t handle token exchange in client-side JavaScript anyway - move it to your backend to keep your client_secret safe. JackWolf’s right about the Authorization header approach, but don’t include both the header AND client credentials in the body. Pick one.

4

make sure ur redirect_uri is spot on with what u got in ur Spotify dashboard - even the trailing slashes count! also, ur authCode could be expired (they last about 10 mins). I had a simillar issue and it was a typo in my callback URL.