How to Integrate Bolt.new with Google Fit

1// lib/google-fit.ts
2export const GOOGLE_OAUTH_BASE = 'https://accounts.google.com/o/oauth2';
3export const GOOGLE_FIT_BASE = 'https://www.googleapis.com/fitness/v1';
4
5export const FIT_SCOPES = [
6  'https://www.googleapis.com/auth/fitness.activity.read',
7  'https://www.googleapis.com/auth/fitness.body.read',
8  'https://www.googleapis.com/auth/fitness.sleep.read',
9].join(' ');
10
11export interface FitDataPoint {
12  date: string;
13  value: number;
14}
15
16export async function refreshAccessToken(refreshToken: string): Promise<string> {
17  const response = await fetch('https://oauth2.googleapis.com/token', {
18    method: 'POST',
19    headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
20    body: new URLSearchParams({
21      client_id: process.env.GOOGLE_CLIENT_ID!,
22      client_secret: process.env.GOOGLE_CLIENT_SECRET!,
23      refresh_token: refreshToken,
24      grant_type: 'refresh_token',
25    }),
26  });
27
28  if (!response.ok) {
29    throw new Error('Failed to refresh Google access token');
30  }
31
32  const data = await response.json();
33  return data.access_token;
34}
35
36export function nanoToMillis(nanos: number): number {
37  return Math.floor(nanos / 1_000_000);
38}
39
40export function millisToDateString(ms: number): string {
41  return new Date(ms).toISOString().split('T')[0];
42}

1// app/api/fit/callback/route.ts
2import { NextRequest, NextResponse } from 'next/server';
3
4export async function GET(request: NextRequest) {
5  const { searchParams } = request.nextUrl;
6  const code = searchParams.get('code');
7  const state = searchParams.get('state');
8  const error = searchParams.get('error');
9
10  if (error === 'access_denied') {
11    return NextResponse.redirect(new URL('/?error=fit_denied', request.url));
12  }
13
14  const storedState = request.cookies.get('google_oauth_state')?.value;
15  if (!state || state !== storedState) {
16    return NextResponse.redirect(new URL('/?error=state_mismatch', request.url));
17  }
18
19  const tokenResponse = await fetch('https://oauth2.googleapis.com/token', {
20    method: 'POST',
21    headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
22    body: new URLSearchParams({
23      code: code!,
24      client_id: process.env.GOOGLE_CLIENT_ID!,
25      client_secret: process.env.GOOGLE_CLIENT_SECRET!,
26      redirect_uri: process.env.GOOGLE_REDIRECT_URI!,
27      grant_type: 'authorization_code',
28    }),
29  });
30
31  if (!tokenResponse.ok) {
32    return NextResponse.redirect(new URL('/?error=token_failed', request.url));
33  }
34
35  const tokens = await tokenResponse.json();
36  const response = NextResponse.redirect(new URL('/dashboard', request.url));
37
38  if (tokens.refresh_token) {
39    response.cookies.set('google_refresh_token', tokens.refresh_token, {
40      httpOnly: true,
41      secure: process.env.NODE_ENV === 'production',
42      sameSite: 'lax',
43      maxAge: 30 * 24 * 60 * 60, // 30 days
44      path: '/',
45    });
46  }
47
48  response.cookies.delete('google_oauth_state');
49  return response;
50}

1// app/api/fit/steps/route.ts
2import { NextRequest, NextResponse } from 'next/server';
3import { refreshAccessToken, GOOGLE_FIT_BASE, millisToDateString } from '@/lib/google-fit';
4
5export async function GET(request: NextRequest) {
6  const refreshToken = request.cookies.get('google_refresh_token')?.value;
7  if (!refreshToken) {
8    return NextResponse.json({ error: 'Not authenticated', redirect: '/api/fit/login' }, { status: 401 });
9  }
10
11  let accessToken: string;
12  try {
13    accessToken = await refreshAccessToken(refreshToken);
14  } catch {
15    return NextResponse.json({ error: 'Token refresh failed', redirect: '/api/fit/login' }, { status: 401 });
16  }
17
18  const endTimeMs = Date.now();
19  const startTimeMs = endTimeMs - 30 * 24 * 60 * 60 * 1000; // 30 days ago
20
21  const body = {
22    aggregateBy: [{ dataTypeName: 'com.google.step_count.delta' }],
23    bucketByTime: { durationMillis: 86400000 }, // 1 day
24    startTimeMillis: startTimeMs,
25    endTimeMillis: endTimeMs,
26  };
27
28  const response = await fetch(`${GOOGLE_FIT_BASE}/users/me/dataset:aggregate`, {
29    method: 'POST',
30    headers: {
31      'Authorization': `Bearer ${accessToken}`,
32      'Content-Type': 'application/json',
33    },
34    body: JSON.stringify(body),
35  });
36
37  if (!response.ok) {
38    return NextResponse.json({ error: `Fitness API error: ${response.status}` }, { status: response.status });
39  }
40
41  const data = await response.json();
42
43  // Parse nested bucket → dataset → point structure
44  const stepsByDay = data.bucket
45    .map((bucket: any) => {
46      const date = millisToDateString(parseInt(bucket.startTimeMillis));
47      const steps = bucket.dataset[0]?.point?.reduce(
48        (sum: number, point: any) => sum + (point.value[0]?.intVal ?? 0),
49        0
50      ) ?? 0;
51      return { date, steps };
52    })
53    .filter((d: any) => d.steps > 0);
54
55  return NextResponse.json({ data: stepsByDay });
56}

1// app/components/StepsChart.tsx
2'use client';
3import { BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, ReferenceLine, Cell, ResponsiveContainer } from 'recharts';
4
5interface StepsData { date: string; steps: number; }
6
7function getBarColor(steps: number): string {
8  if (steps >= 10000) return '#22c55e'; // green — goal met
9  if (steps >= 7000) return '#f59e0b';  // amber — close
10  return '#ef4444';                      // red — below 7k
11}
12
13export function StepsChart({ data }: { data: StepsData[] }) {
14  const formatDate = (dateStr: string) => {
15    const d = new Date(dateStr + 'T12:00:00');
16    return d.toLocaleDateString('en-US', { month: 'short', day: 'numeric' });
17  };
18
19  return (
20    <div className="bg-white rounded-xl p-5 shadow-sm border border-gray-100">
21      <h3 className="text-sm font-semibold text-gray-500 uppercase tracking-wide mb-1">Daily Steps</h3>
22      <p className="text-xs text-gray-400 mb-4">Green = goal met (10,000+)</p>
23      <ResponsiveContainer width="100%" height={220}>
24        <BarChart data={data} margin={{ top: 10, right: 10, left: 0, bottom: 5 }}>
25          <CartesianGrid strokeDasharray="3 3" stroke="#f0f0f0" vertical={false} />
26          <XAxis
27            dataKey="date"
28            tickFormatter={formatDate}
29            tick={{ fontSize: 10, fill: '#9ca3af' }}
30            interval={Math.floor(data.length / 6)}
31          />
32          <YAxis tick={{ fontSize: 10, fill: '#9ca3af' }} tickFormatter={v => `${(v/1000).toFixed(0)}k`} />
33          <Tooltip
34            formatter={(value: number) => [value.toLocaleString(), 'Steps']}
35            labelFormatter={formatDate}
36          />
37          <ReferenceLine y={10000} stroke="#22c55e" strokeDasharray="4 4" label={{ value: 'Goal', fontSize: 10, fill: '#22c55e' }} />
38          <Bar dataKey="steps" radius={[3, 3, 0, 0]}>
39            {data.map((entry, index) => (
40              <Cell key={index} fill={getBarColor(entry.steps)} />
41            ))}
42          </Bar>
43        </BarChart>
44      </ResponsiveContainer>
45    </div>
46  );
47}

1# netlify.toml
2[build]
3  command = "npm run build"
4  publish = ".next"
5
6[[plugins]]
7  package = "@netlify/plugin-nextjs"
8
9[build.environment]
10  NODE_VERSION = "20"
11
12# Security headers
13[[headers]]
14  for = "/*"
15  [headers.values]
16    X-Frame-Options = "SAMEORIGIN"
17    X-Content-Type-Options = "nosniff"
18    Strict-Transport-Security = "max-age=31536000; includeSubDomains"