Lovable and MyFitnessPal integration: Step-by-Step Guide 2025

 

Integrating Lovable with MyFitnessPal

 

This guide will help you integrate your Lovable project with MyFitnessPal using TypeScript. Follow each step carefully and add the provided code snippets exactly where specified.

 

Step 1: Create the MyFitnessPal Service File

 

Create a new file named MyFitnessPalService.ts inside a folder called services in your Lovable project. This file contains all functions to perform OAuth login, token exchange, and API calls.

import axios from 'axios';

export class MyFitnessPalService {
  private clientId: string;
  private clientSecret: string;
  private redirectUri: string;

  constructor(clientId: string, clientSecret: string, redirectUri: string) {
    this.clientId = clientId;
    this.clientSecret = clientSecret;
    this.redirectUri = redirectUri;
  }

  // Returns the OAuth URL that user should be redirected to for authentication.
  getAuthUrl(): string {
    const scope = 'read,write';
    return https://www.myfitnesspal.com/oauth/authorize?client_id=${this.clientId}&redirect_uri=${encodeURIComponent(this.redirectUri)}&response_type=code&scope=${scope};
  }

  // Exchanges an authorization code received from MyFitnessPal with an access token.
  async exchangeCodeForToken(code: string): Promise {
    const tokenUrl = 'https://www.myfitnesspal.com/oauth/token';
    const response = await axios.post(tokenUrl, {
      client_id: this.clientId,
      client_secret: this.clientSecret,
      granttype: 'authorizationcode',
      code: code,
      redirect_uri: this.redirectUri
    });
    return response.data.access_token;
  }

  // Example function to retrieve user's fitness data using the access token.
  async getUserFitnessData(accessToken: string): Promise {
    const apiUrl = 'https://api.myfitnesspal.com/v2/user'; // Replace with the actual endpoint if different.
    const response = await axios.get(apiUrl, {
      headers: {
        Authorization: Bearer ${accessToken}
      }
    });
    return response.data;
  }
}

 

Step 2: Create the Configuration File

 

Create a new file named myfitnesspal.config.ts inside a folder called config. This file holds your MyFitnessPal credentials and redirect URI.

export const MyFitnessPalConfig = {
  clientId: 'YOURCLIENTID',
  clientSecret: 'YOURCLIENTSECRET',
  redirectUri: 'YOURREDIRECTURI'
};

Replace the placeholder strings with your actual MyFitnessPal credentials and desired redirect URI.

 

Step 3: Integrate the MyFitnessPal Service in Your Main Application

 

In your main application file (for example, main.ts), import and use the MyFitnessPalService. This lets your Lovable app direct users to MyFitnessPal for authentication and then handle the callback.

import { MyFitnessPalService } from './services/MyFitnessPalService';
import { MyFitnessPalConfig } from './config/myfitnesspal.config';

const myFitnessPalService = new MyFitnessPalService(
  MyFitnessPalConfig.clientId,
  MyFitnessPalConfig.clientSecret,
  MyFitnessPalConfig.redirectUri
);

// Function to redirect the user to MyFitnessPal for authentication.
export function redirectToMyFitnessPal(): void {
  const authUrl = myFitnessPalService.getAuthUrl();
  window.location.href = authUrl;
}

// Function to handle the OAuth callback. This should be connected to the route that your redirectUri points to.
export async function handleMyFitnessPalCallback(): Promise {
  const urlParams = new URLSearchParams(window.location.search);
  const code = urlParams.get('code');
  if (code) {
    try {
      const accessToken = await myFitnessPalService.exchangeCodeForToken(code);
      const userData = await myFitnessPalService.getUserFitnessData(accessToken);
      console.log('User fitness data:', userData);
      // Process the userData as needed; for example, update your UI or store data.
    } catch (error) {
      console.error('Error during MyFitnessPal authentication:', error);
    }
  }
}

Insert the above functions in a section of your code that handles user authentication or routing so that they are executed when needed.

 

Step 4: Add Axios as a Dependency

 

Since Lovable does not have a terminal, you must manually add Axios in your package.json file. Open package.json and add the dependency "axios" under the dependencies section.

{
  "dependencies": {
    // ... other dependencies ...
    "axios": "^0.27.2"
  }
}

Save your package.json file. Your Lovable project should now include Axios when it rebuilds.

 

Step 5: Connect the Integration to Your Lovable App’s UI

 

Link your integration functions to your application’s user interface. For example, add a button in your UI that calls redirectToMyFitnessPal when clicked. Also, ensure that the route defined by your redirectUri invokes handleMyFitnessPalCallback to process the OAuth response.

You might add something like this in your UI code:

// Example button event binding in your UI code.
document.getElementById('myFitnessPalLoginButton')?.addEventListener('click', () => {
  redirectToMyFitnessPal();
});

// When your app loads the OAuth callback route, call:
handleMyFitnessPalCallback();

Make sure the button element with the ID myFitnessPalLoginButton exists in your HTML.

 

Final Notes

 

Ensure that you replace all placeholder values (such as YOURCLIENTID, YOURCLIENTSECRET, and YOURREDIRECTURI) with the actual values provided by MyFitnessPal. If your Lovable project has a different file structure or routing mechanism, adjust the file paths and integration points accordingly.