Creating a Serverless Spotify Search App Using React, AWS Lambda, and API Gateway.

Introduction

To further my coding journey, I decided to learn React. I enrolled in the React JS and Redux-Mastering Web Apps course offered through Udemy. While working on the “Building MusicMaster- with an API” section of the course, I encountered a problem. The tutorial was originally made at a time when Spotify didn’t require an access token to use its API. However, Spotify now requires an access token and I needed some way to retrieve one.

In order to retrieve an access token, a back end server is needed for security reasons. Retrieval of an access token requires sending the Client ID and Client Secret key that are issued by Spotify when creating a developer account. Since these are unique and tied to the developer’s account, security measures should be made to ensure their safety. If they are able to be retrieved from the client, anyone can have access to them and can possibly use them in negative ways. Maintaining the Client ID and Client Secret keys on the server vice the client keeps them out of the hands of a malicious user.

I could have used node as a backend server. In fact, one of the course’s previous students blogged about a work around that he had created that allows you access to Spotify’s API using a node server. That article can be found here.

However, I didn’t want to run and maintain a local node server. I decided to use an AWS Lambda function coupled with AWS API Gateway to retrieve the Spotify access token. In this post, I will explain how I combined the two in order to retrieve an access token.

Design

Amazon says that AWS Lambda “…lets you run code without having to provide or manage a server(s). You can run code for any application or backend service with no administration.” Additionally, AWS API Gateway provides API endpoints that can be connected to Lambda functions. Connecting an API Gateway to the Lambda creates an API endpoint that the client can call. This combination allows me to retrieve a Spotify access token without disclosing the Client ID and Client Secret keys.

Building An AWS Account

An AWS account is require to use AWS features. Setting up an account is fairly simple:

1. Go to https://aws.amazon.com/
2. Click the “Sign in to the Console” button on to create an account if you don’t already have one.

Then follow the prompts until the account is created. Once the account is created and confirmed, you can proceed to building the Lambda function.

Building the Lambda Function

Creating a Lambda function is fairly simple.

1. From the AWS console, locate “Lambda” under the compute section and click on it to enter the Lambda dashboard.
2. Click the orange “Create function”. Step 1.
3. Select blueprint. Click the” Author from scratch” button. This will take you to the “Configure Triggers” screen
4. Click “next” because the API Gateway trigger will be added later.
5. Fill out the basic information section on the “Configure Function” screen and select Node.js 6.10 for the runtime.

My code to get an access token from Spotify is as follows:

The Lambda function begins execution after the “enter here” comment. It initially uses try and catch statements to catch any potential errors. The function “getAccessToken” is called in the try statement. It then fetches the access token from the Spotify API using the POST method of the “fetch” API.

The Spotify API sends back a response which is turned into a json object using “response.json()”. Next, the Lambda’s “done” function is called with “null” passed to the “err”argument alongside a json object with the Spotify response when the API successfully completes. Finally, a 200 status code is sent back to the client with a message of “success” along with the access token.

On the other hand, if the fetch fails, the “catch” statement invokes the “done” function where “error” is passed as the argument. As a result, a 400 status code is sent back to the client with a message of “error”.

Building the API Gateway

Amazon describes API Gateway as “…service that makes it easy for developers to create, publish, maintain, monitor, and secure APIs at any scale.” There are many outstanding tutorials on the Internet discussing how to use API Gateway. Here is a tutorial I found that walks you through creating an API and then connecting it to a Lambda.

The API I created only has a resource called “access-token”. The resource uses the GET Method to trigger the Lambda function I discussed previously. After retrieving the access token from the Spotify API, the “done” method of the Lambda function passes a json object containing the results of the call through the API endpoint and back to the client.

Calling the API from the Client

Now that the endpoint is setup, it can be called from a client application. Using JavaScript’s fetch API, a call is made to the Gateway API endpoint using “GET”. The API responds with a json object that has a status of 200 and includes the access token if the Lambda is successful. On the other hand, a status of 400 indicates an error in the Lambda function. The client can check the status codes to determine subsequent actions such as storing the access token in the application state or displaying an error to the user.

The code below just writes the access token to state without checking if the access token was successfully retrieved.

Conclusion

In conclusion, my decision to use both AWS Lambda and AWS Gateway API turned out to be a good one. My Client ID and Client Secret are hidden from potential malicious users. Additionally, I didn’t have to setup and run a local node server. An added benefit is that the API is available whenever needed and it doesn’t cost anything to maintain it. Finally, I found the setup for the Lambda function and the API endpoint to be relatively easy.

Thanks for reading. If you would like to check out the finished app, you can find it here .