How to Embed Power BI Report in React App

Embedding a Power BI report directly into your React application is a fantastic way to present data-rich insights without forcing users to leave your app. It keeps your data story clean, contextual, and interactive. This guide will walk you through the entire process, from setting up authentication in Azure to rendering the report in a React component.

Graphed

Your AI Data Analyst to Create Live Dashboards

Connect your data sources and let AI build beautiful, real-time dashboards for you in seconds.

Build Your First Dashboard

Why Embed Power BI in Your React App?

Before jumping into the setup, it's worth understanding the benefits. Instead of just linking out to a Power BI report, embedding it creates a seamless experience. Your users can interact with slicers, filters, and visuals right inside your application's UI. This keeps engagement high and reinforces your app as the single source for information. It also allows you to control the data experience, providing consistent, real-time insights that C-level executives and operational teams can rely on directly within their everyday workflow.

Prerequisites: What You’ll Need Before You Start

To follow along, make sure you have the following ready. Getting these sorted out first will make the rest of the process much smoother.

• A Power BI Pro or Premium Account: Embedding requires a Power BI Pro or Premium per-user license.
• A Published Power BI Report: You need an existing report published to a workspace in the Power BI service that you want to embed.
• A React Application: A basic React app environment. If you're starting from scratch, you can quickly set one up with npx create-react-app my-powerbi-app.
• Node.js and npm (or yarn): These are required to manage your React app's packages.
• An Azure Active Directory (AAD) Application: This is essential for handling authentication securely. We'll set this up in the first step.

Step 1: Setting Up Your Azure Active Directory (AAD) Application

Power BI uses Azure Active Directory (AAD) for authentication, which allows your React app to securely request permission to display a report. Setting up an "App Registration" in Azure is the first and most critical step.

1. Navigate to the Azure Portal: Sign in to portal.azure.com with your account.
2. Register a new application: Use the search bar to find and select Azure Active Directory. From the left-hand menu, click on App registrations and then + New registration.
3. Configure the Registration:
4. Note Your Application Credentials: Once registered, you'll be taken to the app's overview page. Copy the Application (client) ID and the Directory (tenant) ID. You'll need these later, so save them somewhere safe.
5. Configure API Permissions:

With your Azure AD application configured, you've handled the most complex part of the authentication setup. Now your React app has a secure identity to interact with the Power BI service.

Step 2: Preparing Your Power BI Report for Embedding

Next, you’ll need to grab a couple of key identifiers from the specific Power BI report you wish to embed.

1. Navigate to the Power BI Service at app.powerbi.com.
2. Open the report you want to embed. After it loads, look at the URL in your browser's address bar.
3. The URL will be structured something like this: https://app.powerbi.com/groups/MGI1NjlkNTctM.../reports/NTc4NmM0YTQtZ.../ReportSection

From here, you can pull the two IDs you need:

• Group ID (or Workspace ID): This is the long string of characters after /groups/ in the URL.
• Report ID: This is the long string of characters immediately after /reports/.

Copy both of these IDs and save them with the credentials you gathered from Azure AD. Make sure the user account you'll be using to log in has access to the workspace where this report is published.

AI for Data Analysis

Crash Course

Graphed

Free PDF Guide

AI for Data Analysis Crash Course

Learn how to get AI to do data analysis for you — the best tools, prompts, and workflows to go from raw data to insights without writing a single line of code.

Download Free Guide

Step 3: Integrating Power BI into Your React Application

With all the credentials and IDs ready, it's time to write some code. We’ll be using Microsoft’s official libraries to make this process much cleaner.

Installing the Necessary Packages

First, open your terminal in your React project's directory and install two key packages:

• @azure/msal-browser and @azure/msal-react: These handle authentication with Azure AD.
• powerbi-client-react: This library provides a convenient React component for embedding reports.

Run the following command:

npm install @azure/msal-browser @azure/msal-react powerbi-client-react

Handling Authentication with MSAL

First, let's configure MSAL (Microsoft Authentication Library) to manage user login. The most common pattern for internal apps is called "user-owns-data," where embedding works on behalf of the logged-in user. With MSAL, the user logs into their Microsoft account, generating an AAD Access Token. This token is what grants your component permission to fetch and display the report.

In your main application file (typically index.js or App.js), you need to wrap your application with MsalProvider. This gives your entire app access to the authentication context.

Here's how you configure it in your index.js:

import React from 'react', import ReactDOM from 'react-dom/client', import App from './App',

import { PublicClientApplication } from "@azure/msal-browser", import { MsalProvider } from "@azure/msal-react",

// MSAL configuration object const msalConfig = { auth: { clientId: 'YOUR_AAD_CLIENT_ID', // Paste your Application (client) ID here authority: 'https://login.microsoftonline.com/YOUR_AAD_TENANT_ID', // Paste your Directory (tenant) ID here redirectUri: 'http://localhost:3000' } },

const msalInstance = new PublicClientApplication(msalConfig),

const root = ReactDOM.createRoot(document.getElementById('root')), root.render( <React.StrictMode> <MsalProvider instance={msalInstance}> <App /> </MsalProvider> </React.StrictMode> ),

Remember to replace the placeholder Client and Tenant IDs with the ones you saved from the Azure portal.

Graphed

Your AI Data Analyst to Create Live Dashboards

Connect your data sources and let AI build beautiful, real-time dashboards for you in seconds.

Build Your First Dashboard

Step 4: Creating the React Component to Render the Report

Let's create the component that actually renders the embedded Power BI report. We'll set it up so it only attempts to render when a user is successfully logged in. In your App.js file, you can use the useIsAuthenticated hook and the AuthenticatedTemplate and UnauthenticatedTemplate components from @azure/msal-react to manage the UI state.

Here's a full App.js example:

import React, { useState, useEffect } from 'react', import { useMsal, useIsAuthenticated } from "@azure/msal-react", import { PowerBIEmbed } from 'powerbi-client-react', import { models } from 'powerbi-client',

function App() { const { instance, accounts } = useMsal(), const isAuthenticated = useIsAuthenticated(), const [accessToken, setAccessToken] = useState(''),

// Request an access token when an account is authenticated useEffect(() => { if (isAuthenticated && accounts.length > 0) { const request = { scopes: ["https://analysis.windows.net/powerbi/api/.default"], account: accounts[0], },

  instance.acquireTokenSilent(request).then(response => {
    setAccessToken(response.accessToken),
  }).catch(e => {
    instance.acquireTokenRedirect(request).catch(error => {
      console.error(error),
    }),
  }),
}

}, [instance, accounts, isAuthenticated]),

const handleLogin = () => { instance.loginRedirect().catch(e => { console.error(e), }), },

const powerBIReportConfig = { type: 'report', embedUrl: 'https://app.powerbi.com/reportEmbed?reportId=YOUR_REPORT_ID', // Add your Report ID tokenType: models.TokenType.Aad, accessToken, settings: { panes: { filters: { expanded: false, visible: true } }, } },

return ( <div className="App" style={{ height: '100vh', width: '100vw' }}> {isAuthenticated ? ( accessToken ? ( <PowerBIEmbed embedConfig = { powerBIReportConfig } eventHandlers = { new Map([ ['loaded', function () {console.log('Report loaded'),}], ['rendered', function () {console.log('Report rendered'),}] ]) } cssClassName={"powerbi-embed"} getEmbeddedComponent={ (embeddedReport) => { window.report = embeddedReport, } } /> ) : (<p>Acquiring token...</p>) ) : ( <div> <h1>Please log in</h1> <button onClick={handleLogin}>Log In</button> </div> )} </div> ), }

export default App,

In this example, the user is prompted to log in. Once authenticated, MSAL acquires an AAD Access Token for the Power BI API. That accessToken is then passed into the embedConfig object for the PowerBIEmbed component, which handles the rest. Don't forget to replace YOUR_REPORT_ID with the actual ID from your report's URL.

AI for Data Analysis

Crash Course

Graphed

Free PDF Guide

AI for Data Analysis Crash Course

Learn how to get AI to do data analysis for you — the best tools, prompts, and workflows to go from raw data to insights without writing a single line of code.

Download Free Guide

Best Practices and Common Pitfalls

• Secure Your Credentials: Never hardcode sensitive information like your Client ID or Tenant ID directly in your code. Use environment variables (.env files) to keep them secure and manageable.
• Handle Loading States: A Power BI report can take a few seconds to load. Always display a loading indicator to provide a better user experience while the token is acquired and the report is rendered.
• Token Expiration: The AAD access tokens are short-lived. The acquireTokenSilent method used in the example handles token renewal behind the scenes, preventing service interruptions for your users.
• Check Your Permissions: A common error source is misconfigured permissions. Double-check that your AAD app has the right Power BI API permissions and that the admin consent was granted. Also, ensure the logged-in user actually has permission to view the report in the Power BI service.

Final Thoughts

Embedding Power BI reports in a React app seamlessly merges powerful, interactive analytics with your core application. By setting up an Azure AD app for security, grabbing your report details, and using the powerbi-client-react library, you can provide a rich, in-context data experience for your users without the headaches of building out custom charting solutions from scratch.

While this process gives you complete control, setting up authentication, managing access tokens, and configuring client libraries can feel like a lot. We built Graphed to solve exactly this kind of friction. Instead of wrestling with Azure Active Directory portals and embedding SDKs, we allow you to connect your data sources once and use simple, natural language to create and embed beautiful dashboards. This turns hours of development time into a 30-second conversation, getting valuable data in front of your users and team that much faster.