[BUG] too many requests to retrieve tokens with specific scopes

[skyleguy]

Describe the bug When trying to use the mgt-person component in Angular 12 application I am seeing too many network calls to retrieve tokens happening in my network tab.

To Reproduce Steps to reproduce the behavior:

Start a new Angular application with the following Providers.globalProvider

    Providers.globalProvider = new Msal2Provider({
      clientId: 'YOUR_CLIENT_ID',
      scopes:['.default'],
      redirectUri: '/',
      authority: 'YOUR_AUTHORITY',
    });

and sign in the following way after setting the globalProvider like above:

this.msalProvider = Providers.globalProvider;
this.msalProvider.onStateChanged((): void => this.handleStateChange());

  private handleStateChange(): void {
    switch (this.msalProvider.state) {
      case ProviderState.SignedIn:
        console.log('signed in!');
        break;
      default:
        this.msalProvider?.login?.();
        break;
    }
  }

once the page loads you should automatically be prompted to sign in. Add this mgt-person to the app.component html file

<mgt-person class="mgt-dark" person-card="hover" show-presence="true" user-id="ANY_USER_ID">
  <template data-type="loading">
    loading!
  </template>
  <template data-type="no-data">
    no-data
  </template>
</mgt-person>

After the page loads i see one call to the token endpoint, which makes sense. The value of the token I see in my local storage for the target (scopes) field is:

profile openid email 00000003-0000-0000-c000-000000000000/Channel.ReadBasic.All 00000003-0000-0000-c000-000000000000/ChannelMessage.Read.All 00000003-0000-0000-c000-000000000000/ChannelMessage.Send 00000003-0000-0000-c000-000000000000/ChannelSettings.Read.All 00000003-0000-0000-c000-000000000000/ChannelSettings.ReadWrite.All 00000003-0000-0000-c000-000000000000/Chat.Create 00000003-0000-0000-c000-000000000000/Chat.Read 00000003-0000-0000-c000-000000000000/Chat.ReadWrite 00000003-0000-0000-c000-000000000000/ChatMessage.Send 00000003-0000-0000-c000-000000000000/Directory.AccessAsUser.All 00000003-0000-0000-c000-000000000000/Directory.Read.All 00000003-0000-0000-c000-000000000000/Group.Read.All 00000003-0000-0000-c000-000000000000/People.Read 00000003-0000-0000-c000-000000000000/People.Read.All 00000003-0000-0000-c000-000000000000/Presence.Read 00000003-0000-0000-c000-000000000000/Presence.Read.All 00000003-0000-0000-c000-000000000000/Team.ReadBasic.All 00000003-0000-0000-c000-000000000000/TeamSettings.Read.All 00000003-0000-0000-c000-000000000000/User.Read 00000003-0000-0000-c000-000000000000/User.Read.All 00000003-0000-0000-c000-000000000000/User.ReadBasic.All 00000003-0000-0000-c000-000000000000/.default

which i think makes sense since i used .default it returns all of the scopes for the permissions I have.

HOWEVER, after hovering the mgt-person to get the popup to open I see a new token in the localStorage with this value as its target:

Channel.ReadBasic.All ChannelMessage.Read.All ChannelMessage.Send ChannelSettings.Read.All ChannelSettings.ReadWrite.All Chat.Create Chat.Read Chat.ReadWrite ChatMessage.Send Directory.AccessAsUser.All Directory.Read.All Group.Read.All People.Read People.Read.All Presence.Read Presence.Read.All Team.ReadBasic.All TeamSettings.Read.All User.Read User.Read.All User.ReadBasic.All profile openid email

Which just seems like a condensed version of the scopes the other token had.

I then see three more token calls in the network tab with the following values for scopes (since the first call was successful why did the third call need to happen if they have the same list of scopes?):

1. .default openid profile offline_access
2. user.read.all People.Read.All Mail.ReadBasic Sites.Read.All openid profile offline_access
3. .default openid profile offline_access

And whenever I refresh the page the same network calls happen again

Expected behavior What I would expect to happen is the

• [x] app opens, and I either sign in and get a token, or it gets a new token based on my previous sign on
• [x] mgt-person loads the avatar and shows presence without having to get another token
• [x] hovering person shows the person card and makes calls to retrieve information, getting any tokens it doesnt have
• [ ] refreshing the page and hovering the person should not need to get any more tokens since they should have been cached before

Environment (please complete the following information):

• OS: [e.g. iOS] macOs Big Sur 11.4
• Browser [e.g. edge, chrome, safari] Chrome
• Framework [e.g. react, vue, none] Angular
• Context [e.g. Microsoft Teams, SharePoint, Office Add-ins, Web] Web App
• Version [e.g. 0.1] @microsoft/mgt, @microsoft/mgt-components, @microsoft/mgt-element all 2.2.0
• Provider [e.g. Msal2Provider] (bonus if you share the provider config) Msal2Provider (config listed above)

Additional Questions:

1. In anticipation of needing tokens with scopes ['.default', 'openid', 'profile', 'offline_access'] and ['user.read.all', 'People.Read.All', 'Mail.ReadBasic', 'Sites.Read.All', 'openid', 'profile', 'offline_access'] is there a way to get my app to get those tokens and cache it on start up and only retrieve a new one if when trying to use the mgt-person component the token about to be used has expired? (and it would automatically get a new one and use that instead)
2. If i have one token with every scope ill ever need in my app, is there a way to get the mgt person component to use that token instead of requesting a token with only the few scopes it needs and using that?

[ghost]

Hello skyleguy, thank you for opening an issue with us!

I have automatically added a "needs triage" label to help get things started. Our team will analyze and investigate the issue, and escalate it to the relevant team if possible. Other community members may also look into the issue and provide feedback 🙌

[beth-panx]

Hi @skyleguy - mind sharing a sample project via stackblitz/etc. so that we can take a look?

[skyleguy]

id love to but the place im seeing this issue at is within my companies private repo. Is there an easy way to set up a personal microsoft account and place myself in it to be useable in the person component?

[beth-panx]

You can use the <mgt-mock-provider> to utilize some mock data we have. Or you can join the Microsoft 365 developer program to get a sandbox tenant with sample data packs.

[beth-panx]

@skyleguy Do you need additional information or assistance on this one?

[ghost]

This issue has been automatically marked as stale because it has been marked as requiring author feedback but has not had any activity for 4 days. It will be closed if no further activity occurs within 3 days of this comment.

[skyleguy]

looking into it with the mock data

[ghost]

This issue has been automatically marked as stale because it has been marked as requiring author feedback but has not had any activity for 4 days. It will be closed if no further activity occurs within 3 days of this comment.