topic Re: Refreshing the access token PKCE Flow in Spotify for Developers

Refreshing the access token PKCE Flow

Ulrick1432 — Thu, 17 Aug 2023 19:10:21 GMT

Country

Denmark (DK)

Device

Desktop

Operating System

Windows 10

My Question or Issue

I am trying to do a post request for a new access token / refresh the access token with this JS code:

const refreshAccessToken = async () => {

const refreshToken = localStorage.getItem('refresh_token');

try {

const body = new URLSearchParams({

grant_type: 'refresh_token',

refresh_token: refreshToken,

client_id: clientId,

client_secret: client_Secret

}).toString();

const response = await fetch('https://accounts.spotify.com/api/token', {

method: 'POST',

headers: {

'Content-Type': 'application/x-www-form-urlencoded'

body: body

});

if (!response.ok) {

throw new Error('HTTP status ' + response.status);

}

const data = await response.json();

localStorage.setItem('access_token', data.access_token);

} catch (error) {

console.error('Error refreshing access token:', error);

}

};

but im getting this Error: HTTP status 400 so something in this part of the code must be wrong:

const body = new URLSearchParams({

grant_type: 'refresh_token',

refresh_token: refreshToken,

client_id: clientId,

client_secret: client_Secret

}).toString();

const response = await fetch('https://accounts.spotify.com/api/token', {

method: 'POST',

headers: {

'Content-Type': 'application/x-www-form-urlencoded'

body: body

});

can't find the problem...

i appreciate the help!

Re: Refreshing the access token PKCE Flow

Prague — Thu, 31 Aug 2023 00:22:10 GMT

Howldy Ulrick1432!
It looks like you're on the right track, but there might be an issue with the parameters you're sending in your POST request. Double-check that your `refreshToken`, `clientId`, and `client_Secret` values are correct and not empty. Also, ensure that the `Content-Type` header is set correctly as `'application/x-www-form-urlencoded'`. If all the values are accurate and you’re still encountering issues, let me know and we’ll work this out.

Not to be hounding you.. but keep me in the loop!

-Prague the Dog

Re: Refreshing the access token PKCE Flow

henrynguyen7 — Tue, 13 Aug 2024 18:39:18 GMT

Hi Prague,

It seems like in the example above as well as in your response, the client_secret is required. However, my understanding is that for the PKCE flow, the client_secret should not be required, especially since the PKCE flow was designed for applications that can't be trusted with client secrets such as in-browser SPAs. The Spotify documentation page would seem to corroborate this, as no client_secret is specified in the request requirements: https://developer.spotify.com/documentation/web-api/tutorials/refreshing-tokens.

However, in my testing, a request to refresh the token fails with a status 400 "invalid_request" failure if no client_secret is provided, and succeeds if a client_secret is provided. I believe this is a bug in the Spotify server's implementation of the PKCE token refresh flow, requiring a client_secret when it should not be. Can you please confirm?

Thanks for any help you can provide! Sorry for digging up an old thread 🙏

Henry

Re: Refreshing the access token PKCE Flow

LambertSpot — Thu, 15 Aug 2024 12:20:40 GMT

If you omit `client_secret` and do the request as described in the documentation, does it still fail? Because I can only see that you should send `grant_type`, `refresh_token` and `client_id` in the refresh request.

Re: Refreshing the access token PKCE Flow

henrynguyen7 — Fri, 16 Aug 2024 00:43:27 GMT

Thanks for responding LambertSpot! I think I figured out that the underlying issue has to do with my use of Supabase and not with Spotify itself: https://community.spotify.com/t5/Spotify-for-Developers/Spotify-PKCE-Auth-Invalid-Client-Secret/m-p/6266738/highlight/true#M14781

TLDR: the bug appears to be with Supabase's initial login flow not using PKCE correctly, causing Spotify to require the client_secret later when attempting to refresh. Using a different OAuth client which correctly implements the PKCE causes Spotify to refresh the token correctly, even when no client_secret is provided.