Twitter Ads

Before writing a single line of code, you need approval from X to use the Ads API. Navigate to developer.twitter.com, create a developer app if you haven't already, and apply for Ads API access from your app's dashboard. Approval can take several days. Once approved, open your app in the X Developer Portal and locate the Keys and Tokens section. You need four values: Consumer Key (also called API Key), Consumer Secret (API Key Secret), Access Token, and Access Token Secret. The Access Token and Secret are tied to the X account that will own the ad spend — make sure you're generating them for the correct account. Copy all four values to a secure temporary location such as a password manager. Also note your Ads Account ID (also called Account ID or Advertiser ID), which appears in the X Ads dashboard under Account Information. You will need it as a path variable in every Ads API call. Do not store any of these credentials in your FlutterFlow project or in any client-side file — they will be placed exclusively in the Cloud Function environment in the next step.

In your Firebase project, navigate to Cloud Functions and create a new function (or use the Firebase CLI locally). The function receives a request from FlutterFlow with an `endpoint` query parameter — for example `/12/accounts/{account_id}/campaigns` — and a `params` object, computes the full OAuth 1.0a Authorization header using the `oauth-1.0a` npm package and Node's built-in `crypto` module, then forwards the request to `https://ads-api.twitter.com` and returns the response as JSON. Store all four credentials as Firebase environment variables using `firebase functions:config:set` or as Secret Manager secrets (recommended). The function must accept CORS requests from your FlutterFlow web preview origin if you plan to test on web — add the `cors` npm package. Deploy with `firebase deploy --only functions`. After deployment, copy the Function's HTTPS trigger URL from the Firebase console; this is the URL you will paste into FlutterFlow in the next step. Note: the Functions URL itself is not a secret — it is the combination of that URL plus the server-side credentials that provides security.

1// Firebase Cloud Function — index.js
2const functions = require('firebase-functions');
3const admin = require('firebase-admin');
4const OAuth = require('oauth-1.0a');
5const crypto = require('crypto');
6const axios = require('axios');
7const cors = require('cors')({ origin: true });
8
9admin.initializeApp();
10
11const oauth = OAuth({
12  consumer: {
13    key: process.env.TWITTER_CONSUMER_KEY,
14    secret: process.env.TWITTER_CONSUMER_SECRET
15  },
16  signature_method: 'HMAC-SHA1',
17  hash_function(base_string, key) {
18    return crypto.createHmac('sha1', key).update(base_string).digest('base64');
19  }
20});
21
22const token = {
23  key: process.env.TWITTER_ACCESS_TOKEN,
24  secret: process.env.TWITTER_ACCESS_TOKEN_SECRET
25};
26
27exports.twitterAdsProxy = functions.https.onRequest((req, res) => {
28  cors(req, res, async () => {
29    const endpoint = req.query.endpoint || '';
30    const url = `https://ads-api.twitter.com${endpoint}`;
31    const requestData = { url, method: 'GET' };
32    const headers = oauth.toHeader(oauth.authorize(requestData, token));
33    headers['Content-Type'] = 'application/json';
34
35    try {
36      const response = await axios.get(url, {
37        headers,
38        params: req.query.params ? JSON.parse(req.query.params) : {}
39      });
40      res.status(200).json(response.data);
41    } catch (err) {
42      const status = err.response ? err.response.status : 500;
43      res.status(status).json({ error: err.message });
44    }
45  });
46});
47

With the Cloud Function live, open your FlutterFlow project and click API Calls in the left navigation panel. Click the + Add button and choose Create API Group. Name it TwitterAdsProxy. In the Base URL field, paste your Firebase Cloud Function's HTTPS trigger URL — for example `https://us-central1-your-project.cloudfunctions.net/twitterAdsProxy`. You do not need authentication headers at the FlutterFlow level because authentication is handled inside the Cloud Function; simply leave the Headers section empty or add a Content-Type: application/json header if your function requires it. Next, click + Add API Call inside the group. Name the call GetCampaigns. Set the method to GET. In the Query Params section, click + Add Variable to create an `endpoint` variable — set its default to `/12/accounts/YOUR_ACCOUNT_ID/campaigns` (replace with your actual account ID). Add a second variable `params` with a default of `{}` if you want to pass date ranges or additional filters. Click Save. Now open the Response & Test tab, click Test, and check that the response body shows your real campaign data as JSON. If the test returns an empty array, verify that your Cloud Function is deployed and that the account ID in the endpoint path is correct.

1// API Call config reference (not pasted into FlutterFlow — visual setup)
2{
3  "group_name": "TwitterAdsProxy",
4  "base_url": "https://us-central1-YOUR_PROJECT.cloudfunctions.net/twitterAdsProxy",
5  "calls": [
6    {
7      "name": "GetCampaigns",
8      "method": "GET",
9      "query_params": {
10        "endpoint": "/12/accounts/{{account_id}}/campaigns",
11        "params": "{}"
12      }
13    },
14    {
15      "name": "GetCampaignStats",
16      "method": "GET",
17      "query_params": {
18        "endpoint": "/12/stats/accounts/{{account_id}}",
19        "params": "{\"entity\":\"CAMPAIGN\",\"entity_ids\":\"{{campaign_id}}\",\"start_time\":\"{{start_date}}\",\"end_time\":\"{{end_date}}\"}"
20      }
21    }
22  ]
23}

After a successful test, FlutterFlow can automatically generate JSON Path expressions from the response. In the GetCampaigns call, click the Response & Test tab and paste a sample JSON response from your last test. Click Generate JSON Paths. FlutterFlow will display a tree of extractable fields. Map the following paths into your Data Type: `$.data[*].id` for campaign ID, `$.data[*].name` for campaign name, `$.data[*].status` for the current state (ACTIVE, PAUSED, etc.). For the GetCampaignStats call, paste a sample stats response and map `$.data[0].id_data[0].metrics.impressions[0]` for total impressions, `$.data[0].id_data[0].metrics.billed_charge_local_micro[0]` for spend in microcurrency (divide by 1,000,000 for dollars), and `$.data[0].id_data[0].metrics.engagements[0]` for engagements. Create a Dart Data Type called CampaignSummary with String fields (id, name, status) and Integer fields (impressions, engagements, spendMicro). Then go to the page that will host your dashboard, open its Backend Query settings, select the TwitterAdsProxy → GetCampaigns call, and set the Return Type to a list of CampaignSummary. FlutterFlow will automatically deserialize the API response into your Data Type list whenever the page loads.

1// JSON Path examples for Twitter Ads API response
2// Campaign list response
3$.data[*].id           // campaign IDs
4$.data[*].name         // campaign names
5$.data[*].status       // ACTIVE | PAUSED | DELETED
6$.data[*].currency     // currency code e.g. USD
7
8// Stats response (impressions, spend, engagements)
9$.data[0].id_data[0].metrics.impressions[0]
10$.data[0].id_data[0].metrics.billed_charge_local_micro[0]
11$.data[0].id_data[0].metrics.engagements[0]
12$.data[0].id_data[0].metrics.clicks[0]

Now that FlutterFlow has a typed data source, you can bind it to UI components. On your dashboard page, add a ListView widget and set its data source to the CampaignSummary list from the GetCampaigns backend query. Inside each list item, add a Text widget bound to `item.name`, a Badge or Chip bound to `item.status` (show green for ACTIVE, grey for PAUSED), and a Subtext bound to formatted impressions from the GetCampaignStats call. For the stats detail view, add a separate page and pass the selected campaign ID as a page parameter. On that page, use the GetCampaignStats API Call as a page-level backend query with the campaign ID variable injected, then bind impressions, spend, and engagements to stat cards. For a chart view, add a BarChart widget (available in FlutterFlow's chart panel), set the X-axis to campaign name and Y-axis to impressions from your data list. Pull-to-refresh behavior is configured by wrapping the ListView in a RefreshIndicator widget in the widget tree and setting its On Refresh action to trigger the backend query again. Cache aggressively: rate limits on some Ads API endpoints cap at 60 requests per 15 minutes per app — a busy ListView that refetches on every scroll will hit this ceiling quickly. Consider storing the last-fetched results in App State and only re-fetching when the user explicitly pulls to refresh.