multiple service instances or something else?

[fryant]

Hello, I am quite new to this thing and I am wondering about specific situation that came to me when I checked the console.log. I am running your angular 16 v3 sample app and based on this example I want to build my own app.
In the beginning I acquire token silently and I want to ask for new one when I my token is about the expire. It works nicely and I am able to get the refresh token however I am curious about log in my console.

It prints event handler info:
@azure/msal-browser@3.14.0 : Info - Perf: Visibility change detected
whenever I am doing something in my browser. That's fine, but this information is shown as many times as was the number of acquireTokenSilent calls before.

Looks like this:

It seems to me like every call of the method would create a new instance of the msal service. May be this is perfectly fine and it is expected behavior. May be I am doing some kind of elementary mistake (as I said I am newbie), but I am curious about it, because my understanding was that I am just replacing the token information on one instance of the service. I checked the internet but I could not find reliable answer. Any idea? Thanks!

My acquire silent token method is something similar like this:

acquireSilentToken = async () => {
if (this.authService.instance.getAllAccounts().length > 0) {
const silentRequest = {
scopes: environment.apiConfig.scopes,
account: this.authService.instance.getAllAccounts()[0]
}
const silentAccessToken = await this.authService.instance.acquireTokenSilent(silentRequest);
this.tokenCommonService.tokenSubject.next(silentAccessToken.accessToken);
return silentAccessToken.accessToken;
}
return undefined;
}