How to Integrate Lovable with X (Twitter) Ads

Navigate to developer.twitter.com and sign in with your X account. If you do not have a developer account, click 'Apply for a developer account' and go through the application process. X requires Basic or Elevated access for API usage; Ads API access specifically requires Elevated access or a partner agreement. Once your developer account is approved, go to the Developer Portal and create a project and app. Under your app's settings, navigate to 'Keys and tokens'. You need four credential values: 1. API Key (also called Consumer Key) 2. API Key Secret (also called Consumer Secret) 3. Access Token 4. Access Token Secret The API Key and Secret are generated when you create the app. The Access Token and Secret are generated by clicking 'Generate' in the app's authentication settings — these represent your own account's authorization. For multi-user apps where other X users connect their accounts, you would implement the OAuth 1.0a three-legged flow, but for a single-account ads dashboard, your own access token is sufficient. For Ads API access, go to developer.twitter.com/en/portal/projects/{your-project}/apps/{your-app}/auth-settings and verify the app has Read, Write, and Direct Messages permissions. You also need to apply for Ads API access at developer.twitter.com/en/docs/twitter-ads-api — this may require a separate application review for your specific use case. Find your Ads account ID by logging into ads.twitter.com — it is the numeric string in the URL when viewing your campaigns.

Open your Lovable project and navigate to Cloud → Secrets via the '+' icon next to Preview. Add the following five secrets: - Name: X_CONSUMER_KEY — Value: your API Key (Consumer Key) - Name: X_CONSUMER_SECRET — Value: your API Key Secret (Consumer Secret) - Name: X_ACCESS_TOKEN — Value: your Access Token - Name: X_ACCESS_TOKEN_SECRET — Value: your Access Token Secret - Name: X_ADS_ACCOUNT_ID — Value: your numeric X Ads account ID All five are required. OAuth 1.0a signing requires all four credential values to compute the HMAC-SHA1 signature on every request — unlike OAuth 2.0 where only the access token is needed for API calls. The signing happens in the Edge Function using Deno's Web Crypto API. X advertising credentials authorize access to campaign management and ad spend data. Lovable's security infrastructure blocks approximately 1,200 hardcoded API keys per day, but these credentials specifically require extra care — never paste them in Lovable's chat or any visible code.

The core challenge of the X Ads integration is implementing OAuth 1.0a request signing. Unlike OAuth 2.0 where you simply add an Authorization: Bearer {token} header, OAuth 1.0a requires you to: 1. Collect the request URL, HTTP method, and all query/body parameters 2. Add OAuth-specific parameters (oauth_consumer_key, oauth_nonce, oauth_signature_method, oauth_timestamp, oauth_token, oauth_version) 3. Percent-encode and sort all parameters alphabetically 4. Build the signature base string from the HTTP method, encoded URL, and encoded parameters 5. Compute the HMAC-SHA1 signature using consumer_secret&access_token_secret as the signing key 6. Build the Authorization header with all OAuth parameters and the signature Deno's Web Crypto API provides the HMAC-SHA1 implementation needed for this signing. The code below implements the full OAuth 1.0a signing process — paste it into Lovable's chat with the prompt below to generate the full Edge Function. The X Ads API base URL is https://ads-api.twitter.com/12/ (verify the version number against current documentation). Key endpoints: GET /accounts/{id}/campaigns for campaign list, GET /accounts/{id}/stats/async/query for analytics, GET /accounts/{id}/line_items for line items.

1// supabase/functions/twitter-ads/index.ts
2// OAuth 1.0a signing for X Ads API
3
4function percentEncode(str: string): string {
5  return encodeURIComponent(str).replace(/[!'()*]/g, (c) => '%' + c.charCodeAt(0).toString(16).toUpperCase());
6}
7
8async function sign(method: string, url: string, params: Record<string, string>, consumerKey: string, consumerSecret: string, accessToken: string, tokenSecret: string): Promise<string> {
9  const oauthParams: Record<string, string> = {
10    oauth_consumer_key: consumerKey,
11    oauth_nonce: crypto.randomUUID().replace(/-/g, ''),
12    oauth_signature_method: 'HMAC-SHA1',
13    oauth_timestamp: Math.floor(Date.now() / 1000).toString(),
14    oauth_token: accessToken,
15    oauth_version: '1.0',
16    ...params,
17  };
18
19  const sortedParams = Object.keys(oauthParams)
20    .sort()
21    .map((k) => `${percentEncode(k)}=${percentEncode(oauthParams[k])}`)
22    .join('&');
23
24  const baseString = [method.toUpperCase(), percentEncode(url), percentEncode(sortedParams)].join('&');
25  const signingKey = `${percentEncode(consumerSecret)}&${percentEncode(tokenSecret)}`;
26
27  const key = await crypto.subtle.importKey(
28    'raw',
29    new TextEncoder().encode(signingKey),
30    { name: 'HMAC', hash: 'SHA-1' },
31    false,
32    ['sign']
33  );
34  const signature = await crypto.subtle.sign('HMAC', key, new TextEncoder().encode(baseString));
35  const signatureB64 = btoa(String.fromCharCode(...new Uint8Array(signature)));
36
37  const authHeader = 'OAuth ' + Object.keys(oauthParams)
38    .filter((k) => k.startsWith('oauth_'))
39    .sort()
40    .map((k) => `${percentEncode(k)}="${percentEncode(oauthParams[k])}"`)
41    .join(', ') + `, oauth_signature="${percentEncode(signatureB64)}"`;
42
43  return authHeader;
44}
45
46Deno.serve(async (req) => {
47  if (req.method === 'OPTIONS') {
48    return new Response(null, {
49      headers: {
50        'Access-Control-Allow-Origin': '*',
51        'Access-Control-Allow-Methods': 'POST, OPTIONS',
52        'Access-Control-Allow-Headers': 'Content-Type, Authorization',
53      },
54    });
55  }
56
57  const consumerKey = Deno.env.get('X_CONSUMER_KEY')!;
58  const consumerSecret = Deno.env.get('X_CONSUMER_SECRET')!;
59  const accessToken = Deno.env.get('X_ACCESS_TOKEN')!;
60  const tokenSecret = Deno.env.get('X_ACCESS_TOKEN_SECRET')!;
61  const accountId = Deno.env.get('X_ADS_ACCOUNT_ID')!;
62
63  if (!consumerKey || !consumerSecret || !accessToken || !tokenSecret) {
64    return new Response(JSON.stringify({ error: 'X Ads credentials not fully configured' }), {
65      status: 500,
66      headers: { 'Content-Type': 'application/json', 'Access-Control-Allow-Origin': '*' },
67    });
68  }
69
70  const { action, params } = await req.json();
71  let url: string;
72
73  if (action === 'campaigns') {
74    url = `https://ads-api.twitter.com/12/accounts/${accountId}/campaigns`;
75  } else if (action === 'account') {
76    url = `https://ads-api.twitter.com/12/accounts/${accountId}`;
77  } else if (action === 'line_items') {
78    url = `https://ads-api.twitter.com/12/accounts/${accountId}/line_items${params?.campaign_id ? `?campaign_ids=${params.campaign_id}` : ''}`;
79  } else {
80    return new Response(JSON.stringify({ error: 'Invalid action' }), {
81      status: 400,
82      headers: { 'Content-Type': 'application/json', 'Access-Control-Allow-Origin': '*' },
83    });
84  }
85
86  const authHeader = await sign('GET', url.split('?')[0], {}, consumerKey, consumerSecret, accessToken, tokenSecret);
87
88  const response = await fetch(url, {
89    method: 'GET',
90    headers: { 'Authorization': authHeader, 'Content-Type': 'application/json' },
91  });
92
93  const data = await response.json();
94  return new Response(JSON.stringify(data), {
95    status: response.ok ? 200 : response.status,
96    headers: { 'Content-Type': 'application/json', 'Access-Control-Allow-Origin': '*' },
97  });
98});

With the OAuth 1.0a signing working, use Lovable's chat to build the campaign management dashboard. X Ads analytics are retrieved through an asynchronous stats query system — you POST a stats request, receive a job ID, then poll the job status until results are available. This asynchronous pattern is more complex than synchronous analytics endpoints used by most other ad platforms. For the campaign overview, fetch campaigns synchronously (the /campaigns endpoint is synchronous) and display the core campaign attributes: name, status, funding_instrument_id, daily_budget_amount_local_micro (divided by 1,000,000 to get dollar amounts), entity_status, and start/end times. For performance metrics, use the synchronous /stats endpoint for entity-level stats (impressions, engagements, spend) with a date range and the correct metric groups. X Ads metrics are returned in the 'organic_metrics' and 'promoted_metrics' groups — promoted_metrics covers paid amplification while organic_metrics covers unpromoted engagement. For promoted tweet creative performance, fetch line items and then the promoted tweets for each line item. This shows which specific tweet content is being amplified, its engagement rate, and whether it warrants continuation or pausing.