Token refresh issue.

[harbingerofcode]

I've been reading past issues on Token refresh, and am still unable to silently refresh a token.

I've managed to force refresh as described in #61, but this is far from ideal, as the user may be faced with this mid-flow.

29 describes the creation of a new config object being required in order to refresh the token. I beleive I am doing this, but am not getting a successful token refresh.

  <powerbi-report 
    [cssClassName]="reportClass" 
    [embedConfig]="reportConfig" 
    [phasedEmbedding]="phasedEmbeddingFlag" 
    [eventHandlers]="eventHandlersMap">
  </powerbi-report>

This is code that performs the update. It's works perfectly on first load.

this.myApiService.getEmbedDetails(request).subscribe({
  next: (data) => {
    this.reportConfig = {
      type: "report",
      id: data.reportId,
      embedUrl: data.url,
      accessToken: data.token,
      tokenType: models.TokenType.Embed,
      settings: {
        filterPaneEnabled: false,
        navContentPaneEnabled: false,
        layoutType: models.LayoutType.Custom,
      }
    }
  },
  error: (error) => {
    // This function will run if the observable emits an error
    console.error(error);
  },
  complete: () => {
    // This function will run when the observable completes
    console.log('Observable completed');
  }
});

Subsequent calls fail to refresh it. To test, I've set the Embed Token expiry and click the report every 10 seonds, having hooked the refresh up to the 'visualclicked' event.

  eventHandlersMap = new Map<string, (event?: service.ICustomEvent<any>) => void>([
.....
    ['visualClicked', () => this.onVisualClicked()],
.....
  ]);

I'm seeing the code executed every 10 seonds, however after a short period of time the token times out and the report errors with a TokenExpired.

Its not clear to me what else I'm missing

[harbingerofcode]

I've been looking at the docs a little more: https://learn.microsoft.com/en-us/javascript/api/overview/powerbi/refresh-token

I'm using 'Embed for you customer'. The docs state that Auto refresh only works for 'Embed for your organisation'. Could this be the reason?

Using the manual route works, however.

[v-MadhavC]

We implemented the code snippet provided by you along with some modifications from our side. Refer to the code snippet provided below:

public async refreshToken(): Promise<void> {
    try {
      const newTokenResponse: ConfigResponse = await lastValueFrom(this.httpService.getEmbedConfig('YOUR_API_ENDPOINT_URL'));

      console.log('New token:', newTokenResponse.EmbedToken.Token);
      await report.setAccessToken(newTokenResponse.EmbedToken.Token);
      await report.reload();
    } catch (error: any) {
      console.error('Failed to refresh token:', error);
    }
  }

Here, we have defined a refreshToken() function which will update the access token using the setAccessToken() API. Please also notice that you need to reload the report once again after updating the access token.

private handleVisualClick: (event?: service.ICustomEvent<any>, embeddedEntity?: Embed) => void = (event?: service.ICustomEvent<any>, embeddedEntity?: Embed) => {
    this.refreshToken();
  };
['visualClicked', () => this.handleVisualClick()],

Here, we have defined event handler which will refresh the access token after a visual is clicked on and the report reloads with the new access token.

[v-MadhavC]

We are waiting for your response. If no response is received within the next couple of weeks, the issue will be closed

[ayeshurun]

The issue is closed since no response was received.