Lovable and Google Fit integration: Step-by-Step Guide 2025

 

Adding the Google Fit Dependency

 

• Since Lovable does not have a terminal window, open your package.json file in the project.
• In the dependencies section, add the following entry to include the Google APIs client library:

• 
  {
    "dependencies": {
      "googleapis": "^111.0.0"
      // ... other dependencies
    }
  }
        

• This code tells Lovable to include the Google APIs package which contains the Google Fit API client.

 

Creating a New Google Fit Service File

 

• Create a new file in your project. Name it googleFitService.ts (you can place it in a folder like services if you prefer organization).
• Copy the following TypeScript code snippet into that file. This code sets up the Google Fit integration using OAuth2:

• 
  import { google } from 'googleapis';
  
  const oauth2Client = new google.auth.OAuth2(
    'YOURCLIENTID',      // Replace with your Google API client ID
    'YOURCLIENTSECRET',  // Replace with your Google API client secret
    'YOURREDIRECTURI'    // Replace with your OAuth2 redirect URI
  );
  // Generate the url that will be used for the consent dialog.
  export const getAuthUrl = (): string => {
    const scopes = [
      'https://www.googleapis.com/auth/fitness.activity.read',
      'https://www.googleapis.com/auth/fitness.location.read'
    ];
    return oauth2Client.generateAuthUrl({
      access_type: 'offline',
      scope: scopes
    });
  };
  // Function to set tokens once user grants permission
  export const setTokens = (code: string): Promise => {
    return oauth2Client.getToken(code).then(response => {
      oauth2Client.setCredentials(response.tokens);
    });
  };
  // Function to access user's step count data from Google Fit
  export const getDailySteps = async (userId: string, startTimeMillis: number, endTimeMillis: number): Promise => {
    const fitness = google.fitness({ version: 'v1', auth: oauth2Client });
    const requestBody = {
      aggregateBy: [{
        dataTypeName: 'com.google.step_count.delta'
      }],
      bucketByTime: { durationMillis: (endTimeMillis - startTimeMillis) },
      startTimeMillis,
      endTimeMillis
    };
    const response = await fitness.users.dataset.aggregate({
      userId: 'me',
      requestBody
    });
    return response.data;
  };
        

  
  




• Remember to replace YOURCLIENTID, YOURCLIENTSECRET, and YOURREDIRECTURI with your actual credentials from the Google Developer Console.

 

Integrating the Google Fit Service into Your Application

 

• Open the main file of your Lovable project where you want to use the Google Fit functionality (for example, main.ts or index.ts).
• Import the functions from googleFitService.ts by adding the following code at the top of your file:

• 
  import { getAuthUrl, setTokens, getDailySteps } from './googleFitService';
        

• To start the OAuth process, add a route or button handler that opens the Google consent URL. For example:

• 
  // Example function to redirect user to Google authorization
  export const redirectToGoogleFitAuth = (): void => {
    const url = getAuthUrl();
    window.location.href = url;
  };
  
  // Example callback function to handle the OAuth2 callback and display steps
  export const handleGoogleFitCallback = async (): Promise => {
    // Assume the URL contains the ?code= parameter after redirection
    const params = new URLSearchParams(window.location.search);
    const code = params.get('code');
    if (code) {
      await setTokens(code);
  // Define the time window (e.g., for today's steps)
  const startTime = new Date();
  startTime.setHours(0, 0, 0, 0);
  const endTime = Date.now();
  
  // Call the Google Fit API to get step count data
  const stepsData = await getDailySteps('me', startTime.getTime(), endTime);
  console.log('Steps Data:', stepsData);
  
  // Process and display the data as needed in your Lovable project.
  
    }
  };
        

  
  




• This integration adds two main functionalities:
  
  
  
  • A redirection to the Google consent screen.
  
  
  • Handling the OAuth callback to fetch the user’s daily step data.
  
  
  
  

 

Inserting the Integration into Your UI

 

• Add buttons or links in your Lovable project’s UI that trigger the functions above.
• For instance, create a button that when clicked, calls redirectToGoogleFitAuth():

• 
  <button onclick="redirectToGoogleFitAuth()">Connect Google Fit</button>
        

• Also, ensure that your project is set to run the handleGoogleFitCallback() function after redirection by checking the URL for the OAuth code parameter.

 

Testing Your Integration

 

• After inserting the code snippets, save your changes.
• Click the "Connect Google Fit" button to start the OAuth flow. You will be redirected to the Google consent page.
• Grant permissions and then be redirected back to your application where handleGoogleFitCallback() processes the returned code and fetches your step data.
• Open the console to verify that the steps data is successfully logged.