Skip to main content
cancel
Showing results for 
Search instead for 
Did you mean: 

The ultimate Microsoft Fabric, Power BI, Azure AI & SQL learning event! Join us in Las Vegas from March 26-28, 2024. Use code MSCUST for a $100 discount. Register Now

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
Fabric Community Conference

Microsoft Fabric Community Conference

Join us at our first-ever Microsoft Fabric Community Conference, March 26-28, 2024 in Las Vegas with 100+ sessions by community experts and Microsoft engineering.

February 2024 Update Carousel

Power BI Monthly Update - February 2024

Check out the February 2024 Power BI update to learn about new features.

Fabric Career Hub

Microsoft Fabric Career Hub

Explore career paths and learn resources in Fabric.

Fabric Partner Community

Microsoft Fabric Partner Community

Engage with the Fabric engineering team, hear of product updates, business opportunities, and resources in the Fabric Partner Community.