Building a Spotify Player inside a Web app

The following how-to will lead you to step by step create a simple full-stack application to host the Spotify player to play music along with the rest of the devices from your home. By the end of the how-to, you will have a fully working Spotify Player running on your browser similar to this one:

Let's start coding!

The Web Playback SDK requires Spotify Premium, so you'll need a premium account to use it.

This how-to assumes that you have some knowledge of JavaScript -both frontend using React and backend with Node.

Although not fully necessary, it is highly recommended to read the Quick Start Guide before this how-to.

The source code of the application can be found on the Spotifty GitHub repository. Feel free to fork it if you feel like it!

Go to Spotify for Developers portal and log in using your Spotify credentials (You can find the login button under the Dashboard).

The dashboard is where we can create apps, control the API credentials bound to the app or just get some nice app usage statistics. Click on the Create an APP button and provide a name and a short description of your new application. Finally, accept the terms and conditions and click on Create. Your new application contains your Client ID and Client Secret needed to authorize the application we are about to code to use the Spotify resources.

The easiest way to start a project based on React is using the create-react-app tool. Open a terminal and run the tool using the npx command:

npx is pre-bundled with npm since 5.2.0 version. The command creates a new folder called spotify-web-player that we will use as a template for our project, along with the package.json file which contains the project configuration.

Let's install the dependencies and test the project by running:

Go to your browser and open http://127.0.0.1:3000. If you see a spinning React logo, then the React project is ready.

Let's create a server folder which will contain the implementation of the backend:

Finally, let's add some extra commands to the package.json file to properly start the project. Open the package.json with your favorite editor and add the following entries inside the script section of the file:

Each entry corresponds with the following actions:

• start starts an HTTP server on port 3000 to serve the React application.
• build generates the static code ready to be deployed in production.
• server executes the index.js file located on the server folder.
• dev runs both client and server up using run-p tool to allow run multiple npm-scripts in parallel.

The run-p command belongs to the npm-run-all package. Let's install the dependency by running the following command:

Now that the project is ready, let's move forward and start coding the backend's authorization.

Spotify allows developers to authenticate in several ways. Our project will implement the Authorization Code flow, which is very convenient for long-running apps, such as web apps, where the user grants permissions only once.

Rather than hard-coding the user credentials inside the source code of our application, we are going to use the dotenv package to store and read them from a hidden configuration file.

Install the dependency with the following command:

Create a .env file in the root folder of the project and add the following variables using the NAME=VALUE format:

The values are now accessible as environment variables and can be read using process.env:

The idea behind the server is to export some basic endpoints to the frontend corresponding to the steps of the authorization flow:

• /auth/login to request user authorization by getting an Authorization Code.
• /auth/callback to request the Access Token using the Authorization Code requested in the previous step.

We will use Express to receive and handle all incoming requests to the server. Let's start by installing the package dependency:

Create a new index.js file inside the server folder with the following content:

We can test the server with the following command:

If everything goes fine, the server will start listening incoming requests on port 5000.

We are ready to start coding the authorization flow!

The first step is to redirect the user to a web page where they can choose to grant our application access to their premium account.

To do so, we need to send a GET request to the /authorize endpoint of the Spotify account service with the following parameters:

• response_type, is the credential that will be returned. The value will always be code.
• client_id, is the Client ID of the application we have just created on the portal dashboard.
• scope, a space-separated list of actions that our app can be allowed to do on a user's behalf. We need permission for streaming, user-read-email and user-read-private for the Web Player SDK.
• redirect_uri is the URL that Spotify's Authorization server will redirect once the access token is granted. Since we are running the project locally, our redirect URL will point to 127.0.0.1:3000/auth/callback since all petitions are handled from the frontend.
• state, a randomly generated string to protect against attacks such as cross-site request forgery.

Although state is not mandatory, is highly recommended including one. Here you have our proposal to generate randomly generated strings. Of course, feel free to implement something different:

We have everything we need to implement the user authorization request. The following code implements the GET method, which performs the redirection to the Spotify login screen to allow users to grant permissions:

Once the user approves the application request, the user is redirected back to the application using the redirect_uri passed on the authorized request http://127.0.0.1:3000/auth/callback just described above.

The callback contains two query parameters:

• An authorization code that will be exchanged for an access token.
• The same state supplied in the request.

Before continuing with the second step, we need to go back to the portal to allow our application to perform callbacks to the redirect_uri we have supplied on the previous call:

• Go to the Dashboard and select the application we created on the first step.
• Click on Edit Settings and add the URL callback http://127.0.0.1:3000/auth/callback under the Redirect URIs field.

Remember to click save for the changes to take effect.

Now that we have the authorization code, we must exchange it for tokens. Using the code from the previous step, we need to make a POST request to the /api/token endpoint.

The body of the request must be encoded in application/x-www-form-urlencoded with the following parameters:

• grant_type, must always contain the value authorization_code.
• code, is the authorization code returned on the previous step.
• redirect_uri, must exactly match the same value sent on the user authorization request (previous step). This value is used for validation only since there is no actual redirection.

We must also include the following HTTP headers:

• Authorization, is a base64 encoded string that contains the client ID and client secret keys. The field must have the format: Basic *<base64 encoded client_id:client_secret>*
• Content-type, set with the value application/x-www-form-urlencoded to inform the server about the encoding of the body.

As the POST HTTP call will be made using the request library, we need to install the dependency:

We are now ready to implement the /auth/callback endpoint of our server:

Note how the authentication ends with the access_token stored locally and redirection to /.

If everything goes well, we will receive an HTTP 200 response with the access_token in the payload of the response:

The backend implements the /auth/token endpoint to return the access token in JSON format. The code looks like this:

This access token will be used to instantiate the Web Playback SDK and, eventually, perform API calls using the Web APIs.

During the development phase, our React app and backend will run on different hosts and ports:

• The client runs on 127.0.0.1:3000
• The backend runs on 127.0.0.1:5000

Thus, we need to tell our React app where to find the server when doing API calls such as /auth/login or /auth/token.

There are different approaches to do so:

• Use the canonical URI on every API call.
• Adding a proxy field to the package.json file: "proxy": "http://127.0.0.1:5000".
• Set up our own proxy using the http-proxy-middleware package.

Let's include the package in our project by doing:

Now, add a new file called setupProxy.js to the src folder with the following content:

This way, all petitions with the /auth/** pattern will be redirected to the backend.

Let's start by implementing a welcome screen with a nice Login in button to start the authorization flow we have just implemented on the backend side.

Open the src/App.js and replace the current implementation with this one:

The component uses the useEffect hook to send a GET request to the /auth/token endpoint to check if we have a valid access_token already requested.

Once received, the access_token is stored using the setToken(), so the component will be rendered according to the following logic:

• The Login component will be loaded in case the access_token is still empty.
• If the access_token has been requested already (there is an active session ongoing), the WebPlaback component will load instead, receiving the access_token we have just requested.

Let's take a look at the Login component:

The login screen consists of one single button inviting users to log in. Once the user clicks on Login with Spotify, the component will perform a GET operation to /auth/login to start the authentication flow described on the previous section.

Let's create a new component to implement the web player. Create a new file called Webplayback.jsx and add a basic new React functional component as follows:

Add the useEffect hook so the instance of the Web Playback SDK object is created right before we render the page for the first time:

The first step to install the SDK is to load the library creating a new script tag within the DOM tree. As the onSpotifyWebPlaybackSDKReady method will be executed right after the Web Playback SDK has been successfully loaded, we create the Player instance inside the callback using the access_token supplied via React props

Once the Player object has been successfully created, we store the object using the userPlayer() hook, which has been defined as follows:

The callback also connects the events emitted by the SDK using the addListener method of the player. You can find detailed information about the events supported by the SDK on the SDK reference page

The events we want to get notified are:

• ready, emitted when the SDK is connected and ready to stream content.
• not_ready, in case the connection is broken.
• player_state_changed, emitted when the state of the local playback has changed (i.e., change of track).

Finally, the method calls to connect method to perform the connection of our new Spotify instance.

At this point we are ready to test the application:

1. Open a console and run the both client and server using the npm run dev command.
2. Open a browser and go to http://127.0.0.1:3000.
3. Click on the "Log in with Spotify" button.
4. Log in to Spotify using your credentials if you haven't done it yet.
5. Open any Spotify client. You should be able to see a new Spotify instance in the Spotify connect button.
6. If you switch to the new instance, the music should start playing within the browser.

Congrats! The first step has been successfully accomplished! What about displaying some cool information about the stream currently playing, such as artist, track or album cover?

Let's modify our WebPlayback component to store and display information about the track that is currently playing. Add the following hooks to the component:

• is_paused is a boolean variable that indicates whether the current track is being played or not.
• is_active to indicate whether the current playback has been transferred to this player or not.
• current_track, an object to store the currently playing track.

Next step, we need to define the track JSON object. Add the following code outside the component implementation:

Extend the useEffect() hook by adding a new eventListener to, once the event is emitted, update the component with the current track

Finally, let's display information about the track the user is currently playing. Replace the render method with the following code:

Once the playback is transferred to the browser, there is no way to modify the state of the playback, e.g. move to the next or previous tracks or pause/resume the playback.

Let's add three new buttons to the WebPlayback component that will call to nextTrack(), previousTrack(), and togglePlay() methods from the SDK:

There are different approaches to roll out your React application in production along with the backend server. In this how-to, we will cover the manual steps to build and place the code into one single folder.

Let's start by generating the React app and all the static assets:

If everything went fine, a new build folder will be generated containing all the generated files. You can check that the application works fine by using the serve HTTP server to serve the static files:

As we will be using the React server we have implemented through the how-to, we need to extend the backend server to serve static files. Open the server/index.js file and add the following line:

From now on, we can run the server and load files directly from the server, for example:

If you have reached this point, congratulations! Your first Spotify instance is up and running!

But this is just the beginning! What could we do next? Here you have some ideas to add to the prototype:

• Use the refresh_token field from the Request Access Token response to request a new token once the current one expires.
• Use the Search endpoint to include search capabilities by artist, albums, or tracks.
• Include a Transfer Playback button to transfer the current playback to another Spotify instance using the Get Playback State endpoint.
• Get and play any of your favourite playlists using the Get Playlist endpoint.