How to Integrate Garmin Connect with V0

Start in V0 and describe the fitness dashboard layout you want to build. Request components for different data types: an activity feed with cards showing activity type, distance, duration, and date; a metrics summary showing weekly totals; charts for heart rate and pace over time; and a sleep panel with sleep score and stage breakdown. V0 will generate React components with Tailwind styling and appropriate data visualization placeholders. Ask for loading skeleton states for all data-heavy sections since Garmin API calls have meaningful latency. Request TypeScript interfaces for activity and health data so the components are fully typed. A good design pattern for a fitness dashboard is a two-column layout with a summary sidebar and a main content area with the activity feed. Ask V0 to generate chart components using recharts (a popular library V0 knows well) for pace and heart rate visualizations. Make the dashboard responsive so it works on both desktop and mobile — athletes often check their dashboards on phones.

Garmin's Health API uses OAuth 1.0a, which requires signing every request with HMAC-SHA1. This is more complex than OAuth 2.0 but the pattern is consistent. You need three API routes: one to initiate the OAuth flow, one as the callback handler, and one utility for signing requests. The OAuth 1.0a flow works as follows: first, your app makes a signed request to Garmin's request token endpoint to get a temporary token. Then, you redirect the user to Garmin's authorization page with that token. After the user grants permission, Garmin redirects back to your callback URL with a verifier code. Your callback route exchanges the request token and verifier for a persistent access token that you store (typically in a database or encrypted cookie) for future API calls. Install the oauth-1.0a npm package (a lightweight library specifically for this) to handle the signature generation, which is complex to implement manually. The oauth-1.0a package handles the nonce generation, timestamp formatting, and HMAC-SHA1 signing required by the protocol.

1// app/api/garmin/auth/route.ts
2import { NextResponse } from 'next/server';
3import OAuth from 'oauth-1.0a';
4import crypto from 'crypto';
5
6const oauth = new OAuth({
7  consumer: {
8    key: process.env.GARMIN_CONSUMER_KEY!,
9    secret: process.env.GARMIN_CONSUMER_SECRET!,
10  },
11  signature_method: 'HMAC-SHA1',
12  hash_function(base_string, key) {
13    return crypto.createHmac('sha1', key).update(base_string).digest('base64');
14  },
15});
16
17export async function GET() {
18  try {
19    const requestTokenUrl = 'https://connectapi.garmin.com/oauth-service/oauth/request_token';
20    const callbackUrl = `${process.env.NEXT_PUBLIC_APP_URL}/api/garmin/callback`;
21
22    const requestData = {
23      url: requestTokenUrl,
24      method: 'POST',
25      data: { oauth_callback: callbackUrl },
26    };
27
28    const headers = oauth.toHeader(oauth.authorize(requestData));
29
30    const response = await fetch(requestTokenUrl, {
31      method: 'POST',
32      headers: {
33        ...headers,
34        'Content-Type': 'application/x-www-form-urlencoded',
35      },
36      body: `oauth_callback=${encodeURIComponent(callbackUrl)}`,
37    });
38
39    const responseText = await response.text();
40    const params = new URLSearchParams(responseText);
41    const requestToken = params.get('oauth_token');
42
43    if (!requestToken) {
44      return NextResponse.json({ error: 'Failed to get request token' }, { status: 500 });
45    }
46
47    const authUrl = `https://connect.garmin.com/oauthConfirm?oauth_token=${requestToken}`;
48    return NextResponse.redirect(authUrl);
49  } catch (error) {
50    console.error('Garmin OAuth init error:', error);
51    return NextResponse.json({ error: 'OAuth initialization failed' }, { status: 500 });
52  }
53}

Create the OAuth callback route at app/api/garmin/callback/route.ts that receives the oauth_token and oauth_verifier parameters from Garmin after the user authorizes your app. This route exchanges those credentials for a persistent access token by calling Garmin's access token endpoint. Store the returned oauth_token and oauth_token_secret securely — in a real application, save these to your database associated with the user's account. For this tutorial, you can temporarily store them in an encrypted HTTP-only cookie. Once you have the access token, create the activity fetching route at app/api/garmin/activities/route.ts. This route reads the stored access token, signs a request to the Garmin Health API activities endpoint, and returns the activity list to your frontend. The Garmin Health API activity list endpoint is at https://healthapi.garmin.com/wellness-api/rest/activities. Each activity includes activityType, startTimeInSeconds, durationInSeconds, distanceInMeters, averageHeartRateInBeatsPerMinute, and other detailed metrics. Convert the raw values to user-friendly units in your API route before returning them.

1// app/api/garmin/activities/route.ts
2import { NextRequest, NextResponse } from 'next/server';
3import OAuth from 'oauth-1.0a';
4import crypto from 'crypto';
5
6const oauth = new OAuth({
7  consumer: {
8    key: process.env.GARMIN_CONSUMER_KEY!,
9    secret: process.env.GARMIN_CONSUMER_SECRET!,
10  },
11  signature_method: 'HMAC-SHA1',
12  hash_function(base_string, key) {
13    return crypto.createHmac('sha1', key).update(base_string).digest('base64');
14  },
15});
16
17export async function GET(request: NextRequest) {
18  // In a real app, load these from your database for the authenticated user
19  const accessToken = request.cookies.get('garmin_access_token')?.value;
20  const accessSecret = request.cookies.get('garmin_access_secret')?.value;
21
22  if (!accessToken || !accessSecret) {
23    return NextResponse.json({ error: 'Not authenticated with Garmin' }, { status: 401 });
24  }
25
26  try {
27    const uploadStartTimeInSeconds = Math.floor(Date.now() / 1000) - 30 * 24 * 60 * 60; // 30 days ago
28    const uploadEndTimeInSeconds = Math.floor(Date.now() / 1000);
29
30    const activitiesUrl = `https://healthapi.garmin.com/wellness-api/rest/activities?uploadStartTimeInSeconds=${uploadStartTimeInSeconds}&uploadEndTimeInSeconds=${uploadEndTimeInSeconds}`;
31
32    const requestData = { url: activitiesUrl, method: 'GET' };
33    const token = { key: accessToken, secret: accessSecret };
34    const headers = oauth.toHeader(oauth.authorize(requestData, token));
35
36    const response = await fetch(activitiesUrl, { headers });
37
38    if (!response.ok) {
39      return NextResponse.json(
40        { error: `Garmin API error: ${response.status}` },
41        { status: response.status }
42      );
43    }
44
45    const data = await response.json();
46    return NextResponse.json({ activities: data });
47  } catch (error) {
48    console.error('Garmin activities error:', error);
49    return NextResponse.json({ error: 'Failed to fetch activities' }, { status: 500 });
50  }
51}

In the Vercel Dashboard, go to your project and navigate to Settings → Environment Variables. Add GARMIN_CONSUMER_KEY and GARMIN_CONSUMER_SECRET — both found in the Garmin Developer Portal under your registered application. Also add NEXT_PUBLIC_APP_URL, which is your Vercel deployment URL (e.g., https://your-app.vercel.app) — this one needs the NEXT_PUBLIC_ prefix because it is used to construct the callback URL in the auth route, and that string is not secret. In the Garmin Developer Portal, register your OAuth callback URL: add https://your-app.vercel.app/api/garmin/callback to your application's allowed callback URLs. Garmin requires that callback URLs be registered in advance — if the callback URL in your request does not match a registered URL, authorization will fail. For local development, register http://localhost:3000/api/garmin/callback as a separate allowed callback URL. After adding all environment variables in Vercel, redeploy your project. Garmin Consumer credentials are permanent once granted — they do not expire like some OAuth 2.0 access tokens, but they can be revoked through the Developer Portal.