Bubble.io and Google Fit integration: Step-by-Step Guide 2024

Integrating Bubble.io with Google Fit will require configuring Google API settings and setting up relevant workflows in Bubble. Here's a step-by-step guide for doing this:

Step 1: Enable Google Fitness API for your application

The very first step is to enable the Google Fitness API for your Google Cloud project. If you do not have a Google Cloud project, you need to create one. Follow the below steps in order to do so:

• Visit the Google Developers Console by clicking on this link
• Log in to your google account or create a new one.
• Click on the Select a Project dropdown and select the Project for which you want to enable the Google Fitness API.
• Click on Open in case the project is already created or if not then click on New Project.
• Fill in the Project Name and Location and click on `Create to create a new project.
• After selecting the project, click on the hamburger menu on the top left corner, go to APIs & Services and select Library.
• Type Fitness in the search bar and then select the Fitness API from the dropdown.
• Click on Enable to enable the Fitness API for your selected project.

Step 2: Creating OAuth 2.0 Client IDs

An OAuth 2.0 Client ID is required to authenticate requests associated with your project for usage and billing purposes.

• Navigate back to the Dashboard by clicking the hamburger menu on the top-left corner and then clicking on Dashboard.
• Click on the OAuth consent screen tab.
• Complete the form by providing application information such as your application's name, logo, and support email.
• Click on Save and Continue.
• Go through the Scopes and Test Users tab and finally click on Back to Dashboard.
• Now. Click on Credentials on the left sidebar.
• Click on Create Credentials at the top and select OAuth client ID.
• In the Application type field, select Web application.
• Enter a name for the client ID, for example, Bubble OAuth Client.
• In the Authorized redirect URIs field, you will need to enter your Bubble app’s URL, with /version-test/api/1.1/oauth_redirect on the end. For instance, if your Bubble app’s URL is https://fitapp.bubbleapps.io, you should enter https://fitapp.bubbleapps.io/version-test/api/1.1/oauth_redirect. If your app is on a custom domain, simply replace fitapp.bubbleapps.io with your custom domain.
• Click Create. You will be provided with a client ID and a client secret. Make sure to copy these and store them in a secure location.

Step 3: Setting up Bubble

Now that you have created a Google Cloud project and have enabled the API for it, you will now need to configure the Bubble settings.

• Navigate over to your application on Bubble.
• From the Bubble Dashboard, navigate to the Plugins tab and install the API Connector plugin if you have not done so already.
• Click on API Connector and ADD another API
• Fill in the details of the API with a name of your choice e.g. Google Fit
• Click on Authentication dropdown and select oAuth2 User-Agent Flow
• Fill in the details as follows. Replace the client_id and client_secret placeholders with the Client ID and Client Secret from your Google Cloud project.
  • Authorize: https://accounts.google.com/o/oauth2/v2/auth?client_id={{client_id}}&response_type=code&scope=https://www.googleapis.com/auth/fitness.activity.read https://www.googleapis.com/auth/fitness.body.read&include_granted_scopes=true&state=state_parameter_passthrough_value&redirect_uri=https://yourdomain.com/api/1.1/oauth_redirect
  • Token: https://oauth2.googleapis.com/token
  • UserIdKey: id
  • Client_id: Your client_id
  • Client_secret: Your client_secret
• Save these settings.

Step 4: Setting up workflows to authorize access

Now that we have set up both Google and Bubble, all we need to do now is create a workflow in Bubble to authorize users for accessing their Google Fitness data.

• Navigate back to Bubble’s design tab and then go to the page where you want the login to appear.
• Add a button to the page for authorizing Google Fitness.
• Go to the Workflow tab, click + to add a new workflow, select the button that you added in the previous step, and click Start/Edit workflow.
• Add an API Connector action, and select Signup/Login with a social network.
• From the Provider dropdown, select the Google Fit API you created.
• Test the workflow by previewing your app and clicking on the button.

That is it! You have successfully integrated Bubble with Google Fit. Users will be asked to authorize access to their Google Fit data upon clicking on the Authorize Google Fit button in your Bubble app.

Troubleshooting

If you encounter any issues during the setup, verify that you've accurately followed each step.

• Make sure the API is properly enabled in the Google Console.
• Double-check your OAuth 2.0 client ID and secret, including whether the redirect URLs in the Google Console and Bubble match.
• Verify that the scopes requested during the OAuth flow match the ones enabled in the Google Console.
• Ensure that you’ve installed and correctly set up the API Connector plugin on Bubble.
• Lastly, refer to the Google Fit and Bubble documentation if you need more help understanding specific fields or settings.