How to Integrate MyFitnessPal with V0

Open your V0 project and prompt V0 to generate the nutrition tracking interface. Describe the data you want to display — MyFitnessPal returns daily diary summaries with total calories, and a breakdown by macronutrient (calories from protein, carbohydrates, fat, fiber, sugar, sodium, cholesterol). You can also request individual diary entries listing each food logged with its nutritional values. A well-designed nutrition dashboard typically includes: a calorie summary card showing consumed vs goal, a macro breakdown displayed as a donut chart or progress bars, a food diary table listing each entry for the day, and a date navigation control to browse past days. You can also include a weekly trend chart showing calorie intake over the past 7 days. Ask V0 to fetch data from /api/myfitnesspal/diary (the route you'll create in the next step) and to handle the case where a user has not yet connected their MyFitnessPal account — in that case, show an 'Authorize MyFitnessPal' button that redirects to /api/myfitnesspal/auth. Use shadcn/ui components and Recharts (pre-installed with V0) for charts.

MyFitnessPal uses OAuth 2.0 for API access, so you need two API routes: one to start the authorization flow by redirecting to MyFitnessPal's authorization URL, and one to handle the callback and exchange the authorization code for an access token. The authorization route constructs the MyFitnessPal OAuth URL with your client ID, the required scopes (diary:read for food diary access, nutrition:read for nutrition data), and a redirect URI pointing back to your app. When a user clicks 'Connect MyFitnessPal', your frontend calls this route, which redirects them to the MyFitnessPal consent page. After the user approves, MyFitnessPal redirects back to your callback route with an authorization code. The callback route exchanges the authorization code for an access token by POST-ing to MyFitnessPal's token endpoint. Store the access token (and refresh token if provided) securely — in a database tied to the user's session, or in an encrypted cookie for single-user apps. Never expose the access token to the client-side JavaScript bundle. The scopes and exact endpoint URLs may vary — always refer to the current MyFitnessPal API documentation for the exact OAuth flow parameters.

1import { NextRequest, NextResponse } from 'next/server';
2
3const MFP_CLIENT_ID = process.env.MYFITNESSPAL_CLIENT_ID!;
4const MFP_REDIRECT_URI = process.env.MYFITNESSPAL_REDIRECT_URI!;
5const MFP_AUTH_URL = 'https://www.myfitnesspal.com/api/auth/authorize';
6
7// GET /api/myfitnesspal/auth — redirect to MFP OAuth
8export async function GET(request: NextRequest) {
9  const params = new URLSearchParams({
10    client_id: MFP_CLIENT_ID,
11    redirect_uri: MFP_REDIRECT_URI,
12    response_type: 'code',
13    scope: 'diary:read nutrition:read',
14  });
15
16  return NextResponse.redirect(`${MFP_AUTH_URL}?${params.toString()}`);
17}

Once a user has authorized your app and you have stored their access token, create the main diary data endpoint at app/api/myfitnesspal/diary/route.ts. This route reads the user's stored access token, calls the MyFitnessPal API to fetch the food diary for a specific date, and returns the nutrition data to your frontend. The MyFitnessPal API returns diary entries with nutritional values for each logged food. The response includes the food name, brand, serving description, and nutrient values (calories, protein, carbohydrates, fat, sodium, sugar, fiber). It also provides daily totals and the user's nutrition goals for comparison. For this example, the access token is read from a cookie or request header. In a real multi-user app, you would look up the token from a database using the authenticated user's session ID. The date parameter defaults to today if not provided. Handle token expiration by catching 401 responses and redirecting the user to re-authorize if the token has expired and cannot be refreshed.

1import { NextRequest, NextResponse } from 'next/server';
2
3const MFP_API_BASE = 'https://api.myfitnesspal.com/v2';
4
5export async function GET(request: NextRequest) {
6  const { searchParams } = new URL(request.url);
7  const date = searchParams.get('date') || new Date().toISOString().split('T')[0];
8
9  // In production, retrieve access token from database using session
10  // Here we read from a cookie as a simple example
11  const accessToken = request.cookies.get('mfp_access_token')?.value;
12
13  if (!accessToken) {
14    return NextResponse.json(
15      { error: 'Not authorized', authUrl: '/api/myfitnesspal/auth' },
16      { status: 401 }
17    );
18  }
19
20  try {
21    // Fetch diary summary for the date
22    const response = await fetch(
23      `${MFP_API_BASE}/diary?date=${date}`,
24      {
25        headers: {
26          Authorization: `Bearer ${accessToken}`,
27          'Content-Type': 'application/json',
28        },
29      }
30    );
31
32    if (response.status === 401) {
33      return NextResponse.json(
34        { error: 'Access token expired', authUrl: '/api/myfitnesspal/auth' },
35        { status: 401 }
36      );
37    }
38
39    if (!response.ok) {
40      return NextResponse.json(
41        { error: 'Failed to fetch diary data' },
42        { status: response.status }
43      );
44    }
45
46    const data = await response.json();
47    return NextResponse.json(data);
48  } catch (error) {
49    console.error('MyFitnessPal API error:', error);
50    return NextResponse.json(
51      { error: 'Failed to fetch nutrition data' },
52      { status: 500 }
53    );
54  }
55}

Your MyFitnessPal OAuth credentials must be stored as Vercel environment variables. You will need three variables: MYFITNESSPAL_CLIENT_ID, MYFITNESSPAL_CLIENT_SECRET, and MYFITNESSPAL_REDIRECT_URI. To find these credentials: log in to the MyFitnessPal developer portal, go to your application's OAuth settings, and copy the Client ID and Client Secret. These are assigned when your application is approved for API access. The redirect URI must match exactly what you register in the developer portal — use your production Vercel URL plus the callback path (e.g., https://your-app.vercel.app/api/myfitnesspal/callback). In Vercel Dashboard → Settings → Environment Variables, add all three variables. Set MYFITNESSPAL_CLIENT_ID and MYFITNESSPAL_REDIRECT_URI to your production values. Set MYFITNESSPAL_CLIENT_SECRET as a sensitive variable — it should never appear in logs or be accessible from client-side code. After adding all variables, trigger a redeployment for the changes to take effect. For local development, add these variables to your .env.local file, using a localhost redirect URI (http://localhost:3000/api/myfitnesspal/callback) that you have also registered in the developer portal.