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;
     }}
  />

Answer 1

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

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

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

Answer 2

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