Display your recently played Spotify tracks on your GitHub profile README. Powered by Vercel.
Check out lastfm-recently-played-readme for a similar integration for Last.fm scrobbles.
Click the button below to connect your Spotify account with the Vercel app. This is needed to access your recently played tracks.
By authorizing the app, you agree to have your Spotify username, access token, and refresh token stored on a secure Firebase database. This is required so you only need to authorize once and the app can automatically refresh access tokens in order to retrieve recent tracks.
You can revoke the app at https://www.spotify.com/account/apps.
After granting permission, just add the following into your README and set the user query parameter to your Spotify username.
Use the following snippet to make the widget link to your Spotify profile (or any other URL).
[](https://open.spotify.com/user/jeffreyca16)To a custom number of tracks, pass the query parameter count and set it to the number of tracks to display.
Default:
5
Min:1
Max:10
Example:
To set a custom card width, pass the query parameter width and set it to the desired width in px.
Default:
400
Min:300
Max:1000
Example:
To show only unique tracks of the recently played list, pass the unique query parameter and set it to true, 1, on, or yes.
Default:
false
Example:
Deploy your own Vercel instance using the link above. Next, set the following environment variables:
| Name | Description |
|---|---|
NEXT_PUBLIC_REDIRECT_URI |
Callback URI from Spotify |
NEXT_PUBLIC_BASE_URL |
Base URL of the project |
NEXT_PUBLIC_CLIENT_ID |
Spotify app client ID |
CLIENT_SECRET |
Spotify app client secret key |
FIREBASE_PROJECT_ID |
Firebase project ID |
FIREBASE_PRIVATE_KEY_B64 |
Base64-encoded string of Firebase private key |
FIREBASE_CLIENT_EMAIL |
Firebase client email |
FIREBASE_DATABASE_URL |
Firebase database URL |
WARMUP_KEY |
Secret to trigger Firebase database warmup (see Common issues for more info) |
Finally, edit utils/Constants.ts and set the ClientId, BaseUrl, RedirectUri values.
- Clone Git repo
$ git clone https://github.com/JeffreyCA/spotify-recently-played-readme.git
- Install Node dependencies
$ npm install
- Create
.envfile containing required environment variables:NEXT_PUBLIC_REDIRECT_URI=<Callback URI from Spotify> NEXT_PUBLIC_BASE_URL=<Base URL of the project> NEXT_PUBLIC_CLIENT_ID=<Spotify app client ID> CLIENT_SECRET=<Spotify app client secret key> FIREBASE_PROJECT_ID=<Firebase project ID> FIREBASE_PRIVATE_KEY_B64=<Base64-encoded string of Firebase private key> FIREBASE_CLIENT_EMAIL=<Firebase client email> FIREBASE_DATABASE_URL=<Firebase database URL>
- Edit
utils/Constants.tsand set theClientId,BaseUrl,RedirectUrivalues. - Run development server
$ npm run dev
The app will be running at http://localhost:3000.
Sometimes you may encounter an issue where the widget fails to load on GitHub, with a 502 response from camo.githubusercontent.com. This is because GitHub proxies images and will timeout requests if they take too long. Long request times are usually a result of Firebase database cold starts, which can take up to several seconds (known issue).
As a workaround, there's an endpoint at /api/warmup?key=<WARMUP_KEY> which accepts a GET request with a single query parameter key. If it matches the environment variable WARMUP_KEY, then it will go ahead and issue a simple database read request to Firebase to keep it warm. For your own Vercel instance, you can setup a simple cron job to ping the endpoint every few minutes or so to prevent cold starts. I already do this with the hosted Vercel instance.
This is a bit of a hacky workaround and may not 100% eliminate the issue. If you have any better solutions or have general optimizations feel free to create a PR!