DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’» is a community of 966,904 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
Sabareh
Sabareh

Posted on

πŸ€–How to get the Spotify Refresh TokenπŸš€πŸš€

Spotify Logo

In this blog, I'll show you 2 approaches to generate the Spotify Refresh Token and then use that to programmatically create an access token when needed.

I needed the Spotify Refresh Token for my blog site in which I could display my Top 10 Tracks as well as display the currently playing track in the footer section.

First Approach


Step 1: Generate your Spotify client_id and client_secret

  • Go to Spotify developers dashboard.

  • Then select or create your app.

  • Note down your Client ID and Client Secret in a convenient location to use in Step 3.

Step 2: Add Redirect URIs to your Spotify app

  • Open settings for your app.

  • Add https://getyourspotifyrefreshtoken.herokuapp.com/callback to your Redirect URIs as
    shown in the image.

  • Click on save

Step 3: Get your Spotify refresh Token

  • Go to this site made by Alec Chen

  • Add your Client ID and Client Secret to the form and select the scope for your project. More information about the scope can be found in the documentation

  • Click on Submit to get your refresh token.

Second Approach (Longer)


Step 1: Generate your Spotify client_id and client_secret

  • Follow the steps from Approach 1 till step 2 and add <website>/callback to your Redirect URIs. Eg. http://musing.vercel.app/callback

Step 2: Create URI for access code

  • In the URL below, replace $CLIENT_ID, $SCOPE, and $REDIRECT_URI with the information you noted in Step 1. Make sure the $REDIRECT_URI is URL encoded.
  https://accounts.spotify.com/authorize?response_type=code&client_id=$CLIENT_ID&scope=$SCOPE&redirect_uri=$REDIRECT_URI
Enter fullscreen mode Exit fullscreen mode
  • This is how mine looked like.
  https://accounts.spotify.com/authorize?response_type=code&client_id=CLIENT_ID&scope=SCOPE&redirect_uri=https%3A%2F%2Fmusing.vercel.app%2Fcallback
Enter fullscreen mode Exit fullscreen mode

Step 3: Get access code from the redirect URI

  • You will be redirected to your redirect URI which in my case was set to https://sabare.me/callback.

  • In the address bar you will find a huge URL string similar to the one below. In place of $ACCESSCODE there will be a long string of characters. Note down that string for the next step.

  https://sabare.me/callback?code=$ACCESSCODE
Enter fullscreen mode Exit fullscreen mode

Step 4: Get the refresh token

  • Type the following CURL command in your terminal and replaces all the variables with the information you noted in Step 1 and Step 3 : $CILENT_ID, $CLIENT_SECRET, $CODE, and $REDIRECT_URI.
  curl -d client_id=$CLIENT_ID -d client_secret=$CLIENT_SECRET -d grant_type=authorization_code -d code=$CODE -d redirect_uri=$REDIRECT_URI https://accounts.spotify.com/api/token
Enter fullscreen mode Exit fullscreen mode
  • The resulting JSON string will look something like this. Note down the refresh_token. This token will last for a very long time and can be used to generate a fresh access_token whenever it is needed.
  {
    "access_token": "ACCESS_TOKEN",
    "token_type": "Bearer",
    "expires_in": 3600,
    "refresh_token": "REFRESH_TOKEN",
    "scope": "playlist-modify-private"
  }
Enter fullscreen mode Exit fullscreen mode

Top comments (2)

Collapse
 
behrjozef profile image
Jozef Behr

Thank you mate, I have no idea about this . I will surely try this .

Collapse
 
sabareh profile image
Sabareh Author

It is a good customization to your personal website

Visualizing Promises and Async/Await 🀯

async await

☝️ Check out this all-time classic DEV post