Baremetrics

Log in to your Baremetrics account and navigate to Settings → API. Baremetrics generates an API token for your account — copy it and store it securely (a password manager, not a text file). This is a full-read-access token for all your revenue data. Treat it with the same security posture as your Stripe secret key. Before building anything in FlutterFlow, understand Baremetrics' source model. Every Baremetrics account has one or more billing sources: each source corresponds to a connected billing integration (Stripe, Recurly, Braintree, etc.). All metric endpoints in Baremetrics are scoped to a sourceId — for example, `GET /v1/{sourceId}/metrics` not `GET /v1/metrics`. This means you must first call `GET /v1/sources` to discover your sourceId, then use it in all subsequent metric calls. You can find your sourceId right now to save time during setup. Open a REST client or your browser's developer console and make a GET request to `https://api.baremetrics.com/v1/sources` with the header `Authorization: Bearer YOUR_TOKEN`. The response is a JSON object containing a `sources` array. Each source has an `id` field (like `d5b2e3a1-...`) and a `provider` field (like `stripe`). Note your primary source's `id` — you will hardcode it in your proxy or FlutterFlow API Call configuration. If you have a sandbox or test account, note that test API tokens and live API tokens hit different data. Mixing them returns empty metrics. Baremetrics does not have a separate base URL for sandbox vs live — the distinction is at the token level. Verify that your Baremetrics plan includes API access. API access is available on paid Baremetrics plans. If the API returns 401 on a valid token, your plan may not include API access — check Baremetrics' current plan features or contact their support.

The Baremetrics API token must never appear in a FlutterFlow API Call header. FlutterFlow compiles API Call configurations into the app binary — an Authorization header with a Bearer token is visible to anyone who decompiles the APK or IPA. A founding team's MRR, churn rate, and customer list becoming publicly readable is a real risk, not a theoretical one. Deploy a Firebase Cloud Function or Supabase Edge Function that holds the token in server-side secrets and forwards requests to `https://api.baremetrics.com/v1`. The function accepts a `path` query parameter from your FlutterFlow app (like `/{sourceId}/metrics`), appends it to the Baremetrics base URL, injects the Bearer token from the secret, and returns the response. Store the API token using Firebase's secret manager (`defineSecret`) — this encrypts the secret at rest and makes it available only inside the function during execution. The sourceId can be stored as a regular environment variable since it is not sensitive, or hardcoded in the function if it is stable. Add CORS headers to the proxy response for FlutterFlow web builds. Native iOS and Android builds do not need CORS headers, but if you ever export the FlutterFlow project as a web app or use Run Mode in the browser, CORS will be required. Also add caching in the proxy: check Firestore or Supabase for a cached response for the requested path. If the cache is less than 6 hours old, return the cached response without calling Baremetrics. Metrics change slowly — there is no reason to hit the Baremetrics API multiple times per day for the same dashboard data. This is also where RapidDev can help if you want a more sophisticated caching and refresh architecture — the team handles FlutterFlow API integrations every week and offers a free scoping call at rapidevelopers.com/contact.

1// Firebase Cloud Function (Node.js) — Baremetrics API proxy
2const { onRequest } = require('firebase-functions/v2/https');
3const { defineSecret } = require('firebase-functions/params');
4const axios = require('axios');
5
6const BAREMETRICS_TOKEN = defineSecret('BAREMETRICS_TOKEN');
7const SOURCE_ID = 'YOUR_SOURCE_ID'; // not sensitive, can be env var
8
9exports.baremetricsProxy = onRequest(
10  { secrets: [BAREMETRICS_TOKEN] },
11  async (req, res) => {
12    // CORS for web builds
13    res.set('Access-Control-Allow-Origin', '*');
14    if (req.method === 'OPTIONS') {
15      res.set('Access-Control-Allow-Headers', 'Content-Type, Authorization');
16      return res.status(204).send('');
17    }
18
19    const token = BAREMETRICS_TOKEN.value();
20    // Allow path override; default to metrics endpoint
21    const path = req.query.path || `/${SOURCE_ID}/metrics`;
22
23    try {
24      const response = await axios({
25        method: 'GET',
26        url: `https://api.baremetrics.com/v1${path}`,
27        headers: {
28          Authorization: `Bearer ${token}`,
29          Accept: 'application/json',
30        },
31        params: req.query.params
32          ? JSON.parse(req.query.params)
33          : {},
34      });
35      return res.json(response.data);
36    } catch (err) {
37      return res.status(err.response?.status || 500).json({
38        error: err.response?.data || err.message,
39      });
40    }
41  }
42);

With the proxy deployed, create the FlutterFlow API integration. In the left nav, click API Calls. Click + Add and select Create API Group. Name it BaremetricsProxy. In the Base URL field, paste your deployed Firebase Cloud Function URL (or Supabase Edge Function URL). Do not add any Authorization headers here. Authentication is handled by the proxy function — the FlutterFlow API Call authenticates to your proxy (optionally via a shared secret or user JWT), and the proxy authenticates to Baremetrics. Add the first API Call: click + Add Call on the group. Name it GetMetrics. Set the method to GET. In the endpoint field, use `/` and add a query variable named `path` with a default value of `/{YOUR_SOURCE_ID}/metrics`. This lets your FlutterFlow app pass different Baremetrics paths to the proxy as needed. Add optional variables for `start_date` and `end_date` to enable date-range filtering — Baremetrics metrics endpoints accept date parameters to return metrics for a specific period. Add a second API Call: name it GetCustomers. Set the path variable default to `/{YOUR_SOURCE_ID}/customers`. This will power the customer lookup screen. In the Response & Test tab for GetMetrics, click Test. If the proxy is working, you will receive a Baremetrics metrics JSON response. Paste this into the response body field and click Generate JSON Paths. Baremetrics metrics responses are nested — the response typically includes a `metrics` object containing sub-objects for different metric types. Map the fields you need: MRR (usually `metrics.mrr.value`), ARR, active subscriptions count, and churn rate. Create a Data Type named BaremetricsSummary with fields: mrr (Integer), arr (Integer), activeCustomers (Integer), churnRate (Double), newMrr (Integer).

1{
2  "group_name": "BaremetricsProxy",
3  "base_url": "https://YOUR_REGION-YOUR_PROJECT.cloudfunctions.net/baremetricsProxy",
4  "calls": [
5    {
6      "name": "GetMetrics",
7      "method": "GET",
8      "endpoint": "/",
9      "query_params": {
10        "path": "/{sourceId}/metrics",
11        "params": "{\"start_date\": \"{{startDate}}\", \"end_date\": \"{{endDate}}\"}"
12      },
13      "variables": [
14        { "name": "sourceId", "type": "String" },
15        { "name": "startDate", "type": "String" },
16        { "name": "endDate", "type": "String" }
17      ],
18      "json_paths": {
19        "mrr": "$.metrics.mrr.value",
20        "arr": "$.metrics.arr.value",
21        "activeCustomers": "$.metrics.active_subscriptions.value",
22        "churnRate": "$.metrics.churn_rate.value",
23        "newMrr": "$.metrics.new_mrr.value"
24      }
25    },
26    {
27      "name": "GetCustomers",
28      "method": "GET",
29      "endpoint": "/",
30      "query_params": {
31        "path": "/{sourceId}/customers"
32      },
33      "variables": [
34        { "name": "sourceId", "type": "String" }
35      ]
36    }
37  ]
38}

With the API Call working, build the dashboard screen in FlutterFlow. Create a new screen named MetricsDashboard. Add a Column as the main layout container. At the top, add a Row containing a Text widget displaying the business name or 'My SaaS Metrics' as the screen title, and a small Text widget showing the last-updated timestamp from a Supabase or Firestore cache record. Below the title, add a GridView or Wrap widget with five stat card children. Each stat card is a Container with a rounded border, a label Text at the top, and a value Text in the center. Create five cards: MRR, ARR, Active Customers, Monthly Churn %, and New MRR. Bind each card's value Text to the corresponding JSON Path field from the GetMetrics API Call response — for MRR, bind to the `mrr` field parsed from `$.metrics.mrr.value`, then divide by 100 in FlutterFlow's Binding expression editor to convert cents to dollars. Add conditional color to the churn card: use a Conditional Expression in the Container's background color property. If the churn rate (decimal from Baremetrics) is greater than 0.02 (2%), set the background to a light red; if less, set it to light green. This gives the dashboard an at-a-glance health signal. Below the stat cards, add an optional line chart widget (FlutterFlow has a built-in Chart widget or you can use the fl_chart pub.dev package via a custom widget). Bind it to a GetMetrics call with a date range of the past 12 months and monthly granularity — the Baremetrics metrics endpoint supports time-series data with `start_date`, `end_date`, and `granularity` parameters. Set the GetMetrics API Call to fire On Page Load. Add a loading state: show a CircularProgressIndicator while the API call is in progress and hide the stat cards. Show an error message if the call fails.

Baremetrics metrics change when billing events happen — new subscriptions, cancellations, upgrades. In practice this means metrics might change a handful of times per day, not continuously. Querying Baremetrics every time a founder opens the dashboard is wasteful and risks hitting rate limits. Implement a cache. In Firestore or Supabase, create a collection or table named `baremetrics_cache` with fields: sourceId (String), metricsJson (JSON or String), lastUpdated (Timestamp). After each successful GetMetrics API call, write the response JSON and the current timestamp to this record. On dashboard load, first read from the cache. If the cache is less than 6 hours old, use the cached data and do not call the proxy. If the cache is stale, call the proxy, update the cache, and display the fresh data. Implement this caching logic in FlutterFlow using a Conditional Action flow: On Page Load → Read Firestore cache document → Conditional: if `lastUpdated` is within 6 hours → use cache → else → call GetMetrics → write cache → display. This pattern eliminates redundant API calls and makes the dashboard feel instant even on slow connections. For authentication, the dashboard should only be accessible to the app owner or authorized team members. Add a role check: read the signed-in user's role from Firestore or Supabase and navigate to MetricsDashboard only if the role is `owner`, `admin`, or `team`. FlutterFlow's navigation actions support conditional routing — add a Conditional Action before navigating to MetricsDashboard that checks the user role and redirects to a 403 screen if unauthorized. Verify the complete flow: sign in as an authorized user, navigate to the dashboard, confirm data loads. Sign in as a non-authorized user and confirm the dashboard is not accessible. Check Firestore to confirm cache records are being written and read correctly.

Daily automatic cache refresh keeps the dashboard current without requiring the founder to manually trigger a refresh. FlutterFlow itself does not support scheduled background tasks on mobile, but a Firebase Scheduled Cloud Function or Supabase cron job can call the baremetricsProxy function on a schedule and write the response to the Firestore cache. In Firebase, create a second Cloud Function triggered by Cloud Scheduler on a daily schedule (e.g. 6 AM UTC). This function calls the baremetricsProxy (or directly calls Baremetrics with the token) and writes the response to the Firestore cache document. When the founder opens the FlutterFlow app in the morning, the cache is already fresh from the scheduled refresh — the dashboard loads instantly with today's metrics. Before considering the integration complete, verify data accuracy by comparing the values in your FlutterFlow dashboard against the Baremetrics web dashboard side by side. Check: MRR, active customer count, and churn rate for the current date. If values differ, the most likely cause is a date-range mismatch — ensure the API call is requesting the current period rather than a historical range. Baremetrics metrics endpoints require explicit date parameters or default to a specific period (verify the default in Baremetrics' current API documentation). Also verify the cache is being read correctly — open the dashboard on two devices simultaneously and confirm both show the same values from the cache rather than triggering two independent API calls. The Firestore read should return the same document to both devices.

1// Firebase Scheduled Cloud Function — daily Baremetrics cache refresh
2const { onSchedule } = require('firebase-functions/v2/scheduler');
3const { defineSecret } = require('firebase-functions/params');
4const { initializeApp } = require('firebase-admin/app');
5const { getFirestore } = require('firebase-admin/firestore');
6const axios = require('axios');
7
8initializeApp();
9
10const BAREMETRICS_TOKEN = defineSecret('BAREMETRICS_TOKEN');
11const SOURCE_ID = 'YOUR_SOURCE_ID';
12
13exports.refreshBaremetricsCache = onSchedule(
14  { schedule: '0 6 * * *', secrets: [BAREMETRICS_TOKEN] },
15  async () => {
16    const token = BAREMETRICS_TOKEN.value();
17    const db = getFirestore();
18
19    try {
20      const response = await axios.get(
21        `https://api.baremetrics.com/v1/${SOURCE_ID}/metrics`,
22        { headers: { Authorization: `Bearer ${token}` } }
23      );
24
25      await db.collection('baremetrics_cache').doc(SOURCE_ID).set({
26        metricsJson: JSON.stringify(response.data),
27        lastUpdated: new Date(),
28      });
29
30      console.log('Baremetrics cache refreshed successfully');
31    } catch (err) {
32      console.error('Cache refresh failed:', err.message);
33    }
34  }
35);