How to Integrate HealthKit with V0

Open V0 at v0.dev and generate the web dashboard that will display Apple Health data. Since you're designing the display side first, V0 can work with realistic mock data to build the visualization components before the iOS sync pipeline is complete. Describe the specific health metrics you want to display, the chart types (line charts for trends, bar charts for weekly comparisons, ring charts for goal progress), and the time period selectors. V0 works especially well with chart-heavy dashboards when you reference shadcn/ui chart components or specify Recharts explicitly. The key design decisions are: what's the primary metric each user cares about (daily steps, sleep quality, heart rate variability), what time ranges are useful (today, 7 days, 30 days, 90 days), and should data display individual readings or daily aggregates. V0 generates React components with Tailwind CSS — for health data specifically, a mobile-responsive layout matters because many users will check their health stats on phones even in the web version. After generating the initial dashboard, push it to GitHub via V0's Git panel and verify it renders correctly with mock data in the Vercel preview deployment.

Create the Next.js API route that receives health data POSTed from the iOS app and stores it in your database. This route needs authentication to ensure only your iOS app can write data — implement a simple shared secret or JWT-based auth at minimum. Health data is highly sensitive, so never create a publicly writable endpoint without authentication. The API route accepts JSON payloads containing arrays of health samples (each sample has a type, value, unit, start date, and end date) along with a user identifier. Use a database schema with a health_samples table containing columns for user_id, sample_type (string like 'steps', 'heart_rate', 'sleep'), value (numeric), unit (string like 'count', 'bpm', 'hours'), recorded_at (timestamp), and synced_at (timestamp). For PostgreSQL via Neon, use Vercel's native marketplace integration which provisions DATABASE_URL automatically. The iOS app should batch sync health samples — sending the last 24 hours of data every hour, for example — rather than streaming individual readings in real time. Design the route to handle upserts (insert or update) so that re-syncing the same time period doesn't create duplicate records. Include rate limiting to prevent abuse if the endpoint is somehow discovered.

1// app/api/health/sync/route.ts
2import { NextRequest, NextResponse } from 'next/server';
3import { neon } from '@neondatabase/serverless';
4
5interface HealthSample {
6  type: string;        // 'steps' | 'heart_rate' | 'sleep' | 'active_calories'
7  value: number;
8  unit: string;        // 'count' | 'bpm' | 'hours' | 'kcal'
9  startDate: string;   // ISO 8601
10  endDate: string;     // ISO 8601
11}
12
13interface SyncRequest {
14  userId: string;
15  samples: HealthSample[];
16}
17
18const SYNC_SECRET = process.env.HEALTH_SYNC_SECRET;
19
20export async function POST(request: NextRequest) {
21  // Authenticate the request from the iOS app
22  const authHeader = request.headers.get('Authorization');
23  if (!authHeader || authHeader !== `Bearer ${SYNC_SECRET}`) {
24    return NextResponse.json({ error: 'Unauthorized' }, { status: 401 });
25  }
26
27  if (!process.env.DATABASE_URL) {
28    return NextResponse.json({ error: 'Database not configured' }, { status: 500 });
29  }
30
31  let body: SyncRequest;
32  try {
33    body = await request.json();
34  } catch {
35    return NextResponse.json({ error: 'Invalid JSON' }, { status: 400 });
36  }
37
38  const { userId, samples } = body;
39
40  if (!userId || !Array.isArray(samples) || samples.length === 0) {
41    return NextResponse.json(
42      { error: 'userId and samples array are required' },
43      { status: 400 }
44    );
45  }
46
47  // Limit batch size to prevent abuse
48  if (samples.length > 1000) {
49    return NextResponse.json(
50      { error: 'Maximum 1000 samples per sync' },
51      { status: 400 }
52    );
53  }
54
55  const sql = neon(process.env.DATABASE_URL);
56
57  // Create table if it doesn't exist (run migrations in production)
58  await sql`
59    CREATE TABLE IF NOT EXISTS health_samples (
60      id SERIAL PRIMARY KEY,
61      user_id TEXT NOT NULL,
62      sample_type TEXT NOT NULL,
63      value NUMERIC NOT NULL,
64      unit TEXT NOT NULL,
65      start_date TIMESTAMPTZ NOT NULL,
66      end_date TIMESTAMPTZ NOT NULL,
67      synced_at TIMESTAMPTZ DEFAULT NOW(),
68      UNIQUE(user_id, sample_type, start_date)
69    )
70  `;
71
72  // Upsert samples to handle re-syncs gracefully
73  let inserted = 0;
74  for (const sample of samples) {
75    try {
76      await sql`
77        INSERT INTO health_samples
78          (user_id, sample_type, value, unit, start_date, end_date)
79        VALUES
80          (${userId}, ${sample.type}, ${sample.value}, ${sample.unit},
81           ${sample.startDate}, ${sample.endDate})
82        ON CONFLICT (user_id, sample_type, start_date)
83        DO UPDATE SET
84          value = EXCLUDED.value,
85          synced_at = NOW()
86      `;
87      inserted++;
88    } catch (err) {
89      console.error('Sample insert error:', err);
90    }
91  }
92
93  return NextResponse.json({
94    success: true,
95    received: samples.length,
96    inserted,
97  });
98}

Create the API route that the V0-generated dashboard fetches data from. This route reads from the health_samples table and aggregates data for display — daily totals for step counts, daily averages for heart rate, nightly totals for sleep duration. The query aggregation happens in PostgreSQL using GROUP BY date functions, which is more efficient than fetching raw samples and aggregating in JavaScript. Implement user authentication on this route to ensure users can only see their own data — for V0-built apps, a simple user ID passed via a cookie or session token works, or integrate with Clerk or Auth.js for full authentication. Return data in a shape that maps directly to what your V0-generated chart components expect — typically an array of { date: string, value: number } objects for line charts. Add query parameters for date range (start and end dates) and metric type so the dashboard can fetch exactly the data it needs for each chart without over-fetching. Include sensible defaults (last 30 days) for cases where the parameters are not provided.

1// app/api/health/metrics/route.ts
2import { NextRequest, NextResponse } from 'next/server';
3import { neon } from '@neondatabase/serverless';
4
5export async function GET(request: NextRequest) {
6  const { searchParams } = new URL(request.url);
7  const userId = searchParams.get('userId') || 'demo-user';
8  const type = searchParams.get('type') || 'steps';
9  const days = parseInt(searchParams.get('days') || '30', 10);
10
11  if (!process.env.DATABASE_URL) {
12    return NextResponse.json({ error: 'Database not configured' }, { status: 500 });
13  }
14
15  const sql = neon(process.env.DATABASE_URL);
16
17  try {
18    // Aggregate daily totals/averages depending on metric type
19    const aggregateFn = ['heart_rate', 'sleep'].includes(type) ? 'AVG' : 'SUM';
20
21    const rows = await sql`
22      SELECT
23        DATE(start_date AT TIME ZONE 'UTC') AS date,
24        ${aggregateFn === 'AVG'
25          ? sql`ROUND(AVG(value)::numeric, 1)`
26          : sql`SUM(value)`
27        } AS value
28      FROM health_samples
29      WHERE
30        user_id = ${userId}
31        AND sample_type = ${type}
32        AND start_date >= NOW() - INTERVAL '1 day' * ${days}
33      GROUP BY DATE(start_date AT TIME ZONE 'UTC')
34      ORDER BY date ASC
35    `;
36
37    return NextResponse.json({
38      type,
39      days,
40      data: rows.map(row => ({
41        date: row.date,
42        value: Number(row.value),
43      })),
44    });
45  } catch (error) {
46    console.error('Health metrics query error:', error);
47    return NextResponse.json({ error: 'Failed to fetch metrics' }, { status: 500 });
48  }
49}

Open the Vercel Dashboard, navigate to your project, and go to Settings → Environment Variables. Add HEALTH_SYNC_SECRET with a strong random string (generate with: node -e 'console.log(crypto.randomBytes(32).toString(hex))') — this secret must match what your iOS app sends in the Authorization header when POSTing health data. If you're using Neon for PostgreSQL, connect it through the Vercel Marketplace (Storage tab → Connect Database → Neon) which automatically provisions DATABASE_URL. Set HEALTH_SYNC_SECRET for all environments (Production, Preview, Development) — use different values for Preview and Production if you want to keep test data separate from production data. For local development, add both variables to .env.local. After saving the environment variables, trigger a redeployment. Test the sync endpoint with curl: send a POST to your deployed URL /api/health/sync with the Authorization header and a small sample payload. If it returns { success: true }, the backend is ready to receive data from your iOS app. Configure your iOS app (or third-party health platform) with your deployed API URL and the sync secret.