Can we refresh the access token in Power bi which is sent by Azure using React app.?

Question

I'm using powerbi-client-react npm package for my project. When I sign in in the report the azure sends an access token passing token and embed URL, I'm accessing the power bi report via React. The issue is azure token gets expired in 1hour. Can I refresh the access token sent by Azure for power bi report in react. Can we refresh the access token directly from react app?

    <PowerBIEmbed
      embedConfig = {{
        type: 'report',
        id: '<report Id>',
        accessToken: '<access token>',
        tokenType: models.TokenType.Aad,
        permissions: models.Permissions.All,
        viewMode: models.ViewMode.Edit,
        // eventHooks: {
        //   accessTokenProvider : getNewAccessToken
        // },
        settings: {
          // filterPaneEnabled: false,
          panes: {
            filters: {
              expanded: false,
              visible: true
            },
            bookmarks: {
              visible: false
            },
            fields: {
              expanded: false
            },
            pageNavigation: {
              visible: true
            },
            selection: {
              visible: false
            },
            syncSlicers: {
              visible: false
            },
            visualizations: {
              expanded: false
            }
          },
          // background: models.BackgroundType.Transparent,
        }
          }}

      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 = {getEmbeddedComponent()}

  getEmbeddedComponent = { (embeddedReport) => {
        window.report = embeddedReport;
     }}
  />

In the permission, you need to pass offline_access to get the refresh token along with access token. — ShwetaM, Nov 28 '22 at 07:01

score 0 · Accepted Answer · answered Nov 26 '22 at 08:06

I tried to reproduce the same in my environment (Postman) and got the results successfully like below:

I generated tokens for PowerBi by using the below parameters:

GET https://login.microsoftonline.com/TenantID/oauth2/v2.0/token

client_id:ClientID
client_secret:*****
grant_type:authorization_code
scope:https://analysis.windows.net/powerbi/api/.default offline_access
redirect_uri:redirect_uri
code:code

enter image description here

To refresh the access token, I used the below parameters:

GET https://login.microsoftonline.com/TenantID/oauth2/v2.0/token

client_id:ClientID
client_secret:****
grant_type:refresh_token
refresh_token: refresh_token

enter image description here

To refresh the access token in your React App, try the below sample code:

let config = {
        type: 'report',
        tokenType: models.TokenType.Aad,
        accessToken: “***** …”,
        embedUrl: “https: …”,
        eventHooks: {
            accessTokenProvider: getNewAccessToken
        }
    };
let embedContainer = $('#embedContainer')[0];
report = powerbi.embed(embedContainer, config);

To know more in detail, refer the below MsDoc:

Refresh the access token in Power BI embedded analytics

Liyang · Answer 2 · 2023-07-31T13:21:46.640

0

the important thing is offline_access, it will give refresh_token

scope:https://analysis.windows.net/powerbi/api/.default offline_access

refer to here https://learn.microsoft.com/EN-US/azure/active-directory/develop/scopes-oidc

edited Jul 31 '23 at 13:21

answered Jul 31 '23 at 10:32

Liyang

45
6

Can we refresh the access token in Power bi which is sent by Azure using React app.?

2 Answers2