cancel
Showing results for 
Search instead for 
Did you mean: 

Fabric is Generally Available. Browse Fabric Presentations. Work towards your Fabric certification with the Cloud Skills Challenge.

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
PBI November 2023 Update Carousel

Power BI Monthly Update - November 2023

Check out the November 2023 Power BI update to learn about new features.

Community News

Fabric Community News unified experience

Read the latest Fabric Community announcements, including updates on Power BI, Synapse, Data Factory and Data Activator.

Power BI Fabric Summit Carousel

The largest Power BI and Fabric virtual conference

130+ sessions, 130+ speakers, Product managers, MVPs, and experts. All about Power BI and Fabric. Attend online or watch the recordings.

Top Solution Authors