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:

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);

}

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

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.