How to Integrate Lovable with HealthKit

Before building the iOS Shortcut, set up the Supabase database table that will store health data. The schema needs to accommodate different metric types (steps, heart rate, sleep, workouts) with timestamps and optional user identification for multi-user implementations. Open Lovable's chat and ask the AI to create the health metrics table. Lovable will generate the database migration, create the table in your Supabase project, and add appropriate RLS policies. A flexible health_metrics table uses an EAV (Entity-Attribute-Value) pattern: each row stores one measurement (metric_type, value, unit, recorded_at) rather than a separate column for each metric type. This handles the variety of Apple Health data types without requiring schema changes as you add new metric types. For workouts, which have richer data (type, duration, calories, route), a separate workouts table makes more sense than the EAV pattern. Lovable's AI will create both tables and the appropriate indexes for date-range queries, which are the most common pattern for health dashboards.

The Edge Function is the entry point for data from the iOS Shortcut. It receives a POST request containing health metrics as JSON, validates a shared secret to ensure the request comes from your iOS Shortcut (not an outside actor), and upserts the data into Supabase. The validation uses a simple shared secret: a random string you generate once, store in Cloud → Secrets, and also configure in the iOS Shortcut. When the Shortcut sends the request, it includes this secret in a header. The Edge Function verifies it before processing the data. To add the secret, click the '+' icon next to Preview in the Lovable editor, go to Cloud → Secrets, and add: - Name: HEALTHKIT_WEBHOOK_SECRET — Value: a randomly generated string (e.g., a UUID — use any random UUID generator) The Edge Function expects the incoming JSON to follow a specific format that the iOS Shortcut will send: a metrics array with objects containing metric_type, value, unit, and recorded_date, plus a workouts array for workout data. The Step 3 Shortcut will be built to match this format.

1// supabase/functions/health-webhook/index.ts
2import { createClient } from 'https://esm.sh/@supabase/supabase-js@2';
3
4const corsHeaders = {
5  'Access-Control-Allow-Origin': '*',
6  'Access-Control-Allow-Headers': 'authorization, x-client-info, apikey, content-type, x-webhook-secret',
7};
8
9Deno.serve(async (req) => {
10  if (req.method === 'OPTIONS') return new Response('ok', { headers: corsHeaders });
11
12  // Validate webhook secret
13  const incomingSecret = req.headers.get('x-webhook-secret');
14  const expectedSecret = Deno.env.get('HEALTHKIT_WEBHOOK_SECRET');
15
16  if (!incomingSecret || incomingSecret !== expectedSecret) {
17    console.error('Invalid webhook secret');
18    return new Response(JSON.stringify({ error: 'Unauthorized' }), {
19      status: 401,
20      headers: { ...corsHeaders, 'Content-Type': 'application/json' },
21    });
22  }
23
24  try {
25    const { userId, metrics = [], workouts = [] } = await req.json();
26
27    if (!userId) {
28      return new Response(JSON.stringify({ error: 'userId is required' }), {
29        status: 400,
30        headers: { ...corsHeaders, 'Content-Type': 'application/json' },
31      });
32    }
33
34    const supabase = createClient(
35      Deno.env.get('SUPABASE_URL')!,
36      Deno.env.get('SUPABASE_SERVICE_ROLE_KEY')!
37    );
38
39    let metricsUpserted = 0;
40    let workoutsInserted = 0;
41
42    if (metrics.length > 0) {
43      const metricsToUpsert = metrics.map((m: Record<string, unknown>) => ({
44        user_id: userId,
45        metric_type: m.metric_type,
46        value: m.value,
47        unit: m.unit,
48        recorded_date: m.recorded_date,
49      }));
50
51      const { error } = await supabase
52        .from('health_metrics')
53        .upsert(metricsToUpsert, { onConflict: 'user_id,metric_type,recorded_date' });
54
55      if (error) throw error;
56      metricsUpserted = metrics.length;
57    }
58
59    if (workouts.length > 0) {
60      const workoutsToInsert = workouts.map((w: Record<string, unknown>) => ({
61        user_id: userId,
62        ...w,
63      }));
64
65      const { error } = await supabase.from('workouts').insert(workoutsToInsert);
66      if (error) console.warn('Workout insert warning:', error);
67      workoutsInserted = workouts.length;
68    }
69
70    return new Response(JSON.stringify({ success: true, metricsUpserted, workoutsInserted }), {
71      headers: { ...corsHeaders, 'Content-Type': 'application/json' },
72    });
73  } catch (error) {
74    console.error('Health webhook error:', error);
75    return new Response(JSON.stringify({ error: String(error) }), {
76      status: 500,
77      headers: { ...corsHeaders, 'Content-Type': 'application/json' },
78    });
79  }
80});

Now build the iOS Shortcut that reads Apple Health data and sends it to your Edge Function webhook. Open the Shortcuts app on your iPhone. Tap the '+' button to create a new shortcut. Name it 'Sync Health Data to Lovable'. Before building the shortcut, you need two things: 1. Your Edge Function webhook URL — in Lovable, click '+' → Cloud → Edge Functions, find health-webhook, and copy the URL. It looks like https://your-project-ref.supabase.co/functions/v1/health-webhook. 2. Your HEALTHKIT_WEBHOOK_SECRET value — copy it from Cloud → Secrets. In the Shortcut builder, add the following actions in order: 1. 'Get Health Sample' action: set metric to 'Step Count', timeframe to 'Yesterday', aggregation to 'Sum'. Save as 'Steps Variable'. 2. 'Get Health Sample' action: metric to 'Resting Heart Rate', yesterday, aggregation to 'Average'. Save as 'HeartRate Variable'. 3. 'Get Health Sample' action: metric to 'Sleep Analysis', yesterday, aggregation to 'Sum of Values'. Save as 'Sleep Variable'. 4. 'Get Current Date' action — format as YYYY-MM-DD. Save as 'Yesterday' (use 'Add Time' with -1 day). 5. 'Dictionary' action: create a dictionary with keys userId (a unique identifier for your device, like your name or email), metrics (an array), and add each metric as a dictionary with metric_type, value, unit, and recorded_date keys. 6. 'Get Contents of URL' action: URL = your Edge Function URL, Method = POST, Headers = Content-Type: application/json and x-webhook-secret: YOUR_SECRET, Body = the dictionary from step 5. For the automated daily sync, go to Automation tab → Create Personal Automation → Time of Day → 7:00 AM → Daily, then add 'Run Shortcut' and select your Sync shortcut. This runs the sync automatically every morning.

With health data flowing into Supabase from the iOS Shortcut, build the dashboard that visualizes it. Open Lovable's chat and describe the charts and metrics you want to display. Lovable will generate React components using Recharts (which shadcn/ui's chart components are built on) and wire them to Supabase queries. The dashboard should query the health_metrics table with date range filters, transform the rows into the format Recharts expects (arrays of objects with date and value keys), and render line charts for trend data and bar charts for daily comparisons. For a personal health dashboard, a typical layout includes: - A date range selector (Last 7 days / Last 30 days / Last 90 days) - Step count line chart with a goal line at 10,000 steps/day - Resting heart rate line chart with normal range (60-100 bpm) shaded - Sleep duration bar chart with 8-hour goal line - Recent workouts list with type icons, duration, and calories Lovable's AI can generate all of these charts from a single descriptive prompt. Describe the visual design and the data source, and Lovable will handle the Supabase query, data transformation, and chart configuration.

The daily automation in iOS Shortcuts ensures health data stays current without manual intervention. To complete the setup, configure the Shortcut automation as described in Step 3 and then test the edge cases that commonly cause syncing to break. Common edge cases to handle: Missing days: if the iPhone is off or the automation fails to run, a gap appears in the dashboard. Add a 'Sync last 7 days' button in the Lovable dashboard that triggers the iOS Shortcut manually for a date range. Alternatively, modify the Shortcut to send data for the last 3 days instead of just yesterday, relying on the unique constraint upsert behavior to avoid duplicates. Data availability: Apple Health does not always have data for every metric every day. Some metrics like resting heart rate require Apple Watch and only appear if the watch was worn. Add null checks in your dashboard components so missing data appears as empty chart segments rather than errors. Multiple devices: if a household has multiple iPhones, each device needs its own userId in the Shortcut configuration to avoid overwriting each other's data. The Lovable dashboard can then support user switching or display multiple users' data simultaneously for fitness coach use cases. For a robust production setup handling multiple users' health data, consider adding authentication to the webhook using Supabase JWT tokens from each user's Lovable login session, replacing the simple shared secret approach. This gives each user their own secure channel.