Setting Up a Spotify Listening Activity with Cloudflare Workers

March 31, 2025

Share

If you liked the Spotify listening activity feature on my homepage and want to implement it for yourself, I prepared this guide to help you through the process of setting up a this feature using Cloudflare Workers. I selected Cloudflare Workers for this job because it is fast, serverless, and easy to deploy and has generous free tier limits.

Step 1: Create a Spotify Developer Account & App

The first step is to register a developer account with Spotify and create an application. Head over to the Spotify Developer Dashboard. Once there, create a new app, and make sure to note down your Client ID and Client Secret. These will be used to authenticate your requests.

Next, add a redirect URI. This will be the endpoint that Spotify redirects to once you authenticate. For local development, you can use something like: http://localhost:3000/callback

Step 2: Set Up a Temporary Backend to Get the Refresh Token

Now, you need a temporary backend that will handle the OAuth authentication flow to fetch a refresh token. I used Express for this purpose. You can view the code for it at here, you can use it too. After getting the refresh token, you can delete this backend. Don't forget to note down the refresh token, as you will need it later.

Step 3: Set Up Cloudflare Worker

Time to configure your Cloudflare Worker. First, you need to install it and log in as:

npm install -g wrangler && wrangler login

After logging in, we need to create a directory for our worker. You can create it as:

mkdir spotify-worker
cd spotify-worker
mkdir src
touch src/index.js
touch wrangler.toml
touch .dev.vars

You can also use the wrangler init command, but I prefer to do it manually to deal with less configuration.

Step 4: Store Secrets for Authentication

Remember the things we noted down earlier? Now, we need to store them in the .dev.vars file like this:

SPOTIFY_CLIENT_ID=<your_client_id>
SPOTIFY_CLIENT_SECRET=<your_client_secret>
SPOTIFY_REFRESH_TOKEN=<your_refresh_token>

This file will be used to store your secrets locally for development. If you are using Git, make sure to add this to your .gitignore file.

Step 5: Set Up KV Storage

Next, you need to set up Cloudflare KV to store the refresh token and other details. Run the following command:

wrangler kv namespace create SPOTIFY_KV

This will create a new namespace for storing your data. Note the ID of the KV namespace, as you will need it on the next step.

Step 6: Make Configuration

Edit your wrangler.toml to include the KV namespace ID you just created, and add any necessary environment variables like the allowed origin:

name = "spotify-worker"
compatibility_date = "2024-03-31"

main = "src/index.js"

[[kv_namespaces]]
binding = "SPOTIFY_KV"
id = "your-kv-namespace-id"

[vars]
ALLOWED_ORIGIN = "https://yourdomain.com"

Step 7: Implement the Worker Logic

In your src/index.js, you will need to write the logic to handle the Spotify API calls using the stored refresh token and respond to incoming requests.You can find the implementation that I used for my homepage here.

Step 8: Test Locally & Deploy

Before deploying, it's essential to test your worker locally. Run:

wrangler dev

Once you're happy with the local test, add the secrets to Cloudflare using the wrangler secret put commands. Each secret will be prompted for input. You can do this by running:

wrangler secret put SPOTIFY_CLIENT_ID
wrangler secret put SPOTIFY_CLIENT_SECRET
wrangler secret put SPOTIFY_REFRESH_TOKEN

You don't need to deploy again after adding secrets since Wrangler automatically deploys your changes to Cloudflare Workers whenever you update the secrets. You can check the deployment status in the Cloudflare dashboard and test your deployment endpoint.

And that's it! You've successfully set up a Spotify listening activity feature using Cloudflare Workers. You can now expand this by adding more endpoints, error handling, and customizing it to fit your needs.