Powerbi Embed - user owns data - react application - with msal access token not working

roen83 — Tue, 27 Sep 2022 09:10:05 GMT

Hello,

I have setup a react app with msal authentication, and would like to embed a PowerBI report in it using the same msal token.

As specified in the title, it is a "user owns data" scenario, my users will have PowerBI Pro access, and I have a tenant for my organization.

I have set up :

- index.js with the MsalProvider

- App.js:

-PowerbiReport.js:

export default function PowerBIReport(props) { let reportId = "<my report id>"; let embedUrl = "https://app.powerbi.com/reportEmbed?reportId=<my report id>&groupId=<the workspace id>&w=2&config=<config code from app.powerbi>" return ( <> <AuthenticatedTemplate> <PowerBIEmbed embedConfig={{ type: "report", id: reportId, embedUrl, accessToken: props.accessToken, tokenType: models.TokenType.Aad, settings: { panes: { filters: { expanded: false, visible: false, }, }, }, }} eventHandlers={ new Map([ [ "loaded", function () { console.log("Report loaded"); }, ], [ "rendered", function () { console.log("Report rendered"); }, ], [ "error", function (event) { console.log(event.detail); }, ], ]) } cssClassName={"report-style-class"} getEmbeddedComponent={(embeddedReport) => { window.report = embeddedReport; }} /> </AuthenticatedTemplate> </> ); }

- the authConfig.js used by the msal library and App.js for "loginRequest":

export const msalConfig = { auth: { clientId: "<the app client id>", authority: "https://login.microsoftonline.com/<my tenant id>", redirectUri: "http://localhost:3000/", }, cache: { cacheLocation: "localStorage", // This configures where your cache will be stored storeAuthStateInCookie: false, // Set this to "true" if you are having issues on IE11 or Edge } }; // Add scopes here for ID token to be used at Microsoft identity platform endpoints. export const loginRequest = { scopes: ["User.Read","https://analysis.windows.net/powerbi/api/Report.Read.All","https://analysis.windows.net/powerbi/api/Dataset.Read.All"] };

As you can see I use powerbi-client and powerbi-client-react, and it actually works when I manually copy a right accessToken that I got from the powerBi service (as done in this video: https://youtu.be/A5KFY5Jh1Uc?t=464), but not when I use the props.accessToken from my App.js.

Anyone ready to help, please?

Re: Powerbi Embed - user owns data - react application - with msal access token not working

roen83 — Tue, 27 Sep 2022 09:22:54 GMT

And when I console.log the response from instance.acquireTokenSilent(), I only see these scopes:

Re: Powerbi Embed - user owns data - react application - with msal access token not working

Anonymous — Wed, 28 Sep 2022 01:40:41 GMT

HI @roen83,

If the issue only appears when you use MSAL method to get tokens, it means current this mode may not be compatible with get token functions.

>>And when I console.log the response from instance.acquireTokenSilent(), I only see these scopes:

Please check the permission and scope settings first to confirm you have enough permission to process the operation steps:

Understand the permission tokens needed for embedding a Power BI application - Power BI | Microsoft Learn

Regards,

Xiaoxin Sheng

topic Re: Powerbi Embed - user owns data - react application - with msal access token not working in Developer

Powerbi Embed - user owns data - react application - with msal access token not working

Re: Powerbi Embed - user owns data - react application - with msal access token not working

Re: Powerbi Embed - user owns data - react application - with msal access token not working