How to Integrate Bing Ads with V0

Microsoft Advertising requires two separate credentials: a developer token (for API access) and OAuth 2.0 credentials (for account authentication). You need both to make API calls. To get a developer token: log into ads.microsoft.com, go to the top-right menu → Tools → API Center → Apply for a developer token. Production developer tokens require a Microsoft Advertising account with active campaigns and billing. For testing, use the sandbox environment which has its own developer token. The developer token is a fixed string like 'BBD37VB98' — copy it and store it as BING_ADS_DEV_TOKEN in Vercel. For OAuth setup: go to portal.azure.com → Azure Active Directory → App registrations → New registration. Name your app (e.g., 'My V0 Ads Dashboard'), select 'Accounts in any organizational directory and personal Microsoft accounts', and set the redirect URI to https://your-app.vercel.app/api/bing-ads/callback. After creation, note the Application (client) ID as BING_ADS_CLIENT_ID. Go to Certificates & Secrets → New client secret → add expiry → copy the secret value as BING_ADS_CLIENT_SECRET. For the initial OAuth flow, you need to get a refresh token for your Microsoft Advertising account. Use the OAuth 2.0 authorization code flow: direct the user to https://login.microsoftonline.com/common/oauth2/v2.0/authorize with your client ID, redirect URI, and scope (https://ads.microsoft.com/msads.manage offline_access). After authorization, Microsoft redirects with a code that you exchange for access and refresh tokens. Store the refresh token in your database or Vercel environment for server-side use. Access tokens expire after 1 hour; refresh tokens last 90 days. Important V0 limitation: V0 can generate the OAuth callback handler code and the API route structure, but it cannot complete the OAuth authorization flow or generate real access tokens. You need to run the OAuth flow manually once to get a refresh token before your dashboard can fetch live data.

1// app/api/bing-ads/auth/route.ts — OAuth initiation
2import { NextResponse } from 'next/server';
3
4export async function GET() {
5  const clientId = process.env.BING_ADS_CLIENT_ID;
6  const redirectUri = process.env.BING_ADS_REDIRECT_URI;
7
8  if (!clientId || !redirectUri) {
9    return NextResponse.json(
10      { error: 'BING_ADS_CLIENT_ID and BING_ADS_REDIRECT_URI must be configured' },
11      { status: 500 }
12    );
13  }
14
15  const scope = 'https://ads.microsoft.com/msads.manage offline_access';
16  const authUrl = new URL('https://login.microsoftonline.com/common/oauth2/v2.0/authorize');
17  authUrl.searchParams.set('client_id', clientId);
18  authUrl.searchParams.set('redirect_uri', redirectUri);
19  authUrl.searchParams.set('response_type', 'code');
20  authUrl.searchParams.set('scope', scope);
21  authUrl.searchParams.set('response_mode', 'query');
22
23  return NextResponse.redirect(authUrl.toString());
24}

Microsoft Advertising access tokens expire after 1 hour. Build a helper function that uses the stored refresh token to get a fresh access token before each API call. This is the core infrastructure all other Bing Ads API routes will use. Create a lib/bing-ads.ts utility file with the token refresh logic and a base API fetch function. The token refresh endpoint is https://login.microsoftonline.com/common/oauth2/v2.0/token. Successful refresh returns a new access_token and optionally a new refresh_token. Some implementations cache the access token in memory (module-level variable with expiry tracking) to avoid refreshing on every API call — access tokens are valid for 3600 seconds. The Microsoft Advertising REST API base URL for production is https://campaign.api.bingads.microsoft.com/api/advertiser/campaignmanagement/v13/. All requests require three headers: Authorization: Bearer {access_token}, DeveloperToken: {developer_token}, and CustomerId: {customer_id}. The customer ID is the top-level account identifier visible in the Microsoft Advertising UI URL. The reporting API (for performance metrics) uses a different approach: you submit a report request, wait for it to complete, and download the results. For simpler campaign list and status data, the Campaign Management API returns data directly. For dashboards requiring immediate data, use the Campaign Management API for real-time campaign data and the Bulk API for historical performance reports. For V0-generated dashboards, the Campaign Management API's GetCampaignsByAccountId endpoint gives you real-time campaign status and budget data. For historical performance metrics (impressions, clicks, spend), use the Reporting API with a date range.

1// lib/bing-ads.ts
2interface TokenResponse {
3  access_token: string;
4  token_type: string;
5  expires_in: number;
6  refresh_token?: string;
7}
8
9let cachedToken: { token: string; expiresAt: number } | null = null;
10
11export async function getBingAdsAccessToken(): Promise<string> {
12  // Return cached token if still valid (with 60s buffer)
13  if (cachedToken && Date.now() < cachedToken.expiresAt - 60000) {
14    return cachedToken.token;
15  }
16
17  const refreshToken = process.env.BING_ADS_REFRESH_TOKEN;
18  const clientId = process.env.BING_ADS_CLIENT_ID;
19  const clientSecret = process.env.BING_ADS_CLIENT_SECRET;
20
21  if (!refreshToken || !clientId || !clientSecret) {
22    throw new Error('Missing Bing Ads OAuth credentials in environment variables');
23  }
24
25  const response = await fetch(
26    'https://login.microsoftonline.com/common/oauth2/v2.0/token',
27    {
28      method: 'POST',
29      headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
30      body: new URLSearchParams({
31        client_id: clientId,
32        client_secret: clientSecret,
33        refresh_token: refreshToken,
34        grant_type: 'refresh_token',
35        scope: 'https://ads.microsoft.com/msads.manage offline_access',
36      }),
37    }
38  );
39
40  if (!response.ok) {
41    const error = await response.text();
42    throw new Error(`Token refresh failed: ${error}`);
43  }
44
45  const data: TokenResponse = await response.json();
46  cachedToken = {
47    token: data.access_token,
48    expiresAt: Date.now() + data.expires_in * 1000,
49  };
50
51  return data.access_token;
52}
53
54export function getBingAdsHeaders(accessToken: string): Record<string, string> {
55  return {
56    Authorization: `Bearer ${accessToken}`,
57    DeveloperToken: process.env.BING_ADS_DEV_TOKEN!,
58    CustomerId: process.env.BING_ADS_CUSTOMER_ID!,
59    'Content-Type': 'application/json',
60  };
61}

Build the main campaign data API route that fetches campaign list and performance metrics from Microsoft Advertising. This route is what V0-generated dashboard components call to display advertising data. Create app/api/bing-ads/campaigns/route.ts. The route uses the token refresh helper to get an access token, then calls the Microsoft Advertising Campaign Management API to list campaigns and their status, budget, and spend data. The AccountId parameter is your Microsoft Advertising account ID — find it in the Microsoft Advertising UI at Tools → Accounts & Billing → Account details, or in the URL as your account number. For performance metrics (impressions, clicks, CTR, conversions, ROAS), you use the Microsoft Advertising Reporting API. The reporting flow involves: (1) submitting a report request with date range, metrics, and segmentation, (2) polling for report completion status, (3) downloading the completed report CSV. This asynchronous flow takes 10-120 seconds depending on data volume. For a dashboard that needs near-real-time data, a practical approach is to pre-aggregate report data on a schedule (using Vercel Cron Jobs) and store results in your database. The dashboard then reads from your database rather than calling the Microsoft Advertising reporting API on demand. This avoids the slow asynchronous report generation for every page load. The example below uses the Campaign Management API for direct campaign data, which returns faster than the reporting API and includes current budget, status, and basic spend data.

1import { NextRequest, NextResponse } from 'next/server';
2import { getBingAdsAccessToken, getBingAdsHeaders } from '@/lib/bing-ads';
3
4const API_BASE = 'https://campaign.api.bingads.microsoft.com/api/advertiser/campaignmanagement/v13';
5
6export async function GET(request: NextRequest) {
7  const { searchParams } = new URL(request.url);
8  const accountId = searchParams.get('accountId') || process.env.BING_ADS_ACCOUNT_ID;
9
10  if (!accountId) {
11    return NextResponse.json(
12      { error: 'accountId query parameter or BING_ADS_ACCOUNT_ID environment variable required' },
13      { status: 400 }
14    );
15  }
16
17  try {
18    const accessToken = await getBingAdsAccessToken();
19    const headers = getBingAdsHeaders(accessToken);
20
21    // Fetch campaigns for the account
22    const response = await fetch(
23      `${API_BASE}/Campaigns?AccountId=${accountId}&CampaignType=Search`,
24      { headers }
25    );
26
27    if (!response.ok) {
28      const error = await response.text();
29      console.error('Bing Ads API error:', error);
30      return NextResponse.json(
31        { error: 'Failed to fetch campaigns from Microsoft Advertising' },
32        { status: response.status }
33      );
34    }
35
36    const data = await response.json();
37    const campaigns = data.Campaigns || [];
38
39    // Map campaigns to a simpler format for the dashboard
40    const formatted = campaigns.map((c: {
41      Id: string;
42      Name: string;
43      Status: string;
44      BudgetType: string;
45      DailyBudget: number;
46      TimeZone: string;
47    }) => ({
48      id: c.Id,
49      name: c.Name,
50      status: c.Status,
51      budgetType: c.BudgetType,
52      dailyBudget: c.DailyBudget,
53      timeZone: c.TimeZone,
54    }));
55
56    return NextResponse.json({ campaigns: formatted, total: formatted.length, accountId });
57  } catch (error) {
58    console.error('Campaigns fetch error:', error);
59    return NextResponse.json(
60      { error: error instanceof Error ? error.message : 'Unknown error' },
61      { status: 500 }
62    );
63  }
64}

Configure all required Microsoft Advertising credentials in Vercel environment variables and test the end-to-end data flow from Microsoft Advertising to your dashboard. In Vercel Dashboard → Settings → Environment Variables, add these variables: BING_ADS_DEV_TOKEN (your developer token), BING_ADS_CLIENT_ID (Azure AD app client ID), BING_ADS_CLIENT_SECRET (Azure AD app client secret), BING_ADS_REFRESH_TOKEN (obtained from the OAuth flow), BING_ADS_CUSTOMER_ID (your Microsoft Advertising customer ID), and BING_ADS_ACCOUNT_ID (your default account ID for single-account dashboards). None of these variables should have the NEXT_PUBLIC_ prefix — they are all server-only credentials. The Microsoft Advertising API requires all of these for authentication and account identification. After adding variables, redeploy your Vercel project. Test by visiting your deployed dashboard URL and verifying that campaign data appears. Check Vercel Function Logs if data is not showing — authentication errors appear as 401 responses, invalid developer tokens as 403 responses, and incorrect account IDs as 404 responses. A critical testing note for V0 developers: the Microsoft Advertising sandbox environment at https://sandbox.bingads.microsoft.com uses different credentials from production. Sandbox developer tokens have a different format, and OAuth credentials require registration in the sandbox. For initial testing, use production credentials against a real account (even a small test account with minimal spend). Sandbox setup is complex and often skipped for dashboard-only integrations that only read data.