[BUG] Login control fails when refreshing the token after more than an hour of inactivity

[mpaliath]

Describe the bug When the access token has expired, if the user comes back to the app, the Login component from @microsoft/mgt-react shows an error text TypeError: Cannot read properties of null (reading 'personImage') instead of the actual control.

To Reproduce Steps to reproduce the behavior:

1. Use the login control to sign in using a personal Microsoft account.
2. Note the login control now shows the signed in user.
3. Do nothing in the app and wait for > 1 hour
4. Refresh the page.
5. See error.

Expected behavior The login control should show the signed in user

Screenshots If applicable, add screenshots to help explain your problem.

Environment (please complete the following information):

• OS: [e.g. iOS] Windows
• Browser [e.g. edge, chrome, safari] Edge
• Framework [e.g. react, vue, none] React
• Context [e.g. Microsoft Teams, SharePoint, Office Add-ins, Web] Web
• Version [e.g. 0.1] 4.2.2

• Provider [e.g. Msal2Provider] (bonus if you share the provider config) Msal2Provider

  Providers.globalProvider = new Msal2Provider({ clientId: '5cf21436-2a20-447b-b222-77a1326409bb', scopes: [ 'profile', 'openid', 'User.Read' ],
  });

Additional context There was no problem with the v3 version I had been using. Problem started after the upgrade.

[mpaliath]

The issue seems to be with the code here

The issue happens when additionalScopes is an empty set and a new AuthenticationHandlerOptions is returned. Somewhere down the line this causes unexpected scopes to be used to make the query to graph api which returns a 4XX causing the problem here.

If I set isIncrementalConsentDisabled to true, the problem goes away. This workaround is good enough for me.

Providers.globalProvider = new Msal2Provider({ clientId: '5cf21436-2a20-447b-b222-77a1326409bb', scopes: [ 'profile', 'openid', 'User.Read' ], prompt: PromptType.LOGIN,
isIncrementalConsentDisabled: true, });