Error on iOS: Failed to get access token cache silently, please login first: you need login first before get access token

[leonardjohn]

Describe the bug
Dear TeamFx Team,
I got an error when I tried to use Graph API to get people list.

It works fine on Android/M365/Desktop Client, but not on iOS.

The login popup doesn't display, the error message I got was:

Error: Failed to get access token cache silently, please login first: you need login first before get access token.

I found another issue here: #10379, but unfortunately it cannot solve the issue on iOS.

Here are the code sinppets I used for authentication, can you please kindly help suggest how should I fix this issue on iOS?

Tab.lib.ts:

import { TeamsUserCredential } from "@microsoft/teamsfx";
import type { TeamsUserCredentialAuthConfig } from "@microsoft/teamsfx";
import { Client } from "@microsoft/microsoft-graph-client";
import { TokenCredentialAuthenticationProvider } from "@microsoft/microsoft-graph-client/authProviders/azureTokenCredentials";

export const SCOPES = [".default"];

let graph: Client;
const authConfig: TeamsUserCredentialAuthConfig = {
    clientId: process.env.REACT_APP_CLIENT_ID || "",
    initiateLoginEndpoint: process.env.REACT_APP_START_LOGIN_PAGE_URL || ""
};

const teamsUserCredential = new TeamsUserCredential(authConfig);
const authProvider = new TokenCredentialAuthenticationProvider(teamsUserCredential, {
    scopes: SCOPES
});

export function callGraph(url: string) {
    if (!graph) {
        graph = Client.initWithMiddleware({ authProvider: authProvider });
    }
    return graph.api(url);
}

export function getPeople(currentUser: any) {
    const people = new Promise((resolve) => {
        callGraph("/me/people/?$filter=personType/class ne 'Group' & $top=20")
            .get()
            .then((res) => {
                console.log(JSON.stringify(res));
            })
            .catch((error) => {
                console.error(error);
                alert("GetPeople:" + error);
            });
    });
}

Dependencies in package.json:

"dependencies": {
        "@fluentui/react-components": "9.49.0",
        "@fluentui/react-icons": "2.0.232",
        "@microsoft/mgt-element": "3.1.3",
        "@microsoft/mgt-react": "3.1.3",
        "@microsoft/mgt-teamsfx-provider": "3.1.3",
        "@microsoft/microsoft-graph-client": "3.0.7",
        "@microsoft/teams-js": "2.23.0",
        "@microsoft/teamsfx": "2.3.0",
        "@microsoft/teamsfx-react": "3.1.0",
        "react": "18.2.0",
        "react-dom": "18.2.0",
        "react-i18next": "14.1.0",
        "react-router-dom": "6.22.3"
 }

Here is the version info for "@microsoft/teams-js", "@microsoft/teamsfx", "@microsoft/teamsfx-react" and "@azure/msal-browser" we installed in our Tab App:

Referenced 3rd lib for auth-start.html and auth-end.html are as below, keep the other scripts in these two html files as they are:

    <script
    src="https://res.cdn.office.net/teams-js/2.23.0/js/MicrosoftTeams.min.js"
    integrity="sha384-08XJvrutoSVYTA8PQeUgetTKn8B7JE73C5BdAfWnHZ5WnSFFQO6g1FGmSqxsrAzb"
    crossorigin="anonymous"
  ></script>
    <script
      type="text/javascript"
      src="https://alcdn.msauth.net/browser/2.35.0/js/msal-browser.min.js"      
      integrity="sha384-PARf28kmic36Ve+O3DnUerRXFtOQ7ZDqRDGpLcbljly5/N39T2OV3kt3QsWOKeAX"
      crossorigin="anonymous">
    </script>

To Reproduce
Steps to reproduce the behavior:

1. Go to '...'
2. Click on '....'
3. Scroll down to '....'
4. See error

Expected behavior
A clear and concise description of what you expected to happen.

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

VS Code Extension Information (please complete the following information):

• OS: iOS
• Version 16.7.7

CLI Information (please complete the following information):

• OS: [e.g. iOS8.1]
• Version [e.g. 22]

Additional context
Add any other context about the problem here.

[KennethBWSong]

Hi @leonardjohn Thank you for using Teams Toolkit. As mentioned in this issue, it is known issue that Auth Code Flow is not fully supported on IOS. Would you please try to use OBO flow for now? You can refer to this sample.

[leonardjohn]

Hi @KennethBWSong , many thanks for your response.
will try that solution you mentioned.