How to Integrate Lovable with Microsoft Advertising (Bing Ads)

Microsoft Advertising API requires two separate credentials: OAuth2 credentials from Azure Active Directory and a developer token from Microsoft Advertising. Start with the Azure AD registration. Go to portal.azure.com and log in with your Microsoft account. Navigate to Azure Active Directory → App registrations → New registration. Name your app (e.g., 'Lovable Bing Ads Dashboard'), select 'Accounts in any organizational directory and personal Microsoft accounts' for the supported account types so it works with both consumer and work accounts, and set a redirect URI to your application's OAuth callback URL — use https://login.microsoftonline.com/common/oauth2/nativeclient as a temporary redirect for initial token generation if you do not have a callback endpoint yet. After registering, note your Application (client) ID from the overview page. Go to Certificates & secrets → New client secret, set an expiry, and copy the secret value immediately — it is only shown once. Now for the developer token: log in to Microsoft Advertising at ads.microsoft.com with the same Microsoft account used for Azure AD, navigate to Tools → API Center, click 'Request developer token', fill in the application details, select your purpose (reporting and analytics), and submit. Approval typically takes 1-3 business days. You will start with a sandbox developer token immediately for testing and receive the production token after approval.

Microsoft Advertising uses OAuth2 with the Microsoft identity platform endpoint. To get your first refresh token, you need to complete an authorization code flow. The authorization URL is https://login.microsoftonline.com/common/oauth2/v2.0/authorize with parameters: client_id (your Azure AD app ID), response_type=code, redirect_uri (the same URI you registered), scope=openid profile email https://ads.microsoft.com/msads.manage offline_access, and response_mode=query. Open this URL in a browser, log in with your Microsoft Advertising credentials, grant consent, and copy the authorization code from the redirect URL. Exchange this code for tokens by POSTing to https://login.microsoftonline.com/common/oauth2/v2.0/token with the code, client_id, client_secret, redirect_uri, and grant_type=authorization_code. You receive an access token (valid 1 hour) and a refresh token (valid until revoked). Now open the Cloud tab in Lovable, navigate to Secrets, and add five secrets: MSADS_CLIENT_ID (Azure AD app client ID), MSADS_CLIENT_SECRET (Azure AD client secret), MSADS_REFRESH_TOKEN (refresh token from the OAuth2 flow), MSADS_DEVELOPER_TOKEN (the token from Microsoft Advertising API Center), and MSADS_ACCOUNT_ID (your 10-digit Microsoft Advertising account ID). Lovable's SOC 2 Type II certified Cloud Secrets store protects these credentials from any client-side exposure.

Ask Lovable to create a Supabase Edge Function called bing-ads-api that handles Microsoft Advertising API calls. The function must first exchange the stored refresh token for a fresh access token using the Microsoft identity platform, since access tokens expire after 1 hour. POST to https://login.microsoftonline.com/common/oauth2/v2.0/token with grant_type=refresh_token, the stored refresh token, client_id, and client_secret to receive a new access token. Cache the access token at the module level along with its expiry time to avoid redundant token refreshes on every call. For the Microsoft Advertising REST API, all requests go to https://reporting.api.bingads.microsoft.com/Api/Advertiser/Reporting/V13/ for reporting or https://campaign.api.bingads.microsoft.com/Api/Advertiser/CampaignManagement/v13/ for campaign management. Every API request needs three headers: AuthenticationToken (the Bearer access token), DeveloperToken (your developer token), and CustomerAccountId (your account ID). The function accepts a service (reporting or campaign), a path, HTTP method, and optional request body, routes to the correct base URL, and returns the response. For reporting, requests are submitted asynchronously — submit a report request, poll for completion, then download the report — which the Edge Function should handle as a single synchronous call by polling until ready.

1import { serve } from "https://deno.land/std@0.168.0/http/server.ts";
2
3const corsHeaders = {
4  "Access-Control-Allow-Origin": "*",
5  "Access-Control-Allow-Headers": "authorization, x-client-info, apikey, content-type",
6};
7
8let tokenCache: { token: string; expiry: number } | null = null;
9
10async function getAccessToken(): Promise<string> {
11  if (tokenCache && Date.now() < tokenCache.expiry) return tokenCache.token;
12
13  const response = await fetch(
14    "https://login.microsoftonline.com/common/oauth2/v2.0/token",
15    {
16      method: "POST",
17      headers: { "Content-Type": "application/x-www-form-urlencoded" },
18      body: new URLSearchParams({
19        grant_type: "refresh_token",
20        client_id: Deno.env.get("MSADS_CLIENT_ID")!,
21        client_secret: Deno.env.get("MSADS_CLIENT_SECRET")!,
22        refresh_token: Deno.env.get("MSADS_REFRESH_TOKEN")!,
23        scope: "https://ads.microsoft.com/msads.manage offline_access",
24      }),
25    }
26  );
27
28  const data = await response.json();
29  if (!data.access_token) throw new Error(data.error_description || "Token refresh failed");
30
31  tokenCache = {
32    token: data.access_token,
33    expiry: Date.now() + 55 * 60 * 1000,
34  };
35  return tokenCache.token;
36}
37
38serve(async (req) => {
39  if (req.method === "OPTIONS") return new Response("ok", { headers: corsHeaders });
40
41  try {
42    const accessToken = await getAccessToken();
43    const developerToken = Deno.env.get("MSADS_DEVELOPER_TOKEN")!;
44    const accountId = Deno.env.get("MSADS_ACCOUNT_ID")!;
45
46    const { path, method = "GET", body: reqBody } = await req.json();
47    if (!path) throw new Error("path is required");
48
49    const url = `https://reporting.api.bingads.microsoft.com/Api/Advertiser/Reporting/V13/${path}`;
50
51    const fetchOptions: RequestInit = {
52      method,
53      headers: {
54        "AuthenticationToken": `Bearer ${accessToken}`,
55        "DeveloperToken": developerToken,
56        "CustomerAccountId": accountId,
57        "Content-Type": "application/json",
58      },
59    };
60
61    if (reqBody && method !== "GET") {
62      fetchOptions.body = JSON.stringify(reqBody);
63    }
64
65    const response = await fetch(url, fetchOptions);
66    const data = await response.json();
67
68    if (!response.ok) throw new Error(JSON.stringify(data));
69
70    return new Response(JSON.stringify(data), {
71      headers: { ...corsHeaders, "Content-Type": "application/json" },
72    });
73  } catch (error) {
74    return new Response(
75      JSON.stringify({ error: error.message }),
76      { status: 500, headers: { ...corsHeaders, "Content-Type": "application/json" } }
77    );
78  }
79});

With the Edge Function deployed, ask Lovable to build a campaign performance dashboard for Microsoft Advertising. Microsoft Advertising's Reporting Service works asynchronously: you submit a report request body specifying report type (CampaignPerformanceReport), time period, columns (like CampaignName, Impressions, Clicks, Spend, Conversions), and aggregation level. The API returns a report request ID. You then poll a status endpoint until the report is ready, then download the report data as a CSV or XML. For the most developer-friendly approach, ask Lovable to handle this polling inside the Edge Function — submit the report, poll every 3 seconds up to a timeout of 60 seconds, and return the processed data. Alternatively, use the Campaign Management Service which has synchronous endpoints for fetching campaign lists and basic metadata, then combine with cached reporting data. The dashboard should display a summary metrics bar at the top with total impressions, clicks, spend, and conversions. Below this, show a table of campaigns with sortable columns. Add a date range selector defaulting to the last 30 days. For visual impact, include a spend vs. conversions scatter chart to help users visually identify campaigns with strong conversion efficiency.