You are here

How to Authenticate Spotify's Web API from a React and React-Router App

Spotify’s music streaming service allows users to access millions of songs, prompting the tagline, 'Music for everyone'. This ubiquity of music has spawned a range of applications that use Spotify APIs to tailor the music experience to suit the user’s intentions.
A popular integration is song recognition platform Shazam’s use of the Spotify API to allow tagged tracks to be added directly to a Spotify playlist from within the Shazam app. In this tutorial, Jon Kaufman shows followers how to deal with Spotify’s Web API authorization process from React and React-Router apps.
Kaufman supplies a link to the GitHub repo where users will be building the app, starting with directing clients to Spotify’s authorization URL, which will then redirect them to the specified endpoint upon completion. The app uses a random string attached to the user’s cookie in an earlier step to ensure it is the same user that was originally directed to Spotify for authentication and not some malicious software.
The author then sets up roots to provide access to the access token, refresh token and error message via this.props.params. The error page component is fairly straightforward, but the user workflow has to set the access and refresh tokens before requesting information from Spotify directly.
Defining the error and user pages in this way gives developers control over what is displayed in the client by routing it correctly from the server. All of the code for this simple implementation is provided, with links to a more in-depth explanation of the code structure and the running of the application in the README for the GitHub repo.

Be sure to read the next Authentication article: How and When to Use Various API Authentication Methods

Original Article

Spotify Auth + React Router = yumm