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
Carousel_PBI_Wave1

2023 Release Wave 1 Plans

Power BI release plans for 2023 release wave 1 describes all new features releasing from April 2023 through September 2023.

Power BI Summit Carousel 2

Global Power BI Training

Make sure you register today for the Power BI Summit 2023. Don't miss all of the great sessions and speakers!

Thank you 2022 Review

2022 Monthly Feature Releases

We had a great 2022 with a ton of feature releases to help you drive a data culture.