How to Integrate Microsoft Power BI with V0

Before writing any code, you need to set up the Azure AD service principal that your Next.js API route will use to authenticate with Power BI. Navigate to portal.azure.com → Azure Active Directory → App registrations → New registration. Give your app a name (e.g., 'MyApp Power BI Embed'), select 'Accounts in this organizational directory only' as the supported account type, and click Register. After registration, note the Application (client) ID and Directory (tenant) ID from the app's Overview page — you will need both for environment variables. Under Certificates & secrets → Client secrets → New client secret, create a secret with a 24-month expiry and copy the secret value immediately (it won't be shown again). Next, grant the app access to the Power BI API: go to API permissions → Add a permission → APIs my organization uses → search 'Power BI Service' → Delegated permissions → add 'Report.ReadAll' and 'Dataset.ReadAll'. Click Grant admin consent. Finally, in Power BI at app.powerbi.com, navigate to the workspace containing your reports → Workspace settings → Access → add your Azure AD app as an Admin or Contributor. This workspace-level permission is required for the service principal to fetch embed tokens for reports in that workspace. The setup process takes approximately 15-20 minutes — this is the most time-consuming part of the Power BI integration, but it only needs to be done once.

Create a Next.js API route that authenticates with Azure AD and fetches a Power BI embed token. The embed token is a short-lived credential (60 minutes by default) that the browser uses to authenticate with Power BI's rendering infrastructure — it grants access to a specific report without exposing your Azure AD credentials. The authentication flow uses the OAuth 2.0 client credentials grant: POST to https://login.microsoftonline.com/{tenant_id}/oauth2/v2.0/token with your client ID, client secret, and the scope https://analysis.windows.net/powerbi/api/.default. This returns an access token. Use the access token to call the Power BI REST API endpoint POST https://api.powerbi.com/v1.0/myorg/groups/{workspace_id}/reports/{report_id}/GenerateToken with { accessLevel: 'View' } in the request body. This returns the embed token and the embed URL. Return both to the client component. For row-level security (RLS) — filtering data per user — add identities array to the GenerateToken request body with the username and roles for the embedded user. The embed token includes whatever data access restrictions you specify, making it safe to return to the browser.

1// app/api/powerbi/embed-token/route.ts
2import { NextRequest, NextResponse } from 'next/server';
3
4async function getAzureAccessToken(): Promise<string> {
5  const tenantId = process.env.AZURE_TENANT_ID;
6  const clientId = process.env.AZURE_CLIENT_ID;
7  const clientSecret = process.env.AZURE_CLIENT_SECRET;
8
9  if (!tenantId || !clientId || !clientSecret) {
10    throw new Error('Azure AD credentials are not configured');
11  }
12
13  const tokenUrl = `https://login.microsoftonline.com/${tenantId}/oauth2/v2.0/token`;
14
15  const response = await fetch(tokenUrl, {
16    method: 'POST',
17    headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
18    body: new URLSearchParams({
19      grant_type: 'client_credentials',
20      client_id: clientId,
21      client_secret: clientSecret,
22      scope: 'https://analysis.windows.net/powerbi/api/.default',
23    }),
24  });
25
26  if (!response.ok) {
27    const error = await response.json();
28    throw new Error(error.error_description || 'Azure AD authentication failed');
29  }
30
31  const data = await response.json();
32  return data.access_token;
33}
34
35export async function GET(request: NextRequest) {
36  const workspaceId = process.env.POWERBI_WORKSPACE_ID;
37  const reportId = request.nextUrl.searchParams.get('reportId') || process.env.POWERBI_REPORT_ID;
38
39  if (!workspaceId || !reportId) {
40    return NextResponse.json(
41      { error: 'Power BI workspace or report ID is not configured' },
42      { status: 500 }
43    );
44  }
45
46  try {
47    const accessToken = await getAzureAccessToken();
48
49    // Get report details (embed URL)
50    const reportUrl = `https://api.powerbi.com/v1.0/myorg/groups/${workspaceId}/reports/${reportId}`;
51    const reportResponse = await fetch(reportUrl, {
52      headers: { Authorization: `Bearer ${accessToken}` },
53    });
54
55    if (!reportResponse.ok) {
56      throw new Error(`Failed to fetch report: ${reportResponse.statusText}`);
57    }
58
59    const report = await reportResponse.json();
60
61    // Generate embed token
62    const embedTokenUrl = `https://api.powerbi.com/v1.0/myorg/groups/${workspaceId}/reports/${reportId}/GenerateToken`;
63    const tokenResponse = await fetch(embedTokenUrl, {
64      method: 'POST',
65      headers: {
66        Authorization: `Bearer ${accessToken}`,
67        'Content-Type': 'application/json',
68      },
69      body: JSON.stringify({ accessLevel: 'View' }),
70    });
71
72    if (!tokenResponse.ok) {
73      throw new Error(`Failed to generate embed token: ${tokenResponse.statusText}`);
74    }
75
76    const tokenData = await tokenResponse.json();
77
78    return NextResponse.json({
79      embedToken: tokenData.token,
80      embedUrl: report.embedUrl,
81      reportId,
82      expiry: tokenData.expiration,
83    });
84  } catch (error) {
85    const message = error instanceof Error ? error.message : 'Failed to generate embed token';
86    console.error('Power BI embed error:', message);
87    return NextResponse.json({ error: message }, { status: 500 });
88  }
89}

Create a client component that fetches the embed token from your API route and uses the powerbi-client library to render the Power BI report in an iframe. Install the library: npm install powerbi-client. The powerbi-client library uses a service instance (new service.Service()) to manage report embedding. Pass a ref to a div element, the embed token, embed URL, and report ID to the embed() method, and the library handles the iframe creation, authentication, and rendering. The embed configuration requires type: 'report', tokenType: models.TokenType.Embed, accessToken (the embed token), embedUrl, id (the report ID), and settings for toolbar, filter pane, and navigation visibility. The PowerBIEmbed component is the simplest way to use powerbi-client in React — it handles the lifecycle methods for you. Import it from 'powerbi-client-react'. After the report loads, Power BI fires a 'loaded' event that you can listen to for showing/hiding loading states. For applying filters programmatically, use the report.setFilters() method after the report loads. Embed tokens expire after 60 minutes — implement a token refresh mechanism that calls your API route before expiry and calls report.setAccessToken() with the new token to update the session without reloading the report. Handle the expiry in a useEffect that sets a timer to refresh the token 5 minutes before expiry using the expiry timestamp returned by your API route.

1// components/PowerBIViewer.tsx
2'use client';
3
4import { useEffect, useState, useRef } from 'react';
5
6interface EmbedConfig {
7  embedToken: string;
8  embedUrl: string;
9  reportId: string;
10  expiry: string;
11}
12
13interface PowerBIViewerProps {
14  reportId?: string;
15  height?: number;
16}
17
18export function PowerBIViewer({ reportId, height = 700 }: PowerBIViewerProps) {
19  const containerRef = useRef<HTMLDivElement>(null);
20  const [config, setConfig] = useState<EmbedConfig | null>(null);
21  const [loading, setLoading] = useState(true);
22  const [error, setError] = useState<string | null>(null);
23
24  useEffect(() => {
25    const fetchEmbedConfig = async () => {
26      setLoading(true);
27      setError(null);
28      try {
29        const params = reportId ? `?reportId=${reportId}` : '';
30        const response = await fetch(`/api/powerbi/embed-token${params}`);
31        const data = await response.json();
32        if (!response.ok) throw new Error(data.error || 'Failed to load report');
33        setConfig(data);
34      } catch (err) {
35        setError(err instanceof Error ? err.message : 'Unknown error');
36      } finally {
37        setLoading(false);
38      }
39    };
40
41    fetchEmbedConfig();
42  }, [reportId]);
43
44  useEffect(() => {
45    if (!config || !containerRef.current || typeof window === 'undefined') return;
46
47    // Dynamically import powerbi-client to avoid SSR issues
48    import('powerbi-client').then(({ service, factories, models }) => {
49      const powerbi = new service.Service(
50        factories.hpmFactory,
51        factories.wpmpFactory,
52        factories.routerFactory
53      );
54
55      const embedConfig = {
56        type: 'report',
57        id: config.reportId,
58        embedUrl: config.embedUrl,
59        accessToken: config.embedToken,
60        tokenType: models.TokenType.Embed,
61        settings: {
62          panes: { filters: { visible: false }, pageNavigation: { visible: true } },
63          background: models.BackgroundType.Transparent,
64        },
65      };
66
67      powerbi.embed(containerRef.current!, embedConfig);
68    });
69  }, [config]);
70
71  if (loading) {
72    return (
73      <div className="animate-pulse bg-gray-200 rounded-lg" style={{ height }} />
74    );
75  }
76
77  if (error) {
78    return (
79      <div className="flex items-center justify-center bg-red-50 border border-red-200 rounded-lg" style={{ height }}>
80        <p className="text-red-600 text-sm">{error}</p>
81      </div>
82    );
83  }
84
85  return <div ref={containerRef} style={{ height, width: '100%' }} />;
86}

Push your code to GitHub and configure Azure AD credentials and Power BI workspace identifiers in Vercel. Navigate to the Vercel Dashboard → your project → Settings → Environment Variables. Add five variables: AZURE_TENANT_ID (the Directory (tenant) ID from your Azure AD app registration Overview — a UUID format like xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx), AZURE_CLIENT_ID (the Application (client) ID from the Azure AD app registration Overview — also UUID format), AZURE_CLIENT_SECRET (the client secret value you copied when creating the secret — a long string; note this is the Value, not the Secret ID), POWERBI_WORKSPACE_ID (the workspace GUID from the Power BI report URL — the first long number after /groups/ in app.powerbi.com/groups/{workspace_id}/reports/), and POWERBI_REPORT_ID (the report GUID from the URL — the number after /reports/ in the URL). None of these should have the NEXT_PUBLIC_ prefix — all are server-side secrets. Set all variables for Production and Preview environments. After saving, trigger a redeployment. Test the deployed app by navigating to a page containing the PowerBIViewer component — the report should render after a brief loading state. If you receive a 'AADSTS70011' Azure AD error, check that the scope in your token request matches exactly (https://analysis.windows.net/powerbi/api/.default) and that admin consent has been granted. If you receive a 403 from the Power BI API, verify the Azure AD app has been added to the Power BI workspace as a Member or Admin — the workspace access is separate from API permissions.