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

Register now to learn Fabric in free live sessions led by the best Microsoft experts. From Apr 16 to May 9, in English and Spanish.

Helper I
Helper I

Display report using powerbi-client and react (typescript)


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 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: {}) {
        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': ''
        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)


Helper I
Helper I

The property tokenType was missing from the config.

View solution in original post

Helper I
Helper I

The property tokenType was missing from the config.

Hello Ameb,


Do you mind sharing working source code or project files? 

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.


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). 


Helpful resources

Microsoft Fabric Learn Together

Microsoft Fabric Learn Together

Covering the world! 9:00-10:30 AM Sydney, 4:00-5:30 PM CET (Paris/Berlin), 7:00-8:30 PM Mexico City


Power BI Monthly Update - April 2024

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

April Fabric Community Update

Fabric Community Update - April 2024

Find out what's new and trending in the Fabric Community.