Using Firebase Cloud Functions for Spotify OAuth in Flutterflow
We have been hearing a lot about cloud computing, and I have been wondering how to apply cloud services to a simple app. Eureka! Here comes an interesting project that got my hands dirty with cloud computing. The app's main functionality is to display the last 10 played songs in Spotify on a FlutterFlow app.
To do this, I needed to implement OAuth, a standard protocol for authorization that allows users to share their private resources stored on one site with another site without providing their credentials. Let us explore how to utilize Firebase Cloud Functions to carry out the OAuth of Spotify in a Flutterflow app.
Project steps:
- Get the Authorization code from Spotify
- Get the access token/refresh token
- Display the data
(we will only cover step 1 in this article)
What you will need:
A Flutterflow app — A simple app with three pages will suffice for this project. I will delve more into this later.
A Spotify developer account — You should create an app and get to fill out a simple form like the one shown below
Filling out the fields above is straightforward, at least for me except for the redirect URI. What do you fill in there?
The redirect URI should be where you want your user to be redirected to once the authorization has been granted. Sure that is simple, it should be the page in the app that displays the last 10 played songs. But then again, it is not that simple! There are so many reasons why I choose to use cloud functions here instead of just a normal URL and I have discussed them here in this article. Today, I am going to use Firebase cloud functions.
Firebase Cloud Functions
Firebase Cloud Functions is a serverless framework that lets you automatically run backend code in response to events triggered by Firebase features and HTTPS requests. The beauty of Firebase Cloud Functions lies in its flexibility and scalability. With it, you no longer need to manage servers. You can simply write your code and deploy it to Firebase. Firebase Cloud Functions are perfect for carrying out OAuth of Spotify in Flutterflow because they can handle the complex, server-side OAuth flow, while your Flutterflow app handles the user interface.
Spotify OAuth
Spotify’s OAuth service is designed to facilitate the process of user authorization and authentication, ensuring that every user is who they say they are. This authorization protocol involves multiple steps: directing the user to Spotify, asking them to authorize, redirecting them back to your app with an authorization code, and finally, exchanging that code for an access token. By integrating Spotify OAuth in your Flutterflow app, you can allow users to log in with their Spotify accounts, enabling you to personalize their experience based on their Spotify data.
Implementing Spotify OAuth in Flutterflow with Firebase
To implement Spotify OAuth in Flutterflow using Firebase Cloud Functions, you need to set up a Firebase function to handle the Spotify OAuth process. This function should send a request to Spotify’s Authorization Code API, handle the response (which includes the authorization code), and exchange the code for an access token using Spotify’s Access Token API. Once you have the access token, you can use it to make authorized API requests on behalf of the user. Remember, the Firebase function should be set to trigger on request, and it should be secured to prevent unauthorized usage.
Practical Steps to Implement Firebase Cloud Functions with Spotify OAuth in Flutterflow
Now that we’ve covered the theory, let’s dive into some practical steps on how to implement Spotify OAuth in Flutterflow with Firebase Cloud Functions.
Step 1: Setting Up Firebase Function
First, you need to set up a Firebase function in your Firebase project. This step involves writing a cloud function that sends a request to Spotify’s Authorization Code API. David East explains the process of setting up this cloud function very well in this video.
PRO-TIP: Don’t enable the ESLint unless you want to figure out lint issues.
Peter walks you through how to set up a cloud function in general. However, I want to set a cloud function specifically for Oauth. Here is the code that I used for the Auth. I have included comments in the code to make it easier to understand.
One thing that I should mention is the dynamic links. I have used them in the code to redirect the user to the desired FlutterFlow page. You can learn more about dynamic links here. They are still relevant even though they will be phased out soon.
Step 2: Setting Up the Spotify App
Once you have followed through my instructions, you will get a cloud function similar to mine. The URL below is what you copy and use in the redirect URI area on the Spotify app URL field in fig 1.
After clicking save you get your app details just like the ones shown below.
With that set up we can work on getting the link that we need to capture the authorization code and here is how mine looked like ( you need to refer to the spotify authorization documentation for this)
https://accounts.spotify.com/authorize?response_type=code&client_id=ad40bd048e634c5aa3124fab920d30e6&scope=user-read-recently-played&redirect_uri=https://us-central1-music-8iiz94.cloudfunctions.net/spotifyauth
This is the code that gets attached to a button on the Flutterflow page like the one shown below.
Once this button is clicked we are on our way to getting the Auth code and seeing the magic of cloud computing!
Be on the lookout for the next article where we handle the response that we get.
