Lovable and Garmin Connect integration: Step-by-Step Guide 2025

 

Creating the Garmin Connect Integration File

 

• Create a new file in your Lovable project directory called garminConnect.ts.
• This file will contain the TypeScript class to manage the OAuth flow and API requests with Garmin Connect.
• Copy and paste the following code snippet into garminConnect.ts:

export class GarminConnect {
  private clientId: string;
  private redirectUri: string;
  private authUrl: string;
  private tokenUrl: string;
  private scope: string;

  constructor(clientId: string, redirectUri: string) {
    this.clientId = clientId;
    this.redirectUri = redirectUri;
    // Garmin Connect OAuth2 endpoints (update these if Garmin updates their API)
    this.authUrl = 'https://connect.garmin.com/oauth2/authorize';
    this.tokenUrl = 'https://connect.garmin.com/oauth2/token';
    // Define the scopes your application needs (modify as required)
    this.scope = 'activity heartrate'; 
  }

  // Generates the URL where users need to login and authorize your app
  public getAuthorizationUrl(): string {
    const params = new URLSearchParams({
      client_id: this.clientId,
      redirect_uri: this.redirectUri,
      response_type: 'code',
      scope: this.scope,
    });
    return ${this.authUrl}?${params.toString()};
  }

  // Exchanges the authorization code obtained from Garmin for an access token
  public async exchangeCodeForToken(code: string): Promise {
    // Prepare the request payload. Replace 'YOURCLIENTSECRET' with your actual secret.
    const body = new URLSearchParams({
      granttype: 'authorizationcode',
      code: code,
      redirect_uri: this.redirectUri,
      client_id: this.clientId,
      clientsecret: 'YOURCLIENT_SECRET'
    });
    const response = await fetch(this.tokenUrl, {
      method: 'POST',
      headers: {
        'Content-Type': 'application/x-www-form-urlencoded',
      },
      body: body.toString(),
    });
    return response.json();
  }
}

 

Integrating Garmin Connect into Your Main Application File

 

• Open your main TypeScript file in the Lovable project where you handle user interactions (for example, main.ts).
• At the top of the file, import the GarminConnect class by adding the following line:

import { GarminConnect } from './garminConnect';

• Define your Garmin client credentials and redirect URI. Replace the placeholder strings with your actual Garmin Connect credentials:

const CLIENTID = 'YOURGARMINCLIENTID';
const REDIRECTURI = 'YOURREDIRECT_URI';

• Create an instance of the GarminConnect class:

const garmin = new GarminConnect(CLIENTID, REDIRECTURI);

• Assuming you have a button in your HTML with the id connectGarminBtn, add a click event listener to redirect users to the Garmin Connect authorization URL. Insert the following code in your main file:

document.getElementById('connectGarminBtn')?.addEventListener('click', () => {
  // Redirect the user to Garmin Connect's OAuth2 authorization page
  window.location.href = garmin.getAuthorizationUrl();
});

• After the user has been redirected and authorized your application, Garmin Connect will send them back to your redirect URI with a code in the URL parameters. Add the following code to extract the code and exchange it for an access token:

const urlParams = new URLSearchParams(window.location.search);
const code = urlParams.get('code');

if (code) {
  garmin.exchangeCodeForToken(code)
    .then(token => {
      console.log('Garmin Connect token:', token);
      // Here you can save the token to local storage or state to use in subsequent API calls
    })
    .catch(err => {
      console.error('Error exchanging code for token:', err);
    });
}

 

Handling Dependencies Without a Terminal

 

• Since Lovable does not have a terminal, you must include any necessary dependencies directly in your code if they are not already available.
• This integration uses the built-in fetch API, so no additional dependency installs are needed.
• If you later require any polyfills or external libraries, check if Lovable's environment allows including them via a <script> tag or similar loader in your project configuration.

 

Finalizing and Testing the Integration

 

• Ensure that your project contains the garminConnect.ts file and that your main application file includes the integration code as described.
• Create or update the HTML file in your project to include a button with the id connectGarminBtn if it does not already exist. For example:

<button id="connectGarminBtn">Connect to Garmin</button>

• Test your integration by opening your application and clicking the "Connect to Garmin" button. The user should be redirected to the Garmin Connect authorization page.
• After authorization, your application should capture the returned code and exchange it for an access token, which will be printed in the browser console.