cancel
Showing results for 
Search instead for 
Did you mean: 
Reply
roen83
New Member

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

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:

function App() { 
const { instance, accounts } = useMsal(); 
const [accessToken, setAccessToken] = useState(null); 
function RequestProfileData() { 
  const request = { ...loginRequest, account: accounts[0], }; 
  // Silently acquires an access token 
  instance 
    .acquireTokenSilent(request) 
    .then((response) => { setAccessToken(response.accessToken); }) 
    .catch((e) => { 
      instance.acquireTokenPopup(request).then((response) => { 
        setAccessToken(response.accessToken); 
      }); 
    }); 
  } 
  useEffect(()=>{ 
    RequestProfileData() 
  },[]) 
  return ( 
    <PageLayout> 
      <AuthenticatedTemplate> 
        <PowerbiReport accessToken={accessToken}/> 
      </AuthenticatedTemplate> 
    </PageLayout> 
  ); }

 

-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?

1 ACCEPTED SOLUTION

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 ...

Regards,

Xiaoxin Sheng

Community Support Team _ Xiaoxin
If this post helps, please consider accept as solution to help other members find it more quickly.

View solution in original post

2 REPLIES 2
roen83
New Member

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

roen83_0-1664270547650.png

 

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 ...

Regards,

Xiaoxin Sheng

Community Support Team _ Xiaoxin
If this post helps, please consider accept as solution to help other members find it more quickly.

Helpful resources

Announcements
November 2022 Update

Check it Out!

Click here to read more about the November 2022 updates!

Difinity Conference

Difinity Conference 2022

Difinity is the largest Microsoft Data, AI, Power BI, Power Platform and Business Applications Conference in New Zealand.

European Share Point Conference

European Share Point Conference

This conference returns live and in-person in Copenhagen this 28 November-01 December with 4 Microsoft Keynotes, 9 Tutorials, and 120 Sessions.

Microsoft 365 Conference â__ December 6-8, 2022

Microsoft 365 Conference - 06-08 December

Join us in Las Vegas to experience community, incredible learning opportunities, and connections that will help grow skills, know-how, and more.