Embed Power BI Reports in SPFx with SSO

In the previous post, we learned how to fetch Power BI workspaces and reports using the Power BI REST API and SharePoint Framework’s AadHttpClient. Now, we’ll take the next step: embedding the report inside your SPFx web part with Single Sign-On (SSO) and full control, overview, and interaction.

For this, we’ll use the official powerbi-client SDK and encapsulate the logic in a reusable service called PowerBiEmbeddingService.ts.

Prerequisites

Before embedding a report, ensure:

• You’ve already retrieved the report details using PowerBiService.GetReport()
• The user has access to the report in Power BI
• Your app has permission to call Power BI APIs (Report.Read.All)
• Your SPFx solution is set up with AAD permissions and @microsoft/sp-http

PowerBiEmbeddingService.ts – What It Does

This service handles all the complexity of rendering a Power BI report securely in your SPFx component. It contains two methods:

1. reset(container: HTMLElement)

Resets the Power BI container to clear any previously embedded report.

public static reset(embedContainer: HTMLElement) {

  window.powerbi.reset(embedContainer);

}

2. embedReport(report: PowerBiReport, embedContainer: HTMLElement)

Embeds the specified Power BI report using a configuration object built from the report metadata and access token.

public static embedReport(report: PowerBiReport, embedContainer: HTMLElement) {

  const config = {

    type: 'report',

    id: report.id,

    embedUrl: report.embedUrl,

    accessToken: report.accessToken,

    tokenType: models.TokenType.Aad,

    permissions: models.Permissions.All,

    viewMode: models.ViewMode.View,

    settings: {

      filterPaneEnabled: false,

      navContentPaneEnabled: true,

    }

  };

  window.powerbi.reset(embedContainer);
  window.powerbi.embed(embedContainer, config);

}

• TokenType.Aad enables true SSO using the current Microsoft 365 session
• Hides the filter pane for a cleaner experience
• Enables navigation pane for report pages

Using It in Your Web Part

Here's how you can use this service inside your SPFx component:

Step 1. Add a container to your JSX

<div id="powerBiEmbedContainer" style={{ height: '600px' }} />

Step 2. Embed the report when loaded

import { PowerBiService } from '../services/PowerBiService';

import { PowerBiEmbeddingService } from '../services/PowerBiEmbeddingService';

useEffect(() => {

  PowerBiService.GetReport(context, workspaceId, reportId)

    .then((report) => {

      const container = document.getElementById("powerBiEmbedContainer");

      if (container && report) {

        PowerBiEmbeddingService.embedReport(report, container);

      }
    });

}, []);

Output

The report will render securely inside your SharePoint web part using the logged-in user's credentials—no additional sign-in or embed tokens are needed. The result is a clean, interactive, and secured Power BI report experience, fully embedded within SharePoint Online.

Benefits of Using PowerBiEmbeddingService.ts

• Secure: Uses AAD tokens with no need for service principal or embed tokens
• Reusable: Can be called from multiple components
• Clean UI: Customizes navigation and filters
• Scalable: Easily adaptable for dynamic embedding

Conclusion

With just a few lines of code and the help of PowerBiEmbeddingService.ts, you can embed rich, interactive Power BI reports directly in your SPFx web part using Microsoft 365 Single Sign-On. This improves user experience while keeping security and maintainability top-notch.