Embed report using react-powerbi-client ends with 403

[vai1sf]

Hello, 

I'm new to PowerBi and I'm the React developer who consumes the PowerBI report, developed by other team. My goal is to embed a report into our portal and filter it.

I'm granted view permissions (I can see and filter the report in PowerBi) and I have Power BI Pro License.
I've followed this steps https://learn.microsoft.com/en-us/power-bi/collaborate-share/service-embed-secure#how-to-embed-power...  and successfully embeded the report into iFrame in our portal. 

There's a downside that the customer should always login into PowerBi in order to see the portal. That's why I would like to try embeding the portal with react-powerbi-client. I'm doing exactly the same as it's written in the demo, also tried the way it's implemented in the Microsoft Power BI Embedded Analytics Playground (Preview) demo through the report.

The problem which I hit is that I receive 403 Forbidden from 'https://api.powerbi.com/metadata/cluster' call.
A few things makes me suspicious in the headers of the call I made:
1) I have 

Authorization: EmbedToken Bearer <my_access_token> 

 while in the playground the "EmbedToken" string is missing

2) I have

X-Powerbi-Hostenv: Embed for Customers

 while in the playground the value is "Embed for Organization" and that's what I want.

This is my configration for the PowerBIEmbed component:

{
type: 'report',
embedUrl: baseUrl,
tokenType: models.TokenType.Embed,
accessToken: undefined, //after successfull aquire the token is set
permissions: models.Permissions.All,
}

P.S. In the Azure portal we granted permissions to the PowerBi services, following this steps: https://learn.microsoft.com/en-us/power-bi/developer/embedded/change-permissions?tabs=Azure 

Any guides what am I missing or links to documentation how to solve 403 Forbidden through PowerBiEmbed react component would be helpful! 

Best regards,

Iva

[Hari000]

I am also facing the same issue, I am using App Owns Data concept,

I am following this blog post to generte the embed token
https://medium.com/globant/how-to-embed-a-power-bi-report-in-react-f27e975e0a

I am able to generate the token but the report is not showing in my front-end, and this is my reactjs code 

import { PowerBIEmbed } from 'powerbi-client-react';

import { models } from 'powerbi-client';

function Dashboard() {

    return (

        <div>

            <PowerBIEmbed

                embedConfig={{

                    type: 'report',

                    id: 'xxxxxxxxxxxx',

                    embedUrl: "my embed url",

                    accessToken: "my access token",

                    tokenType: models.TokenType.Aad,

                    settings: {

                        panes: {

                            filters: {

                                expanded: false,

                                visible: false

                            },

                        },

                        customContextMenu: false,

                    }

                }}

                eventHandlers={

                    new Map([

                        ['loaded', function () { console.log('Report loaded'); }],

                        ['rendered', function () { console.log('Report rendered'); }],

                        ['error', function (event) { console.log(event.detail); }]

                    ])

                }

                cssClassName={"Embed-container"}

                getEmbeddedComponent={(embeddedReport) => {

                    window.report = embeddedReport;

                }}

            />

        </div>

    );

}

export default Dashboard;

[vai1sf · Accepted solution]

UPDATE: Incorrect embedtoken type is used, should be 

models.TokenType.Aad

[Anonymous]

HI @vai1sf,

Perhaps you can take a look the official document about embed with react app if help with your scenario:

How to embed a Power BI item in a React app | Microsoft Learn

Regards,

Xiaoxin Sheng

[vai1sf]

 Hi @Anonymous ,

Thanks for your suggestion! This is exactly what I'm doing.
Can you please guide me what are the prerequisite configurations/permissions of the PowerBi report itself in order to be embeded within the application?

Best regards,

Iva