Display a Power BI report within a React JS app

Lately I have given the chance to play around and embed a Power BI report in to a React JS application. Below details are guidance only, actual implementation can be different.

User roles and licenses
Report viewing user (Ex: executive staff member or sale representative) should have necessary Power BI licenses and Report.Read.All role in the Azure Active directory.

Implementation
Implementation is consist of back end and front end. In my case front end is using Azure Active Directory Single Sign On to authenticate the enterprise application, then use that token to fetch data from backend ASP.NET core API.

• Front End – React JS App
  Install powerbi-client-react and powerbi-client NPM packages.
• Define the Power BI endpoint and Scopes

export const POWERRBI = {
endpoint: 'https://api.powerbi.com/v1.0/myorg/reports',
scopes: ['https://analysis.windows.net/powerbi/api/Report.Read.All']
}

• install @azure/msal-browser NPM for Azure Active Directory Single Sign On

call the token endpin to get the token

super.acquireTokenSilent(POWERRBI ).catch((error) => {
if (error instanceof msal.InteractionRequiredAuthError) {
       if (this.loginType === LoginType.LoginRedirect) {
          return super.acquireTokenRedirect(newRequest);
        }
        return super.acquireTokenPopup(POWERRBI);
      }
      throw error;
});

• Above call will send down the JWT token that includes Report.Read.All in the scp
• When you pass this token to backend (asp.netcore C#), use this token to call Power BI API to get the embedURL

public async Task<GetReportResponse> GetReportAsync(string token, string reportId) 
{
_client = new HttpClient();
_client.DefaultRequestHeaders.Authorization = new AuthenticationHeaderValue("Bearer", token);
var request = new HttpRequestMessage(HttpMethod.Get, $"https://api.powerbi.com/v1.0/myorg/reports/{reportId}"); 
var response = await _client.SendAsync(request);
response.EnsureSuccessStatusCode();
var stringRespone = await response.Content.ReadAsStringAsync();

return JsonConvert.DeserializeObject<GetReportResponse>(stringRespone);
}

• Use this embed URL to mount the report component from powerbi-client-react
  

        <PowerBIEmbed

          embedConfig={{
            type: 'report',
            id: '0a662e11-xxx-xxx-xxx-18253192xxx',
            embedUrl:myReportEmbedUrl,// embed URL you got from power BI API via your backend 
            accessToken:accessToken,// accessToken you got as part of the Azure Active Directory Single Sign On 
            tokenType: models.TokenType.Aad,
            settings: {
              panes: {
                filters: {
                  visible: false,
                },
              },
              background: models.BackgroundType.Default,
            },
          }}
          cssClassName={styles.reportContainer}
        />