How to Integrate Google Fit with V0

Set up the Google Cloud project and OAuth credentials needed to call the Google Fitness REST API. This is a prerequisite step done in Google Cloud Console before any code is written. Go to console.cloud.google.com and create a new project or select an existing one. In the left sidebar, go to APIs & Services → Library. Search for 'Fitness API' and click on Google Fitness API, then click Enable. This activates the API for your project. Next, configure the OAuth consent screen: go to APIs & Services → OAuth consent screen. Select 'External' for apps available to all Google users. Fill in the app name, user support email, and developer contact information. For scopes, you will add them in the next step. Add yourself as a test user while the app is in testing mode — external apps require verification before being publicly available. Click Save and Continue through the remaining steps. Now create OAuth credentials: go to APIs & Services → Credentials → Create Credentials → OAuth 2.0 Client IDs. Select 'Web application' as the application type. Add your Vercel deployment URL as an authorized JavaScript origin: https://your-app.vercel.app. Add your OAuth callback URL as an authorized redirect URI: https://your-app.vercel.app/api/auth/callback/google. For development, also add http://localhost:3000 and http://localhost:3000/api/auth/callback/google. After creating the OAuth client, download the JSON or copy the client ID and client secret. These become GOOGLE_CLIENT_ID and GOOGLE_CLIENT_SECRET in Vercel environment variables. Google Fitness API scopes you typically need: fitness.activity.read (steps, active minutes, workouts), fitness.sleep.read (sleep sessions), fitness.heart_rate.read (heart rate data), fitness.nutrition.read (nutrition logging). Request only the scopes your app actually uses — additional scopes require user consent and increase OAuth verification scrutiny.

1// app/api/auth/google/route.ts — OAuth initiation for Google Fit
2import { NextResponse } from 'next/server';
3
4export async function GET() {
5  const clientId = process.env.GOOGLE_CLIENT_ID;
6  const redirectUri = process.env.GOOGLE_REDIRECT_URI;
7
8  if (!clientId || !redirectUri) {
9    return NextResponse.json(
10      { error: 'Google OAuth not configured' },
11      { status: 500 }
12    );
13  }
14
15  const scopes = [
16    'https://www.googleapis.com/auth/fitness.activity.read',
17    'https://www.googleapis.com/auth/fitness.sleep.read',
18    'https://www.googleapis.com/auth/fitness.heart_rate.read',
19  ].join(' ');
20
21  const authUrl = new URL('https://accounts.google.com/o/oauth2/v2/auth');
22  authUrl.searchParams.set('client_id', clientId);
23  authUrl.searchParams.set('redirect_uri', redirectUri);
24  authUrl.searchParams.set('response_type', 'code');
25  authUrl.searchParams.set('scope', scopes);
26  authUrl.searchParams.set('access_type', 'offline'); // Required for refresh token
27  authUrl.searchParams.set('prompt', 'consent'); // Force consent to get refresh token
28
29  return NextResponse.redirect(authUrl.toString());
30}

Build the OAuth callback route that exchanges the authorization code for Google access and refresh tokens, and store them securely for use in subsequent API calls. Create app/api/auth/callback/google/route.ts. When Google redirects after user authorization, it includes a code parameter in the query string. Exchange this code for tokens by calling Google's token endpoint with the code, client credentials, and redirect URI. Google returns an access_token (expires in 1 hour), an expires_in value, and — critically — a refresh_token (permanent until revoked). For a single-user personal health dashboard, store the tokens in an encrypted cookie or Vercel KV (Upstash Redis) keyed by a session identifier. For multi-user applications where each user connects their own Google account, store tokens in your database associated with the user's profile. The refresh token is the most valuable piece: it allows your server to get new access tokens indefinitely without requiring the user to re-authorize. Store it in a database or Vercel KV rather than a short-lived cookie. The access token can be cached in memory or a short-lived cookie since it only needs to last 1 hour. After storing tokens, redirect the user to the dashboard page. The callback URL must exactly match what you registered in Google Cloud Console — even a trailing slash difference causes a redirect_uri_mismatch error.

1// app/api/auth/callback/google/route.ts
2import { NextRequest, NextResponse } from 'next/server';
3import { cookies } from 'next/headers';
4
5export async function GET(request: NextRequest) {
6  const { searchParams } = new URL(request.url);
7  const code = searchParams.get('code');
8  const error = searchParams.get('error');
9
10  if (error || !code) {
11    return NextResponse.redirect(new URL('/dashboard?error=oauth_failed', request.url));
12  }
13
14  const tokenResponse = await fetch('https://oauth2.googleapis.com/token', {
15    method: 'POST',
16    headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
17    body: new URLSearchParams({
18      code,
19      client_id: process.env.GOOGLE_CLIENT_ID!,
20      client_secret: process.env.GOOGLE_CLIENT_SECRET!,
21      redirect_uri: process.env.GOOGLE_REDIRECT_URI!,
22      grant_type: 'authorization_code',
23    }),
24  });
25
26  if (!tokenResponse.ok) {
27    return NextResponse.redirect(new URL('/dashboard?error=token_exchange_failed', request.url));
28  }
29
30  const tokens = await tokenResponse.json();
31
32  // Store tokens in httpOnly cookies (for single-user apps)
33  // For multi-user apps, store in database associated with user session
34  const response = NextResponse.redirect(new URL('/dashboard', request.url));
35  const cookieStore = cookies();
36
37  // Access token — short-lived, store in session cookie
38  response.cookies.set('google_access_token', tokens.access_token, {
39    httpOnly: true,
40    secure: process.env.NODE_ENV === 'production',
41    maxAge: tokens.expires_in,
42    path: '/',
43  });
44
45  // Refresh token — long-lived, store securely
46  if (tokens.refresh_token) {
47    response.cookies.set('google_refresh_token', tokens.refresh_token, {
48      httpOnly: true,
49      secure: process.env.NODE_ENV === 'production',
50      maxAge: 60 * 60 * 24 * 365, // 1 year
51      path: '/',
52    });
53  }
54
55  return response;
56}

Build the API routes that query the Google Fitness REST API for step counts, activity sessions, and sleep data using the stored access token. These are the routes your V0-generated dashboard components call. Create app/api/google-fit/steps/route.ts. The Google Fitness REST API uses a data aggregation model: you POST a request body specifying the data type, time range, and aggregation bucket (daily, weekly, monthly). The steps endpoint uses the com.google.step_count.delta data type aggregated into daily buckets. The API base URL is https://www.googleapis.com/fitness/v1/users/me/. The dataset endpoint returns raw data points, while the aggregateBy endpoint returns pre-aggregated summaries which is what most dashboards need. Always use the aggregateBy endpoint for dashboard data rather than the raw dataset endpoint — it returns fewer data points and is significantly faster. For dates, Google Fit uses milliseconds since epoch (Unix timestamp * 1000) rather than ISO date strings. Convert JavaScript Date objects to milliseconds for the startTimeMillis and endTimeMillis fields in your request. Handle the case where the access token has expired: read the token from the httpOnly cookie, attempt the Fitness API call, and if you get a 401 response, use the refresh token to get a new access token and retry the request. This token refresh logic should be a shared utility used by all Fitness API routes.

1import { NextRequest, NextResponse } from 'next/server';
2import { cookies } from 'next/headers';
3
4const FITNESS_API = 'https://www.googleapis.com/fitness/v1/users/me';
5
6async function refreshAccessToken(refreshToken: string): Promise<string | null> {
7  const response = await fetch('https://oauth2.googleapis.com/token', {
8    method: 'POST',
9    headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
10    body: new URLSearchParams({
11      refresh_token: refreshToken,
12      client_id: process.env.GOOGLE_CLIENT_ID!,
13      client_secret: process.env.GOOGLE_CLIENT_SECRET!,
14      grant_type: 'refresh_token',
15    }),
16  });
17  if (!response.ok) return null;
18  const data = await response.json();
19  return data.access_token;
20}
21
22export async function GET(request: NextRequest) {
23  const cookieStore = cookies();
24  let accessToken = cookieStore.get('google_access_token')?.value;
25  const refreshToken = cookieStore.get('google_refresh_token')?.value;
26
27  if (!accessToken && refreshToken) {
28    accessToken = await refreshAccessToken(refreshToken) || undefined;
29  }
30
31  if (!accessToken) {
32    return NextResponse.json({ error: 'Not authenticated with Google Fit' }, { status: 401 });
33  }
34
35  const { searchParams } = new URL(request.url);
36  const days = parseInt(searchParams.get('days') || '7');
37  const endTime = Date.now();
38  const startTime = endTime - days * 24 * 60 * 60 * 1000;
39
40  const body = {
41    aggregateBy: [{ dataTypeName: 'com.google.step_count.delta' }],
42    bucketByTime: { durationMillis: 86400000 }, // 1 day buckets
43    startTimeMillis: startTime.toString(),
44    endTimeMillis: endTime.toString(),
45  };
46
47  const response = await fetch(`${FITNESS_API}/dataset:aggregate`, {
48    method: 'POST',
49    headers: {
50      Authorization: `Bearer ${accessToken}`,
51      'Content-Type': 'application/json',
52    },
53    body: JSON.stringify(body),
54  });
55
56  if (response.status === 401) {
57    return NextResponse.json({ error: 'Token expired — please reconnect Google Fit' }, { status: 401 });
58  }
59
60  if (!response.ok) {
61    return NextResponse.json({ error: 'Failed to fetch step data' }, { status: response.status });
62  }
63
64  const data = await response.json();
65  const steps = (data.bucket || []).map((bucket: {
66    startTimeMillis: string;
67    dataset: Array<{ point: Array<{ value: Array<{ intVal?: number }> }> }>;
68  }) => ({
69    date: new Date(parseInt(bucket.startTimeMillis)).toISOString().split('T')[0],
70    steps: bucket.dataset[0]?.point[0]?.value[0]?.intVal || 0,
71  }));
72
73  return NextResponse.json({ steps, period: `${days}d` });
74}

Configure Google OAuth credentials in Vercel environment variables and test the end-to-end flow from Google OAuth authorization to health data display in your dashboard. In Vercel Dashboard → Settings → Environment Variables, add: GOOGLE_CLIENT_ID (from Google Cloud Console OAuth credentials), GOOGLE_CLIENT_SECRET (from Google Cloud Console), and GOOGLE_REDIRECT_URI (your production callback URL, e.g., https://your-app.vercel.app/api/auth/callback/google). Critically, update the Google Cloud Console OAuth credentials to add your Vercel deployment URL: go to Google Cloud Console → APIs & Services → Credentials → click your OAuth client → add https://your-app.vercel.app as an Authorized JavaScript Origin and https://your-app.vercel.app/api/auth/callback/google as an Authorized Redirect URI. Without this, Google will reject OAuth callbacks from your production deployment with a redirect_uri_mismatch error. After deploying, test the OAuth flow: click the 'Connect with Google' button, authorize through Google's consent screen, verify the redirect back to your dashboard works, and confirm step data appears in the charts. If the OAuth callback fails, check that the redirect URI in Google Cloud Console exactly matches what is in GOOGLE_REDIRECT_URI — case-sensitive, including or excluding trailing slashes. A key consideration for V0 developers: Google Fitness API access for apps in testing mode (OAuth verification not completed) is limited to 100 authorized test users. For personal dashboards, this limit is sufficient. For public apps, you need to complete Google's OAuth verification process, which requires a privacy policy URL and review by Google's trust and safety team.