MS Teams Desktop tabs auth-start.html popup flashes on tab open

[jurisjansons]

Describe the bug
Moving between MS Teams triggers auth-start.html popop to open every time, even when switching from tab to tab.
I was sent here from teams-js issue: OfficeDev/microsoft-teams-library-js#1994.

More details, videos and teams-js teams discoveries etc. can be found there.

Issue can be observer on Windows, both MS Teams Desktop and Web versions

To Reproduce
Steps to reproduce the behavior:

1. Install app in personal scope https://teams.microsoft.com/l/app/12f1d10a-936d-41d0-8e87-9d0758bfdde0?source=app-details-dialog
2. Switch between tabs in app
3. Notice popup flashing

Expected behavior
Switching tabs or reopening tab later doesn't trigger popup and gets token from cache instead

Screenshots
Video with issue: https://github.com/OfficeDev/microsoft-teams-library-js/assets/10829036/9f4996a5-fba5-4d1f-b962-795a9a8cce45

[KennethBWSong]

Hi @jurisjansons Thank you for using Teams Toolkit. From the log I guess publicClientApplication is not correctly initialized in TeamsFx SDK when upgrading msal-browser from 2.x to 3.x. I will check for more detail and reach out to you when we have any update.

[jurisjansons]

Mr. Bot, what kind of author feedback where you expecting

[KennethBWSong]

@jurisjansons Sorry for late reply. We have fixed this issue. Would you please have a try with the latest beta version?

[jurisjansons]

Still getting same errors and popup on every tab change.

[Thu, 22 Aug 2024 12:37:06 GMT] : @microsoft/teamsfx : Info - Create teams user credential useTeamsUserCredential.js:22 
[Thu, 22 Aug 2024 12:37:06 GMT] : @microsoft/teamsfx : Verbose - Validate authentication configuration useTeamsUserCredential.js:22 
[Thu, 22 Aug 2024 12:37:06 GMT] : @microsoft/teamsfx : Info - Get access token with scopes: User.Read User.ReadBasic.All useTeamsUserCredential.js:22 
[Thu, 22 Aug 2024 12:37:06 GMT] : @microsoft/teamsfx : Verbose - Get SSO token from memory cache useTeamsUserCredential.js:22 
[Thu, 22 Aug 2024 12:37:06 GMT] : @microsoft/teamsfx : Verbose - Failed to call acquireTokenSilent. Reason: uninitialized_public_client_application: You must call and await the initialize function before attempting to call any other MSAL API.  For more visit: aka.ms/msaljs/browser-errors. useTeamsUserCredential.js:22 
[Thu, 22 Aug 2024 12:37:06 GMT] : @microsoft/teamsfx : Verbose - Failed to call ssoSilent. Reason: uninitialized_public_client_application: You must call and await the initialize function before attempting to call any other MSAL API.  For more visit: aka.ms/msaljs/browser-errors. useTeamsUserCredential.js:22 
[Thu, 22 Aug 2024 12:37:06 GMT] : @microsoft/teamsfx : Error - Failed to get access token cache silently, please login first: you need login first before get access token. App.tsx:67 
ErrorWithCode.UiRequiredError: Failed to get access token cache silently, please login first: you need login first before get access token.
    at TeamsUserCredential.getToken (teamsUserCredential.browser.ts:272:1)
    at async App.tsx:64:1
App.tsx:68 
[Thu, 22 Aug 2024 12:37:06 GMT] : @microsoft/teamsfx : Info - Popup login page to get user's access token with scopes: User.Read User.ReadBasic.All useTeamsUserCredential.js:22 
[Thu, 22 Aug 2024 12:37:06 GMT] : @microsoft/teamsfx : Error - Consent failed for the scope User.Read User.ReadBasic.All with error: Get empty response. App.tsx:69 
ErrorWithCode.ConsentFailed: Consent failed for the scope User.Read User.ReadBasic.All with error: Get empty response.
    at TeamsUserCredential.login (https://app-intervy-tabs-dev.azurewebsites.net/static/js/bundle.js:83661:13)
    at async https://app-intervy-tabs-dev.azurewebsites.net/static/js/bundle.js:103:7

What library version teams-js (2.21.0) and msal-browser (2.35.0) I should be using in auth-start.html? Or they doesnt affect anything?

[KennethBWSong]

@jurisjansons I don't think this error comes from the auth-start.html. Would you please check whether you are using @microsoft/teamsfx-react package and update the version to latest beta version if using this package?

[jurisjansons]

Went away for a bit, now I'm back and still having same issue. Updated teams-fx to latest beta version as of today: 2.3.3-beta.2024091206.0

Error log:

[Mon, 30 Sep 2024 07:45:56 GMT] : @microsoft/teamsfx : Info - Create teams user credential
useTeamsUserCredential.js:22 [Mon, 30 Sep 2024 07:45:56 GMT] : @microsoft/teamsfx : Verbose - Validate authentication configuration
useTeamsUserCredential.js:22 [Mon, 30 Sep 2024 07:45:56 GMT] : @microsoft/teamsfx : Info - Get access token with scopes: User.Read User.ReadBasic.All
useTeamsUserCredential.js:22 [Mon, 30 Sep 2024 07:45:56 GMT] : @microsoft/teamsfx : Verbose - Get SSO token from memory cache
useTeamsUserCredential.js:22 [Mon, 30 Sep 2024 07:45:56 GMT] : @microsoft/teamsfx : Verbose - Failed to call acquireTokenSilent. Reason: no_account_error: No account object provided to acquireTokenSilent and no active account has been set. Please call setActiveAccount or provide an account on the request.. 
useTeamsUserCredential.js:22 [Mon, 30 Sep 2024 07:46:06 GMT] : @microsoft/teamsfx : Verbose - Failed to call ssoSilent. Reason: monitor_window_timeout: Token acquisition in iframe failed due to timeout.  For more visit: aka.ms/msaljs/browser-errors. 
useTeamsUserCredential.js:22 [Mon, 30 Sep 2024 07:46:06 GMT] : @microsoft/teamsfx : Error - Failed to get access token cache silently, please login first: you need login first before get access token.
App.tsx:67 ErrorWithCode.UiRequiredError: Failed to get access token cache silently, please login first: you need login first before get access token.
    at TeamsUserCredential.getToken (teamsUserCredential.browser.ts:272:1)
    at async App.tsx:64:1
App.tsx:68 [Mon, 30 Sep 2024 07:46:06 GMT] : @microsoft/teamsfx : Info - Popup login page to get user's access token with scopes: User.Read User.ReadBasic.All
useTeamsUserCredential.js:22 [Mon, 30 Sep 2024 07:46:07 GMT] : @microsoft/teamsfx : Error - Consent failed for the scope User.Read User.ReadBasic.All with error: Get empty response.

[jurisjansons]

Noticed that while waiting for await teamsUserCredential.getToken(scopes), some requests in the background are successfully fetched, where I'm using @microsoft/teams-js and calling await authentication.getAuthToken() to get token.

For now changed my code like this:

    try {
      // await teamsUserCredential.getToken(scopes);
      await authentication.getAuthToken();
      Providers.globalProvider.setState(ProviderState.SignedIn);
    } catch (error) {
      console.log(error);
      await teamsUserCredential.login(scopes).catch((error) => {
        console.error(error);
      });
      Providers.globalProvider.setState(ProviderState.SignedIn);
    }

to avoid popup.

Is this correct approach? Lack of examples is confusing or maybe you could point me to up to date example where authentication is implemented in MS Teams tab with react?

[KennethBWSong]

@jurisjansons I do believe your code above is correct. You can refer to our sample here. In this sample, we implement OBO flow for authentication.

[jurisjansons]

@KennethBWSong sample uses teamsUserCredential.getToken(scopes) which creates huge delay (~5s), fails to get token from cache and calls teamsUserCredential.login(scopes) from catch (error) and again creates delay (~5s) on every tab open.

Probably will leave this open, currently managed to fix this, but can't get it working with teamsUserCredential.getToken(scopes)

[KennethBWSong]

@jurisjansons Thanks for your info. Actually, in teamsUserCredential.getToken(scopes), teamsfx sdk will leverage msal.acquireTokenSilent(), msal.ssoSilent() to get token from cache/silent SSO. We will investigate this issue to see if we can improve the experience.

[jurisjansons]

There is another underlying issue related to this that I and other people have: microsoftgraph/microsoft-graph-toolkit#3160.

[KennethBWSong]

@jurisjansons Thanks for your info. We will investigate and let you know as soon as we have any updates.