Flutterflow and Fitbit Integration: A No-Code Nightmare Solved

I have been watching many videos online nowadays, mainly on TikTok. At some point, I felt like I was getting addicted and that also my heart rate was changing dramatically as I switched through the various genres of videos. I am sure I am not alone. To share data with my friends about our heart rates while scrolling through the feeds, I came up with a simple app that could fetch this data from Fitbit and display it on an app page.

It is seemingly simple right? An app that pulls heart rate information directly from my Fitbit. But connecting these two technologies using OAuth 2? Well, without some skills in JavaScript, and Flutter, this can turn into a nightmare! That is why I am writing this tutorial for you.

Let’s break down what I learned and how even a non-programmer can manage to pull this off.

The Frustration: Making Sense of OAuth

OAuth 2 sounds fancy, but in reality, it’s the system that lets apps “talk” to each other and share data (like your heart rate). In theory, the guides make it seem simple. In practice, it involved terminology and steps that seemed more appropriate for a NASA engineer.

The Solution: Breaking it Down

Here’s the thing: even if you don’t code, you can grasp these concepts, and they are important for the next steps:

Authorization: It’s like giving your Fitbit permission to share data with your app. This is what we do in the first step.

Tokens: Tiny secret codes that prove your app is allowed to get the info. We are given these codes (access codes) once the authorization is successful.

Endpoints: Think of these as special web addresses your app uses to ask for data. This occurs in our last steps.

The No-Code Triumph

After some online digging, here’s what finally worked for me in FlutterFlow:

Fitbit’s Developer Portal: Make an account and register your app. This is where you’ll get those important access codes (Client ID and Client secret).

Setting the Stage: Create a FlutterFlow project with a page having a button “Get Fitbit Auth”. We want to link up the button with a URL that directs you to the Fitbit authentication page, and here is when things get interesting. The URL should have a client ID, redirect URI, scope, and state, how do we do this?

Cloud functions come to the rescue!

We need a cloud function since FlutterFlow currently does not meet our needs. The cloud function that we will create should direct the user to the authentication page on FitBit. Here once the user grants the permission, Fitbit will send an authorization code back to the Flutterflow app.

We then use the Auth code to get access tokens which we exchange for user Fitbit’s data.

Why should we use Cloud Functions?

Secure Token Handling:

Cloud Functions lets you manage sensitive authorization tokens on the server side. This keeps them out of your front-end code, reducing the risks of them being stolen or misused.

They provide a secure environment to exchange authorization codes for access and refresh tokens.

Refreshing Access Tokens:

Access tokens usually have short lifespans. Cloud Functions can automatically refresh tokens behind the scenes, keeping your user’s Fitbit integration seamless.

But how do we create this cloud function?