Ahrefs

Because an Ahrefs Bearer token is a paid Enterprise secret, it must never travel inside your compiled Flutter app. The right architecture is a Firebase Cloud Function that stores the token as an environment variable and forwards requests to Ahrefs on behalf of your app. In the Firebase console, navigate to Functions and deploy a new HTTP function. The function receives a query parameter (target domain) from FlutterFlow, attaches your Bearer token from process.env.AHREFS_TOKEN, calls the relevant Ahrefs v3 endpoint, and returns the JSON response. Set the environment variable in the Firebase CLI: firebase functions:config:set ahrefs.token='YOUR_TOKEN_HERE'. Once deployed, Firebase gives you a Cloud Function URL in the format https://us-central1-YOUR_PROJECT.cloudfunctions.net/ahrefsProxy. This is the URL you will use inside FlutterFlow — FlutterFlow calls your function, never Ahrefs directly. This single step solves both the secret-key exposure problem and the CORS issue for web builds, since your Cloud Function can set the correct CORS headers and return clean JSON. If you prefer Supabase, the equivalent is a Supabase Edge Function (Deno): set the AHREFS_TOKEN in the Supabase dashboard under Settings → Edge Functions → Secrets, then deploy a function that reads Deno.env.get('AHREFS_TOKEN') and proxies the request. Either approach works; Firebase is used in the examples below.

1// Firebase Cloud Function proxy (functions/index.js)
2const functions = require('firebase-functions');
3const axios = require('axios');
4
5exports.ahrefsProxy = functions.https.onRequest(async (req, res) => {
6  // Allow FlutterFlow web builds (CORS)
7  res.set('Access-Control-Allow-Origin', '*');
8  res.set('Access-Control-Allow-Methods', 'GET, OPTIONS');
9  if (req.method === 'OPTIONS') { res.status(204).send(''); return; }
10
11  const token = process.env.AHREFS_TOKEN;
12  const { target, endpoint, date_from, date_to, limit } = req.query;
13
14  if (!target || !endpoint) {
15    return res.status(400).json({ error: 'target and endpoint are required' });
16  }
17
18  const params = { target };
19  if (date_from) params.date_from = date_from;
20  if (date_to)   params.date_to = date_to;
21  if (limit)     params.limit = limit;
22
23  try {
24    const response = await axios.get(
25      `https://api.ahrefs.com/v3/${endpoint}`,
26      {
27        params,
28        headers: { Authorization: `Bearer ${token}` }
29      }
30    );
31    res.json(response.data);
32  } catch (err) {
33    const status = err.response?.status || 500;
34    res.status(status).json({ error: err.message });
35  }
36});

Now that your proxy is live, you will create an API Group in FlutterFlow that points to your Cloud Function URL instead of directly to api.ahrefs.com. The API Group acts as a reusable connection object — everything you configure here (base URL, shared headers) is inherited by every API Call you add inside it. In FlutterFlow, click API Calls in the left navigation panel. Then click + Add in the top-right of the panel and choose Create API Group. Name it Ahrefs (or AhrefsProxy if you want to be explicit). For the Base URL, paste your Cloud Function URL: https://us-central1-YOUR_PROJECT.cloudfunctions.net/ahrefsProxy. Since your proxy is your own Firebase function, you do not need an Authorization header at the FlutterFlow level — the token lives inside the function. If you want to add lightweight protection to your proxy (so only your app can call it), you can add a custom header like X-App-Secret with a random string that you check in the function, but this is optional for an internal tool. Save the API Group. You should see it listed under API Calls in the left nav, ready to receive individual endpoint definitions.

Inside the Ahrefs API Group, you will create individual API Calls for each Ahrefs report you want to display. Each call is a GET request to your proxy, which forwards it to the appropriate Ahrefs v3 endpoint. Click the + icon inside the Ahrefs API Group and select Create API Call. Name the first call Get Domain Rating. Set the HTTP Method to GET. In the URL field (which is relative to the group's base URL), leave it blank or type / — since your proxy accepts the endpoint as a query parameter rather than a path. Then go to the Variables tab and add the following query parameters: - target (String, required) — the domain to look up, e.g. example.com - endpoint (String, required) — hardcode or default to site-explorer/domain-rating - date_from (String, optional) — start of the date range, e.g. 2025-01-01 In the URL field, reference them as: /?target=[target]&endpoint=[endpoint]&date_from=[date_from]. Switch to the Response & Test tab. Enter a sample target domain in the test fields and click Test API Call. If your proxy is deployed and the Ahrefs account has API access, you will get a JSON response back. Click Generate JSON Paths. FlutterFlow will parse the response and create extractors for each field. Look for $.domain.domain_rating and save it — you will bind this to a Text widget later. Repeat the process to add a second API Call named Get Backlinks, using endpoint=site-explorer/backlinks. Add a limit variable (default: 50) to cap the number of results returned per request and avoid burning too many units in one call.

1// Sample API Call JSON configuration (for reference — configured in FlutterFlow UI)
2{
3  "group": "Ahrefs",
4  "name": "Get Domain Rating",
5  "method": "GET",
6  "url": "/?target={{target}}&endpoint=site-explorer/domain-rating&date_from={{date_from}}",
7  "headers": {},
8  "variables": [
9    { "name": "target",     "type": "String", "required": true  },
10    { "name": "date_from", "type": "String", "required": false }
11  ],
12  "json_paths": [
13    { "name": "domainRating", "path": "$.domain.domain_rating" },
14    { "name": "ahrefs_rank",  "path": "$.domain.ahrefs_rank"  }
15  ]
16}

Ahrefs charges API units per call, so re-fetching on every widget rebuild would silently drain your quota. The solution is to store responses in App State (FlutterFlow's global in-memory storage) after the first successful call, and only refresh when the user explicitly taps a Refresh button or pull-to-refresh. First, define a custom Data Type to hold the parsed response. Go to the Data Types section (left nav → Data Types) and create a new type called AhrefsMetrics with fields: domainRating (double), ahrefsRank (int), backlinksTotal (int), refdomains (int), and lastFetched (String for the timestamp). Next, go to App State (left nav → App State) and create a state variable called seoMetrics with the type AhrefsMetrics. This variable holds the last-fetched result across screens without re-calling the API. Now wire the API Call to update this state. On your search screen, add an Action to the Search button: Backend/API Call → choose Ahrefs → Get Domain Rating. In the Action outputs, map the JSON Path results to the corresponding fields of the AhrefsMetrics Data Type, then add an Update App State action to write the populated Data Type into seoMetrics. The Text widgets on the results screen bind to AppState.seoMetrics.domainRating instead of directly to the API Call response, which means they always show the cached value instantly and only refresh when the user triggers a new search.

With the API Group, API Calls, Data Type, and App State all configured, you can now build the visible part of the app — a clean dashboard showing Domain Rating, backlinks, and referring domains. On your main SEO screen, add a TextField widget for the user to type a domain (e.g. 'example.com'). Below it, add a Button labeled Search. In the Button's Actions panel, add the sequence: first, set a loading state variable (isLoading = true) to show a progress indicator; second, call the Ahrefs Get Domain Rating API Call with the TextField value as the target variable; third, on the Call's success callback, update App State seoMetrics with the returned values and set isLoading = false; on error, show a Snackbar with the error message. Below the TextField and Button, add a Column with Card widgets for each metric. Each Card contains a Text widget bound to AppState.seoMetrics.domainRating (or backlinksTotal, refdomains). Use conditional visibility so the cards are only visible when seoMetrics.domainRating is not null/zero. For the backlinks list, add a ListView below the summary cards and set its data source to the Get Backlinks API Call. Add a pull-to-refresh widget (RefreshIndicator in Custom Code, or FlutterFlow's built-in Refresh widget) so users can manually trigger a new API call when they want updated data rather than getting a fresh call on every screen load.

FlutterFlow's in-browser Run mode will test your proxy calls fine (since CORS is handled server-side in the Cloud Function), but you should also run a device test to confirm the full app flow works end-to-end on mobile. Click Test Mode (or Run mode) in FlutterFlow and type a domain into the search field. Open your Cloud Function logs in the Firebase console and confirm that each tap of Search fires exactly one request to your function, which in turn makes one request to Ahrefs. Verify that subsequent opens of the same screen use the cached App State value instead of making another API call. In the Ahrefs dashboard under your account → API, check the units consumed during testing. You should see a very small unit count (one or two calls) rather than dozens, confirming your caching strategy is working. If you see many calls, trace back to find where a widget is triggering a rebuild that re-calls the API, and move that API Call into the button action instead of a Page Load trigger. For mobile builds, use FlutterFlow's Download as Code or APK export and test on a physical device or emulator. The API calls will behave identically since they go to your Firebase URL over HTTPS, which works on all platforms without any platform-specific permissions.