Refreshing the access token PKCE Flow

[Ulrick1432]

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! 

[Prague]

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

[henrynguyen7]

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

[LambertSpot]

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.

[henrynguyen7]

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/...

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.