I have been trying this from months and still I did not find any solution on how to authenticate user with PowerBI service along with the Microsoft Authentication using MSAL.

Tried with https://analysis.windows.net/powerbi/api/ this url as well in powerBI endpoint

export const protectedResources = {
    powerBI: {
        endpoint: "https://graph.microsoft.com/.default",
        scopes: ["Report.Read.All"],
    },
    graphMe: {
        endpoint: "https://graph.microsoft.com/v1.0/me",
        scopes: ["User.Read"],
    },
    armTenants: {
        endpoint: "https://management.azure.com/tenants",
        scopes: ["https://management.azure.com/user_impersonation"],
    }
}

Above the scopes code in config and below is the code got from Microsoft documentation which is working perfectly fine for Authenticating user with graph api and able to get user details.

export function MSALInstanceFactory(): IPublicClientApplication {
  return new PublicClientApplication(msalConfig);
}


export function MSALInterceptorConfigFactory(): MsalInterceptorConfiguration {
  const protectedResourceMap = new Map<string, Array<string>>();

  protectedResourceMap.set(protectedResources.graphMe.endpoint, protectedResources.graphMe.scopes);
  protectedResourceMap.set(protectedResources.armTenants.endpoint, protectedResources.armTenants.scopes);
  protectedResourceMap.set(protectedResources.powerBI.endpoint, protectedResources.powerBI.scopes);

  return {
    interactionType: InteractionType.Redirect,
    protectedResourceMap
  };
}
export function MSALGuardConfigFactory(): MsalGuardConfiguration {
  return {
    interactionType: InteractionType.Redirect,
    authRequest: loginRequest
  };
}

But the Problem is after user gets authenticated still user has to click on additional sign in button inside the iframe in order to again get authenticated with PowerBI.

See the image.

Please provide me a way to authenticate user in one shot just by single login I should be able to login user in both my app and powerBI service.