Teams tab app error - CP.UiRequiredError: Failed to get access token cache silently, please login first: you need login first before get access token.

[umalhotra86]

Describe the bug Teams tab application is failing to load. This error is observed in console - Uncaught (in promise) CP.UiRequiredError: Failed to get access token cache silently, please login first: you need login first before get access token.

To Reproduce Steps to reproduce the behavior:

1. Deploy the teams react application to azure. Manifest is attached.
2. Launch application in desktop/web.
3. UI fails to load due to the error described above.

Expected behavior Access token will be retireved and API calls to web API's hosted on azure will succeed.

Screenshots

OS

• OS: Windows 10

Node version/ Script references

• Node version: 18.20.3
• msal-browser script reference in auth-start & auth-end.html: https://alcdn.msauth.net/browser/2.21.0/js/msal-browser.min.js manifest.qa.json manifest.stage.json package.json

[KennethBWSong]

Hi @umalhotra86 Thank you for using Teams Toolkit. UiRequiredError is expected when user have not consented permission for the app. When getting this error, you need to popup login page for user to consent using the following lines:

await teamsUserCredential!.login(["YOUR_PERMISSION"]);

[umalhotra86]

@KennethBWSong Already taking care of this in the logic. Before requesting for token, we ensure that login call has succeded. Shared below the function that ensures this.

public validateToken = async (scopes: any) => { try { await teamsUserCredential?.getToken(scopes); } catch (error) { await teamsUserCredential?.login(scopes); } };