How to Integrate Bolt.new with Withings

1# .env.local
2WITHINGS_CLIENT_ID=your_client_id_here
3WITHINGS_CLIENT_SECRET=your_consumer_secret_here
4WITHINGS_REDIRECT_URI=https://your-app.netlify.app/api/withings/callback
5NEXT_PUBLIC_APP_URL=https://your-app.netlify.app

1// app/api/withings/auth/route.ts
2import { NextResponse } from 'next/server';
3
4export async function GET() {
5  const params = new URLSearchParams({
6    response_type: 'code',
7    client_id: process.env.WITHINGS_CLIENT_ID!,
8    scope: 'user.metrics,user.activity,user.sleepevents',
9    redirect_uri: process.env.WITHINGS_REDIRECT_URI!,
10    state: crypto.randomUUID(),
11  });
12
13  const authUrl = `https://account.withings.com/oauth2_user/authorize2?${params}`;
14  return NextResponse.redirect(authUrl);
15}
16
17// app/api/withings/callback/route.ts
18import { NextRequest, NextResponse } from 'next/server';
19
20export async function GET(request: NextRequest) {
21  const code = request.nextUrl.searchParams.get('code');
22  if (!code) return NextResponse.redirect('/error?msg=no_code');
23
24  const tokenResponse = await fetch('https://wbsapi.withings.net/v2/oauth2', {
25    method: 'POST',
26    headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
27    body: new URLSearchParams({
28      action: 'requesttoken',
29      grant_type: 'authorization_code',
30      client_id: process.env.WITHINGS_CLIENT_ID!,
31      client_secret: process.env.WITHINGS_CLIENT_SECRET!,
32      code,
33      redirect_uri: process.env.WITHINGS_REDIRECT_URI!,
34    }),
35  });
36
37  const data = await tokenResponse.json();
38  if (data.status !== 0) {
39    return NextResponse.redirect('/error?msg=token_exchange_failed');
40  }
41
42  const { access_token, refresh_token, expires_in, userid } = data.body;
43  const response = NextResponse.redirect('/dashboard');
44
45  // Store tokens in HTTP-only cookies
46  response.cookies.set('withings_access_token', access_token, {
47    httpOnly: true,
48    secure: process.env.NODE_ENV === 'production',
49    maxAge: expires_in,
50  });
51  response.cookies.set('withings_refresh_token', refresh_token, {
52    httpOnly: true,
53    secure: process.env.NODE_ENV === 'production',
54    maxAge: 60 * 60 * 24 * 30, // 30 days
55  });
56  response.cookies.set('withings_user_id', userid.toString(), {
57    httpOnly: true,
58    secure: process.env.NODE_ENV === 'production',
59    maxAge: 60 * 60 * 24 * 30,
60  });
61
62  return response;
63}

1// app/api/withings/measurements/route.ts
2import { NextRequest, NextResponse } from 'next/server';
3
4function applyUnit(value: number, unit: number): number {
5  return value * Math.pow(10, unit);
6}
7
8export async function GET(request: NextRequest) {
9  const accessToken = request.cookies.get('withings_access_token')?.value;
10  if (!accessToken) {
11    return NextResponse.json({ error: 'Not authenticated' }, { status: 401 });
12  }
13
14  const endDate = Math.floor(Date.now() / 1000);
15  const startDate = endDate - 30 * 24 * 60 * 60; // 30 days ago
16
17  const params = new URLSearchParams({
18    action: 'getmeas',
19    meastype: '1,6,8,76', // weight, body fat, fat mass, muscle mass
20    category: '1',
21    startdate: startDate.toString(),
22    enddate: endDate.toString(),
23  });
24
25  const response = await fetch(
26    `https://wbsapi.withings.net/measure?${params}`,
27    {
28      headers: { Authorization: `Bearer ${accessToken}` },
29    }
30  );
31
32  const data = await response.json();
33
34  if (data.status !== 0) {
35    return NextResponse.json(
36      { error: 'Withings API error', status: data.status },
37      { status: 400 }
38    );
39  }
40
41  // Transform Withings format into clean measurement objects
42  const measurements = data.body.measuregrps.map((group: any) => {
43    const date = new Date(group.date * 1000).toISOString().split('T')[0];
44    const measures: Record<string, number> = {};
45
46    group.measures.forEach((m: any) => {
47      const value = applyUnit(m.value, m.unit);
48      switch (m.type) {
49        case 1: measures.weight_kg = parseFloat(value.toFixed(2)); break;
50        case 6: measures.body_fat_pct = parseFloat(value.toFixed(1)); break;
51        case 8: measures.fat_mass_kg = parseFloat(value.toFixed(2)); break;
52        case 76: measures.muscle_mass_kg = parseFloat(value.toFixed(2)); break;
53      }
54    });
55
56    return { date, ...measures };
57  });
58
59  return NextResponse.json({ measurements });
60}

1// app/dashboard/page.tsx
2'use client';
3import { useEffect, useState } from 'react';
4import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer } from 'recharts';
5
6interface Measurement {
7  date: string;
8  weight_kg?: number;
9  body_fat_pct?: number;
10}
11
12interface SleepSummary {
13  date: string;
14  total_sleep_minutes: number;
15  sleep_efficiency: number;
16}
17
18export default function Dashboard() {
19  const [connected, setConnected] = useState<boolean | null>(null);
20  const [measurements, setMeasurements] = useState<Measurement[]>([]);
21  const [sleep, setSleep] = useState<SleepSummary[]>([]);
22  const [loading, setLoading] = useState(true);
23
24  const fetchData = async () => {
25    setLoading(true);
26    const [status, meaRes, sleepRes] = await Promise.all([
27      fetch('/api/withings/status').then(r => r.json()),
28      fetch('/api/withings/measurements').then(r => r.json()),
29      fetch('/api/withings/sleep').then(r => r.json()),
30    ]);
31    setConnected(status.connected);
32    if (meaRes.measurements) setMeasurements(meaRes.measurements);
33    if (sleepRes.summaries) setSleep(sleepRes.summaries);
34    setLoading(false);
35  };
36
37  useEffect(() => { fetchData(); }, []);
38
39  if (!connected) {
40    return (
41      <div className="flex items-center justify-center min-h-screen">
42        <div className="text-center p-8 border rounded-lg shadow-sm">
43          <h2 className="text-2xl font-semibold mb-4">Connect Your Withings Devices</h2>
44          <p className="text-gray-500 mb-6">Authorize access to view your health data</p>
45          <a href="/api/withings/auth" className="bg-blue-600 text-white px-6 py-3 rounded-lg hover:bg-blue-700">
46            Connect Withings
47          </a>
48        </div>
49      </div>
50    );
51  }
52
53  const latest = measurements[measurements.length - 1];
54  const lastSleep = sleep[sleep.length - 1];
55
56  return (
57    <div className="max-w-4xl mx-auto p-6">
58      <div className="flex justify-between items-center mb-6">
59        <h1 className="text-2xl font-bold">Health Dashboard</h1>
60        <button onClick={fetchData} className="text-sm border px-4 py-2 rounded hover:bg-gray-50">
61          Refresh
62        </button>
63      </div>
64      <div className="grid grid-cols-2 md:grid-cols-4 gap-4 mb-8">
65        <div className="p-4 border rounded-lg">
66          <p className="text-sm text-gray-500">Weight</p>
67          <p className="text-2xl font-bold">{latest?.weight_kg ?? '--'} kg</p>
68        </div>
69        <div className="p-4 border rounded-lg">
70          <p className="text-sm text-gray-500">Body Fat</p>
71          <p className="text-2xl font-bold">{latest?.body_fat_pct ?? '--'}%</p>
72        </div>
73        <div className="p-4 border rounded-lg">
74          <p className="text-sm text-gray-500">Sleep Duration</p>
75          <p className="text-2xl font-bold">
76            {lastSleep ? `${(lastSleep.total_sleep_minutes / 60).toFixed(1)}h` : '--'}
77          </p>
78        </div>
79        <div className="p-4 border rounded-lg">
80          <p className="text-sm text-gray-500">Sleep Efficiency</p>
81          <p className="text-2xl font-bold">{lastSleep?.sleep_efficiency ?? '--'}%</p>
82        </div>
83      </div>
84      <div className="border rounded-lg p-4">
85        <h3 className="font-semibold mb-4">Weight Trend (30 days)</h3>
86        <ResponsiveContainer width="100%" height={250}>
87          <LineChart data={measurements}>
88            <CartesianGrid strokeDasharray="3 3" />
89            <XAxis dataKey="date" tick={{ fontSize: 11 }} />
90            <YAxis domain={['auto', 'auto']} />
91            <Tooltip />
92            <Line type="monotone" dataKey="weight_kg" stroke="#2563eb" dot={false} strokeWidth={2} />
93          </LineChart>
94        </ResponsiveContainer>
95      </div>
96    </div>
97  );
98}

1// app/api/withings/status/route.ts
2import { NextRequest, NextResponse } from 'next/server';
3
4export async function GET(request: NextRequest) {
5  const token = request.cookies.get('withings_access_token')?.value;
6  return NextResponse.json({ connected: !!token });
7}
8
9// app/api/withings/disconnect/route.ts
10import { NextResponse } from 'next/server';
11
12export async function GET() {
13  const response = NextResponse.redirect('/');
14  response.cookies.delete('withings_access_token');
15  response.cookies.delete('withings_refresh_token');
16  response.cookies.delete('withings_user_id');
17  return response;
18}