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

 

Step 1: Setting Up Google Developer Console

 

• Visit the Google Developer Console at https://console.developers.google.com/ and create a new project.
• Enable the Google Fitness API for your project.
• Create OAuth 2.0 credentials. Note down your API key and Client ID (ending with .apps.googleusercontent.com).
• Configure the OAuth consent screen for your project.

 

Step 2: Adding Google API Client Library Code

 

• Since v0 does not have a terminal, you need to include the Google API client library directly in your code.
• Insert the following TypeScript helper function to dynamically load the Google API client script. Create a new file called googleFit.ts in your project's source folder and add the code snippet below:

declare const gapi: any;

export function loadGapiClient(): Promise<void> {
  return new Promise((resolve) => {
    const script = document.createElement('script');
    script.src = 'https://apis.google.com/js/api.js';
    script.onload = () => resolve();
    document.body.appendChild(script);
  });
}

 

Step 3: Initializing Google Fit API

 

• In the same file (googleFit.ts), add a function to initialize the Google API client with your credentials and required scopes.
• This function will be used to load and initialize the Google Fit API.

export async function initGoogleFit() {
  await loadGapiClient();

  return new Promise((resolve, reject) => {
    gapi.load('client:auth2', async () => {
      try {
        await gapi.client.init({
          apiKey: 'YOURAPIKEY',  // Replace with your API key
          clientId: 'YOURCLIENTID.apps.googleusercontent.com', // Replace with your Client ID
          discoveryDocs: ['https://www.googleapis.com/discovery/v1/apis/fitness/v1/rest'],
          scope: 'https://www.googleapis.com/auth/fitness.activity.read'
        });
        resolve(gapi);
      } catch (error) {
        reject(error);
      }
    });
  });
}

 

Step 4: Implementing Sign-In and Data Fetching

 

• Still in the googleFit.ts file, add a function that signs in the user and makes a sample request to list Google Fit data sources.

export async function signInAndFetchSteps() {
  try {
    const googleAuth = gapi.auth2.getAuthInstance();
    const user = await googleAuth.signIn();
    // After signing in, call the Google Fit API to fetch user's data sources
    const response = await gapi.client.fitness.users.dataSources.list({
      userId: 'me'
    });
    console.log('Google Fit Data Sources:', response.result);
  } catch (error) {
    console.error('Error during Google Fit operation:', error);
  }
}

 

Step 5: Integrating Google Fit Functions into Your Main Code

 

• Create or update your main entry file (for example, main.ts) to import and use the Google Fit functions you created.
• Initialize the Google Fit API when your application loads and bind the sign-in function to a button click event.

import { initGoogleFit, signInAndFetchSteps } from './googleFit';

(async function() {
  try {
    await initGoogleFit();
    // Bind sign-in action to a button with id 'google-fit-signin'
    const signInButton = document.getElementById('google-fit-signin');
    if (signInButton) {
      signInButton.addEventListener('click', signInAndFetchSteps);
    }
  } catch (error) {
    console.error('Failed to initialize Google Fit:', error);
  }
})();

 

Step 6: Adding a Sign-In Button to Your HTML

 

• In your HTML file (for example, index.html), add a button element that users can click to connect their Google Fit account.

<button id="google-fit-signin">Connect to Google Fit</button>

 

Step 7: Replacing Credentials and Final Testing

 

• Replace YOURAPIKEY and YOURCLIENTID.apps.googleusercontent.com in the initialization function with the values obtained from the Google Developer Console.
• Save all the files. Since there is no terminal to run dependency installations, all dependencies are loaded at runtime via the script loader.
• Open your project in a browser. Click the "Connect to Google Fit" button to authenticate and fetch data from the Google Fit API.