How to Integrate Retool with Withings

To use the Withings Health API, you need to register an application and complete an OAuth 2.0 authorization flow to obtain an access token. Start at developer.withings.com — sign in with your Withings account (or create one) and navigate to 'My Applications'. Click 'Create Application', give it a name like 'Retool Integration', set the application type to 'Mobile Application' or 'Web Application', and enter a Redirect URI. For Retool internal tools, you can use https://oauth.pstmn.io/v1/callback as the redirect URI to complete the flow using Postman or a similar tool, since Retool does not have a built-in OAuth callback for custom resources. Note your Client ID and Client Secret from the application settings. To get an access token: construct an authorization URL in the format https://account.withings.com/oauth2_user/authorize2?response_type=code&client_id={YOUR_CLIENT_ID}&scope=user.metrics,user.activity,user.sleepevents&redirect_uri={YOUR_REDIRECT_URI}&state=random123. Open this URL in a browser while logged into your Withings account. After granting consent, you receive an authorization code in the redirect URL. Exchange this code for tokens by POSTing to https://wbsapi.withings.net/v2/oauth2 with action=requesttoken and your client credentials. The response contains access_token and refresh_token — store both in Retool's Settings → Configuration Variables as WITHINGS_ACCESS_TOKEN and WITHINGS_REFRESH_TOKEN, marking both as secret.

1// OAuth token exchange — send as form-encoded POST to Withings
2// POST https://wbsapi.withings.net/v2/oauth2
3// Content-Type: application/x-www-form-urlencoded
4{
5  "action": "requesttoken",
6  "grant_type": "authorization_code",
7  "client_id": "YOUR_CLIENT_ID",
8  "client_secret": "YOUR_CLIENT_SECRET",
9  "code": "AUTHORIZATION_CODE_FROM_REDIRECT",
10  "redirect_uri": "YOUR_REDIRECT_URI"
11}

In Retool, click the Resources tab and then Add Resource. Select REST API from the resource type list. Name the resource 'Withings API'. In the Base URL field, enter https://wbsapi.withings.net — this is the base URL for all Withings Health API endpoints. Scroll to the Authentication section and select Bearer Token from the dropdown. In the token value field, enter {{ retoolContext.configVars.WITHINGS_ACCESS_TOKEN }} to reference your stored configuration variable. Scroll to the Headers section and add a default header: set key to Content-Type and value to application/x-www-form-urlencoded. This is critical — Withings' API expects all request bodies in URL-encoded form format, not JSON, even when making POST requests. This is a key difference from standard REST APIs and must be configured at the resource level to ensure all queries use the correct content type. Click Save Changes. Note: Withings' API is structured so that different types of measurements and actions all go to different path segments (/measure, /v2/sleep, /v2/activity) but always use POST method with an 'action' query parameter or body parameter specifying the operation. This makes the query editor configuration slightly different from typical REST APIs — you will set the path per query type rather than using a single endpoint.

Withings' measurement data is retrieved from a single endpoint with different 'meastype' parameters specifying which measurement categories to return. In the Retool Code panel, create a new query, select the Withings API resource, set Method to GET, and Path to /measure. Add URL parameters: key 'action', value 'getmeas'; key 'meastype', value '1,6,8' (1 = weight in kg, 6 = fat ratio %, 8 = fat mass weight in kg — add more types as needed); key 'category', value '1' (1 = real measurements, 2 = user goals); key 'startdate', value {{ Math.floor(new Date(dateRange.startDate).getTime() / 1000) }} (Withings uses Unix timestamps in seconds); key 'enddate', value {{ Math.floor(new Date(dateRange.endDate).getTime() / 1000) }}; key 'limit', value '200'. Name this query 'getBodyMeasurements'. The response returns a 'measuregrps' array where each group contains a 'measures' array with objects having 'type', 'value', and 'unit' fields. The actual measurement value = value * 10^unit — a value of 7000 with unit -3 means 7.0 kg. Write a JavaScript transformer to decode this into readable metrics. Create a second query for blood pressure: same path /measure with meastype '9,10' (9 = diastolic BP in mmHg, 10 = systolic BP in mmHg). Name it 'getBloodPressure'.

1// Transformer: decode Withings measurement groups into readable rows
2const groups = data.body?.measuregrps || [];
3const measureLabels = {
4  1: 'weight_kg', 6: 'fat_ratio_pct', 8: 'fat_mass_kg',
5  9: 'diastolic_bp', 10: 'systolic_bp', 11: 'heart_rate',
6  12: 'temperature_c', 54: 'spo2_pct'
7};
8
9return groups.map(group => {
10  const date = new Date(group.date * 1000).toLocaleDateString();
11  const row = { date, measured_at: date };
12  (group.measures || []).forEach(m => {
13    const label = measureLabels[m.type];
14    if (label) {
15      row[label] = parseFloat((m.value * Math.pow(10, m.unit)).toFixed(2));
16    }
17  });
18  return row;
19}).filter(row => Object.keys(row).length > 2);

Sleep and activity data use different Withings API paths from the measurement endpoint. For sleep data, create a new query, select Withings API resource, set Method to GET, Path to /v2/sleep. Add URL parameters: 'action' = 'getsummary', 'startdateymd' = {{ dateRange.startDate }} (YYYY-MM-DD format — sleep API uses date strings, not Unix timestamps), 'enddateymd' = {{ dateRange.endDate }}, 'data_fields' = 'nb_rem_episodes,sleep_score,total_timeinbed,total_sleep_time,total_deep_sleep_time,total_light_sleep_time,wakeup_count'. Name this query 'getSleepSummary'. For activity data, create another query with Path /v2/activity and parameters: 'action' = 'getactivity', 'startdateymd' = {{ dateRange.startDate }}, 'enddateymd' = {{ dateRange.endDate }}, 'data_fields' = 'steps,calories,totalcalories,distance,elevation,soft,moderate,intense'. Name it 'getActivity'. Note that sleep and activity endpoints use ISO date strings (YYYY-MM-DD) while the measure endpoint uses Unix timestamps — this inconsistency in the Withings API requires careful parameter handling per query type. Write a transformer for sleep data that extracts the 'series' array from data.body and formats each night's metrics. Add all three queries to a Date Range Picker's change event handler so the entire dashboard refreshes when the user selects a new date window.

1// Transformer: format Withings sleep summary data
2const series = data.body?.series || [];
3return series.map(night => ({
4  date: night.date,
5  sleep_score: night.data?.sleep_score || 0,
6  total_sleep_hours: night.data?.total_sleep_time
7    ? (night.data.total_sleep_time / 3600).toFixed(1)
8    : null,
9  deep_sleep_minutes: night.data?.total_deep_sleep_time
10    ? Math.round(night.data.total_deep_sleep_time / 60)
11    : null,
12  rem_episodes: night.data?.nb_rem_episodes || 0,
13  wake_count: night.data?.wakeup_count || 0,
14  time_in_bed_hours: night.data?.total_timeinbed
15    ? (night.data.total_timeinbed / 3600).toFixed(1)
16    : null
17}));

With all data queries configured, build the dashboard layout. From the component panel, drag a Date Range Picker component onto the canvas and set default values spanning the last 30 days. Bind all query run triggers to this component's change event. Create a row of Stat components at the top showing key metrics: average weight from the last measurement, latest blood pressure reading, last sleep score, and total steps in the selected period — bind these to specific index positions in your query results using {{ getBodyMeasurements.data?.[0]?.weight_kg || 'N/A' }}. Below the stats row, drag a Chart component and configure it for a Line Chart type. Set the data source to {{ getBodyMeasurements.data }} with the date field as the X-axis and weight_kg as the Y-axis series. Add a title 'Weight Trend'. Add a second Chart component for sleep: set data to {{ getSleepSummary.data }}, configure as a Bar Chart with date on X-axis, and add three series for deep_sleep_minutes, rem_episodes (scaled), and total_sleep_hours (scaled to minutes for comparison). Add a Table component bound to {{ getBloodPressure.data }} with columns date, systolic_bp, diastolic_bp, and heart_rate. Use conditional column formatting to highlight rows where systolic_bp > 140 or diastolic_bp > 90 in red. For complex wellness program dashboards tracking cohorts of users across multiple Withings accounts, RapidDev's team can help design a multi-user OAuth architecture and aggregation layer in Retool.

1// Chart configuration example for weight trend
2// Bind to Chart component's series property
3[
4  {
5    "name": "Weight (kg)",
6    "data": "{{ getBodyMeasurements.data.map(d => ({ x: d.date, y: d.weight_kg })) }}",
7    "type": "line"
8  }
9]