---
title: "React Spotify Player"
description: "React Spotify Player: Shows what you're playing on Spotify, in a few small React files."
url: https://www.joekarlsson.com/work/react-spotify-player/
---

# React Spotify Player

Shows what you're playing on Spotify, in a few small React files.

2019

[View on GitHub →](https://github.com/JoeKarlsson/react-spotify-player) · [Read why I built it](https://www.joekarlsson.com/blog/how-to-build-a-spotify-player-with-react-in-15-minutes/)

React Spotify Player shows what you're listening to on Spotify: the album art, the track and artist, and a progress bar that moves along with the song. I built it in 2019 for a tutorial on building a Spotify player with React in 15 minutes, and it's still my most-starred open source project.

I'd been using the Spotify API for my MagicMirror, and I wanted the shortest path from nothing to a working player for front-end developers: log in with Spotify, call one endpoint, show the result. It's still small on purpose. The current version is just React and Vite, and the whole app fits in a handful of files.

If you're following the tutorial today, one warning: it logs in with Spotify's Implicit Grant flow, which Spotify deprecated in November 2025. New apps should use the Authorization Code flow with PKCE instead.

## Try it

```bash
git clone https://github.com/JoeKarlsson/react-spotify-player.git
cd react-spotify-player
# add http://localhost:3001 as a Redirect URI on your Spotify app,
# and put its Client ID in src/config/spotify.js
npm install
npm run dev
```

## How it's made

React · Spotify API · JavaScript

The login link sends you to Spotify, and Spotify sends you back with an access token in the URL, which the app keeps in your browser. Every 5 seconds it asks the Web API's `/me/player` endpoint what's playing, and when the token expires it asks you to log in again.

_Diagram: How React Spotify Player keeps up with what you're playing: the Login with Spotify link sends you to Spotify Accounts to approve three scopes, Spotify sends you back with a token that the player keeps in your browser, and every 5 seconds the player asks the Web API's /v1/me/player what's playing, until a 401 sends you back to log in_

[Get the code on GitHub →](https://github.com/JoeKarlsson/react-spotify-player) · [Read why I built it](https://www.joekarlsson.com/blog/how-to-build-a-spotify-player-with-react-in-15-minutes/)

[← All works](https://www.joekarlsson.com/work/)