How to Integrate Lovable with Microsoft Power BI

The app-owns-data embedding pattern uses an Azure AD service principal (a non-interactive application identity) to authenticate with the Power BI API. The service principal acts as your application's identity for all Power BI API calls — it is the 'user' that your Edge Function logs in as to generate embed tokens. To create a service principal, log in to the Azure portal at portal.azure.com. In the search bar, type 'App registrations' and click it. Click 'New registration'. Give it a name like 'Lovable Power BI Integration'. For supported account types, select 'Accounts in this organizational directory only'. Click Register. After registration, you are on the app's Overview page. Note three values: - Application (client) ID — copy this, it is your AZURE_CLIENT_ID - Directory (tenant) ID — copy this, it is your AZURE_TENANT_ID Now create a client secret. In the left sidebar, click 'Certificates & secrets' → 'New client secret'. Give it a description and set the expiry to 24 months (the maximum). Click Add. Copy the Value immediately — this is your AZURE_CLIENT_SECRET. It is shown only once. Next, enable the service principal to access Power BI. In the Power BI Admin Portal (app.powerbi.com → Settings → Admin portal), go to 'Tenant settings' → 'Developer settings' → 'Allow service principals to use Power BI APIs' and enable it. Apply to the security group that contains your service principal, or apply to the entire organization for development. Finally, add the service principal to your Power BI workspace. In Power BI Service (app.powerbi.com), navigate to the workspace containing your reports → Settings → Access → add the service principal as a 'Member' or 'Admin'. Use the service principal's name (the name you gave the app registration).

Store your Azure service principal credentials in Lovable's Cloud Secrets panel. These credentials authenticate your Edge Function as the service principal — anyone with these values can generate embed tokens for your Power BI workspace, so they must be treated as highly sensitive and never included in frontend code. Lovable's platform blocks approximately 1,200 hardcoded API keys per day and holds SOC 2 Type II and ISO 27001:2022 certifications. The Secrets panel provides encrypted storage accessible only from Edge Functions via Deno.env.get(). Click the '+' icon next to the Preview label in the Lovable editor. Go to Cloud → Secrets. Add the following secrets: - Name: AZURE_TENANT_ID — Value: your Azure AD Directory (tenant) ID (looks like xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx) - Name: AZURE_CLIENT_ID — Value: your app registration Application (client) ID - Name: AZURE_CLIENT_SECRET — Value: your service principal client secret value - Name: POWERBI_WORKSPACE_ID — Value: your Power BI workspace ID (found in the workspace URL at app.powerbi.com/groups/YOUR-WORKSPACE-ID/) - Name: POWERBI_REPORT_ID — Value: the ID of the specific report to embed (in the report URL at app.powerbi.com/groups/WORKSPACE-ID/reports/YOUR-REPORT-ID) For a multi-report application where different pages embed different reports, you can pass POWERBI_REPORT_ID as a parameter from the frontend rather than storing it as a secret — report IDs are not credentials, just identifiers. Only the authentication credentials (tenant ID, client ID, client secret) must be in Secrets.

The embed token Edge Function has three stages: obtain an Azure AD access token using the client credentials OAuth flow, use that token to call the Power BI API to get the report's embed URL, and then call the Power BI GenerateToken API to create a short-lived embed token scoped to the specific report and user context. The Azure AD token endpoint accepts a POST request with the client credentials (tenant ID, client ID, client secret) and returns an access token with a 1-hour expiry. This token then authenticates the Power BI API calls. The GenerateToken API returns an embed token with a configurable expiry (30 minutes default) that the frontend Power BI SDK uses to render the report. For row-level security (RLS) embedding where different users see different data, the GenerateToken call includes an effective identity with the username and roles. The Power BI dataset must have RLS configured with matching role names. The Edge Function receives the user's identity information and passes it through to Power BI. This Edge Function also supports a dataset refresh trigger by accepting an optional action parameter — when action is 'refresh', it calls the Power BI Dataset Refresh API instead of generating an embed token.

1// supabase/functions/powerbi-embed/index.ts
2const corsHeaders = {
3  'Access-Control-Allow-Origin': '*',
4  'Access-Control-Allow-Headers': 'authorization, x-client-info, apikey, content-type',
5};
6
7async function getAzureToken(): Promise<string> {
8  const tenantId = Deno.env.get('AZURE_TENANT_ID')!;
9  const clientId = Deno.env.get('AZURE_CLIENT_ID')!;
10  const clientSecret = Deno.env.get('AZURE_CLIENT_SECRET')!;
11
12  const tokenRes = await fetch(
13    `https://login.microsoftonline.com/${tenantId}/oauth2/v2.0/token`,
14    {
15      method: 'POST',
16      headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
17      body: new URLSearchParams({
18        grant_type: 'client_credentials',
19        client_id: clientId,
20        client_secret: clientSecret,
21        scope: 'https://analysis.windows.net/powerbi/api/.default',
22      }),
23    }
24  );
25
26  const tokenData = await tokenRes.json();
27  if (!tokenData.access_token) throw new Error(`Azure token error: ${JSON.stringify(tokenData)}`);
28  return tokenData.access_token;
29}
30
31Deno.serve(async (req) => {
32  if (req.method === 'OPTIONS') return new Response('ok', { headers: corsHeaders });
33
34  try {
35    const body = await req.json().catch(() => ({}));
36    const workspaceId = Deno.env.get('POWERBI_WORKSPACE_ID')!;
37    const reportId = body.reportId || Deno.env.get('POWERBI_REPORT_ID')!;
38
39    const accessToken = await getAzureToken();
40    const authHeader = `Bearer ${accessToken}`;
41
42    // Get report details (embed URL)
43    const reportRes = await fetch(
44      `https://api.powerbi.com/v1.0/myorg/groups/${workspaceId}/reports/${reportId}`,
45      { headers: { Authorization: authHeader } }
46    );
47    if (!reportRes.ok) throw new Error(`Get report failed: ${reportRes.status}`);
48    const report = await reportRes.json();
49
50    // Generate embed token
51    const embedBody: Record<string, unknown> = {
52      accessLevel: 'View',
53      reports: [{ id: reportId }],
54    };
55
56    // Optional RLS for row-level security
57    if (body.username && body.roles) {
58      const datasetId = report.datasetId;
59      embedBody.identities = [{
60        username: body.username,
61        roles: Array.isArray(body.roles) ? body.roles : [body.roles],
62        datasets: [datasetId],
63      }];
64    }
65
66    const tokenRes = await fetch(
67      `https://api.powerbi.com/v1.0/myorg/groups/${workspaceId}/reports/${reportId}/GenerateToken`,
68      {
69        method: 'POST',
70        headers: { Authorization: authHeader, 'Content-Type': 'application/json' },
71        body: JSON.stringify(embedBody),
72      }
73    );
74
75    if (!tokenRes.ok) {
76      const errorText = await tokenRes.text();
77      throw new Error(`GenerateToken failed: ${tokenRes.status} - ${errorText}`);
78    }
79
80    const tokenData = await tokenRes.json();
81
82    return new Response(JSON.stringify({
83      embedToken: tokenData.token,
84      embedUrl: report.embedUrl,
85      reportId,
86      tokenExpiry: tokenData.expiration,
87    }), {
88      headers: { ...corsHeaders, 'Content-Type': 'application/json' },
89    });
90  } catch (error) {
91    console.error('Power BI embed error:', error);
92    return new Response(JSON.stringify({ error: String(error) }), {
93      status: 500,
94      headers: { ...corsHeaders, 'Content-Type': 'application/json' },
95    });
96  }
97});

With the Edge Function generating embed tokens, add the Power BI JavaScript SDK to your Lovable React app and create a component that renders the report. The Power BI JavaScript SDK is a Microsoft-maintained library that handles report rendering, interaction events, and token management in the browser. For a Vite + React project, the cleanest approach is to add the powerbi-client and powerbi-client-react packages from npm, which provide a React-friendly wrapper around the SDK. Alternatively, load the powerbi-client script from a CDN and use the window.powerbi object directly. The PowerBIEmbed component from powerbi-client-react accepts the embed type ('report'), an embed config object containing the access token, embed URL, report ID, and settings, and callbacks for loaded, rendered, and error events. It renders an iframe that hosts the Power BI report. For responsive design, the report iframe should fill the available container width. Power BI reports are designed to scale, but the dashboard layout around them controls the visual context. Ask Lovable to wrap the PowerBIEmbed component in a container with appropriate height and responsive styling. Embed token refresh is handled by listening to the tokenExpired event from the Power BI SDK and calling the Edge Function to get a new token, then using the component's setAccessToken() method. Lovable's AI can generate this token refresh logic when you describe it in the chat.

1// src/components/PowerBIReport.tsx
2import { useState, useEffect, useRef } from 'react';
3import { PowerBIEmbed } from 'powerbi-client-react';
4import { models, Report } from 'powerbi-client';
5import { supabase } from '@/integrations/supabase/client';
6
7interface PowerBIReportProps {
8  reportId?: string;
9  height?: number;
10}
11
12interface EmbedConfig {
13  embedToken: string;
14  embedUrl: string;
15  reportId: string;
16  tokenExpiry: string;
17}
18
19export function PowerBIReport({ reportId, height = 600 }: PowerBIReportProps) {
20  const [embedConfig, setEmbedConfig] = useState<EmbedConfig | null>(null);
21  const [loading, setLoading] = useState(true);
22  const [error, setError] = useState<string | null>(null);
23  const reportRef = useRef<Report | null>(null);
24
25  const fetchEmbedConfig = async () => {
26    setLoading(true);
27    setError(null);
28    try {
29      const { data, error: fnError } = await supabase.functions.invoke('powerbi-embed', {
30        body: reportId ? { reportId } : {},
31      });
32      if (fnError) throw fnError;
33      setEmbedConfig(data);
34    } catch (err) {
35      setError(err instanceof Error ? err.message : 'Failed to load report');
36    } finally {
37      setLoading(false);
38    }
39  };
40
41  useEffect(() => { fetchEmbedConfig(); }, [reportId]);
42
43  if (loading) return <div className="animate-pulse bg-gray-100 rounded" style={{ height }} />;
44  if (error) return (
45    <div className="flex flex-col items-center justify-center gap-2 bg-gray-50 rounded border" style={{ height }}>
46      <p className="text-sm text-gray-500">{error}</p>
47      <button onClick={fetchEmbedConfig} className="text-sm text-blue-600 hover:underline">Retry</button>
48    </div>
49  );
50  if (!embedConfig) return null;
51
52  return (
53    <PowerBIEmbed
54      embedConfig={{
55        type: 'report',
56        id: embedConfig.reportId,
57        embedUrl: embedConfig.embedUrl,
58        accessToken: embedConfig.embedToken,
59        tokenType: models.TokenType.Embed,
60        settings: {
61          panes: { filters: { visible: false } },
62          background: models.BackgroundType.Transparent,
63        },
64      }}
65      eventHandlers={new Map([
66        ['tokenExpired', () => { fetchEmbedConfig(); }],
67        ['error', (event) => { console.error('Power BI error:', event?.detail); }],
68      ])}
69      getEmbeddedComponent={(component) => { reportRef.current = component as Report; }}
70      cssClassName="powerbi-report"
71      style={{ width: '100%', height }}
72    />
73  );
74}

For the complete Power BI integration, add the ability to trigger a Power BI dataset refresh from Lovable when your underlying data changes. When Supabase data is updated (a new sale recorded, a customer profile changed, inventory updated), the Power BI dataset can be refreshed so the embedded reports show current data. Create a second Edge Function (or add an optional action parameter to the existing powerbi-embed function) that calls the Power BI Dataset Refresh API. This API triggers an asynchronous refresh of the specified dataset — Power BI will pull fresh data from its configured data sources. The refresh typically completes in 5-15 minutes depending on dataset size. To add the refresh trigger, add a button in the Lovable UI that calls the Edge Function. Alternatively, trigger it automatically from a Supabase database trigger or webhook when certain data changes. Before deploying to production, test the full embed flow on your published Lovable app URL. Power BI iframes must be served from HTTPS — Lovable's published apps use HTTPS by default, so this should not be an issue. If you use a custom domain, verify it has a valid SSL certificate. For complex Power BI embedding scenarios including multi-report dashboards, per-tenant RLS, dynamic report filtering through URL parameters, or Power BI Paginated Reports embedding, RapidDev's team has experience with all Power BI embedding patterns and can help configure both the Azure side and the Lovable integration.

1// Addition to powerbi-embed Edge Function for dataset refresh
2// Add this block after the existing GenerateToken logic:
3
4// Dataset refresh trigger (add to the beginning of Deno.serve)
5if (body.action === 'refresh') {
6  const accessToken = await getAzureToken();
7  const reportId = body.reportId || Deno.env.get('POWERBI_REPORT_ID')!;
8  const workspaceId = Deno.env.get('POWERBI_WORKSPACE_ID')!;
9
10  // Get dataset ID from report
11  const reportRes = await fetch(
12    `https://api.powerbi.com/v1.0/myorg/groups/${workspaceId}/reports/${reportId}`,
13    { headers: { Authorization: `Bearer ${accessToken}` } }
14  );
15  const report = await reportRes.json();
16
17  // Trigger dataset refresh
18  const refreshRes = await fetch(
19    `https://api.powerbi.com/v1.0/myorg/groups/${workspaceId}/datasets/${report.datasetId}/refreshes`,
20    {
21      method: 'POST',
22      headers: { Authorization: `Bearer ${accessToken}`, 'Content-Type': 'application/json' },
23      body: JSON.stringify({ notifyOption: 'NoNotification' }),
24    }
25  );
26
27  return new Response(JSON.stringify({ success: refreshRes.ok, status: refreshRes.status }), {
28    status: refreshRes.ok ? 202 : refreshRes.status,
29    headers: { ...corsHeaders, 'Content-Type': 'application/json' },
30  });
31}