Question

How do I prevent my app from redirecting to Power BI when embedding a protected report in a React application?

I'm embedding a protected Power BI report into a React application but experiencing an issue where users are redirected to Power BI instead of staying within the app. How can I prevent this redirection and ensure seamless embedding? What authentication methods and configurations are required to keep users within the application while viewing the report?

Answer 1

To ensure that your React app will not redirect to Power BI while embedding a protected report, follow these steps:

1. Power BI Embed for Customers and Organizations

For Organizations: Azure AD authentication requires access tokens.

For customers: Use Service Principal authentication in a special workspace.

2. Create an Embed Token

Obtain an Azure AD token using MSAL.js or a backend service, and then call the Power BI REST API to get an embed token.

POST https://api.powerbi.com/v1.0/myorg/reports/{reportId}/GenerateToken

3. Embed Report Correctly in React

Use the Power BI JavaScript SDK (powerbi-client-react):

import { PowerBIEmbed } from 'powerbi-client-react';
import { models } from 'powerbi-client';

<PowerBIEmbed
  embedConfig={{
    type: "report",
    id: "your-report-id",
    embedUrl: "your-embed-url",
    accessToken: "your-access-token",
    tokenType: models.TokenType.Embed,
  }}
  eventHandlers={{
    loaded: () => console.log("Report Loaded"),
    error: (event) => console.error("Embed Error:", event),
  }}
/>

4. Enable Same-Site Authentication

• Ensure CORS policies allow embedding.
• Configure your authentication to handle silent token refresh using MSAL.js.