Display report using powerbi-client and react (typescript)

[Ameb]

Hello. 

I have been working on a .NET Core application with React.

Server side works fine (tokens generated work on the powerbi javascript demo)

Tokens from PowerBI Javascript Demo  doesnt work on the client side (react component). Neither the tokens generated from my server.

GET https://wabi-north-europe-redirect.analysis.windows.net/metadata/cluster 403 (Forbidden)

I have recreated a small application. Here is the component:

import * as React from 'react';
import * as pbi from 'powerbi-client';

export default class App extends React.Component<{}, {}> {
    private powerbi: pbi.service.Service;
    private embedContainer: HTMLDivElement;
    constructor(props: {}) {
        super(props);
        this.powerbi = new pbi.service.Service(pbi.factories.hpmFactory, pbi.factories.wpmpFactory, pbi.factories.routerFactory);
    }
    public render() {
        return (
                <div className="embedContainer" powerbi-type="report" style={{'height' : '600px', 'width' : '100%'}} ref={(div) => { if (div) {this.embedContainer = div; }}}/>
        );
    }
    componentDidMount() {
        // console.log(this.props);
        let config = {
            'accessToken': '',
            'embedUrl':  '',
            'id': ''
        };
        console.log(config);
        this.powerbi.embed(this.embedContainer, config);
    }
}

Would love to share a repo with the code, but i think is not allowed (my posts are being deleted without reason/ private message)

[Ameb · Accepted solution]

The property tokenType was missing from the config.

[amoldhaygude]

Hello Ameb,

Do you mind sharing working source code or project files? 

[Ameb]

I am no longer working on this so can't clean the code properly or give you a detailed or simplified working code, but i uploaded what i had. Hope it helps.

https://github.com/Ameb/PBIEmbedded-NetCore-React-Demo

Most of my issues with this were the matching between the config used with the embedding API and the way the tokens were generated (since you can actually use an AD bearer token for embedding).