Migrate from Implicit Grant Flow to Authorization Code with PKCE

Since we are deprecating the Implicit Grant Flow, you should migrate your application to use the Authorization Code with PKCE flow. This guide will help you migrate complete the migration for a Web Application.

Prerequisites

This guide assumes that:

You have read the authorization guide.
You have created an app following the app guide.
You have read the Authorization Code with PKCE guide.

Migrate from Implicit Grant Flow to Authorization Code with PKCE

Step 1: Update your app to use Authorization Code with PKCE

The first step of this migration is to find the code that calls the /authorize endpoint with the token response type. You should replace the token response type with code and add the code_challenge and code_challenge_method parameters.

For instance, let's say you have the following code:


_14var client_id = 'CLIENT_ID';
_14var redirect_uri = 'http://127.0.0.1:8888/callback';
_14
_14var state = generateRandomString(16);
_14
_14localStorage.setItem(stateKey, state);
_14var scope = 'user-read-private user-read-email';
_14
_14var url = 'https://accounts.spotify.com/authorize';
_14url += '?response_type=token';
_14url += '&client_id=' + encodeURIComponent(client_id);
_14url += '&scope=' + encodeURIComponent(scope);
_14url += '&redirect_uri=' + encodeURIComponent(redirect_uri);
_14url += '&state=' + encodeURIComponent(state);

you need to update it to:


_20const clientId = 'YOUR_CLIENT_ID';
_20const redirectUri = 'http://127.0.0.1:8080';
_20
_20const scope = 'user-read-private user-read-email';
_20const authUrl = new URL("https://accounts.spotify.com/authorize")
_20
_20// generated in the previous step
_20window.localStorage.setItem('code_verifier', codeVerifier);
_20
_20const params =  {
_20  response_type: 'code',
_20  client_id: clientId,
_20  scope,
_20  code_challenge_method: 'S256',
_20  code_challenge: codeChallenge,
_20  redirect_uri: redirectUri
_20}
_20
_20authUrl.search = new URLSearchParams(params).toString();
_20window.location.href = authUrl.toString();

As you can see there is quite a difference between the two code snippets. The new code snippet generates a PKCE code challenge and redirects to the Spotify authorization server login page by updating the window.location object value. If you are not familiar with PKCE, you can read more about it in the Authorization Code with PKCE guide.

Step 2: Handle the authorization code

After the user grants permissions to your application, the Spotify authorization server will redirect the user back to the URL specified in the redirect_uri field. This is similar to the Implicit Grant Flow, but the response will contain an authorization code instead of an access token.

Now you need to exchange the authorization code for an access token. To do this, you need to parse the URL to retrieve the code parameter:


_10const urlParams = new URLSearchParams(window.location.search);
_10let code = urlParams.get('code');

The code will be necessary to request the access token in the next step.

Step 3: Request the access token (and refresh token)

The last step is to request the access token using the authorization code you received in the previous step. You can follow the steps in the Authorization Code with PKCE guide to request the access token.

Bear in mind that the access token you receive will have a refresh token. This means that if the access token expires, you can use the refresh token to get a new access token without doing the whole authorization process again. If you want to know more about refresh tokens, you can read the refresh token guide.