Error with code.ui required error: failed to get access token cache silently, please login first: you need login first before get access token. IOS Device

[DayanK]

Describe the bug
I receive an error message when I try to connect with the Graph API to get the user profile.

The error message I receive is:
"Error with code.ui required error: failed to get access token cache silently, please login first: you need login first before getting access token on iOS mobile devices."

The Teams application works perfectly on Android.

Here is the code I use for authentication. Could you please tell me how to fix this bug?

export async function GetGraphEntity(options : string[], api : string, query : string, filter : string) {

const { scope } = { scope : ["User.Read"], ...options } ;

const credential : TeamsFx = new TeamsFx(IdentityType.User, {
initiateLoginEndpoint : process.env.REACT_APP_START_LOGIN_PAGE_URL !,
clientId : process.env.REACT_APP_CLIENT_ID !
}) ;

try {
credential.setSsoToken((await credential.getCredential().getToken(["User.Read Calendars.ReadWrite Contacts.Read MailboxSettings.ReadWrite"])) !.token ) ;
} catch (err : unknown) {
if (err instanceof ErrorWithCode && err.code ?.includes(ErrorCode.UiRequiredError)) {
await credential.login([
"User.Read Calendars.ReadWrite Contacts.Read MailboxSettings.ReadWrite",
]) ;
await credential.getCredential() ;
}
}
const graph = createMicrosoftGraphClient(credential, [
"User.Read Calendars.ReadWrite Contacts.Read MailboxSettings.ReadWrite",
]) ;

const profile = await graph.api("/me").get() ;
console.log("profile", profile)
}

"dependencies": {
"@azure/msal-browser": "^2.22.1",
"@azure/msal-react": "^1.3.1",
"@fluentui/react": "^8.63.1",
"@fluentui/react-northstar": "^0.66.3",
"@microsoft/microsoft-graph-client": "^3.0.5",
"@microsoft/teams-js": "^2.13.0",
"@microsoft/teamsfx": "^2.2.1",
"@microsoft/teamsfx-react": "^3.0.0",
"@types/microsoft-graph": "latest",
"msteams-react-base-component": "^3.1.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-router-dom": "5.1.2",
"react-scripts": "^5.0.1",
}

Script for auth-start.html and auth-end.html

<script src="https://res.cdn.office.net/teams-js/2.0.0/js/MicrosoftTeams.min.js" integrity="sha384-QtTBFeFlfRDZBfwHJHYQp7MdLJ2C3sfAEB1Qpy+YblvjavBye+q87TELpTnvlXw4" crossorigin="anonymous"></script>

<script type="text/javascript" src="https://alcdn.msauth.net/browser/2.21.0/js/msal-browser.min.js"
    integrity="sha384-s/NxjjAgw1QgpDhOlVjTceLl4axrp5nqpUbCPOEQy1PqbFit9On6uw2XmEF1eq0s" crossorigin="anonymous">
</script>

<script src="https://res.cdn.office.net/teams-js/2.0.0/js/MicrosoftTeams.min.js" integrity="sha384-QtTBFeFlfRDZBfwHJHYQp7MdLJ2C3sfAEB1Qpy+YblvjavBye+q87TELpTnvlXw4" crossorigin="anonymous"></script> <script type="text/javascript" src="https://alcdn.msauth.net/browser/2.21.0/js/msal-browser.min.js" integrity="sha384-s/NxjjAgw1QgpDhOlVjTceLl4axrp5nqpUbCPOEQy1PqbFit9On6uw2XmEF1eq0s" crossorigin="anonymous"> </script> <script type="text/javascript"> microsoftTeams.app.initialize().then(() => { // Get the tab context, and use the information to navigate to Azure AD login page microsoftTeams.app.getContext().then(async (context) => { // Generate random state string and store it, so we can verify it in the callback var currentURL = new URL(window.location); var clientId = currentURL.searchParams.get("clientId"); var scope = currentURL.searchParams.get("scope"); var loginHint = currentURL.searchParams.get("loginHint");

            const msalConfig = {
                auth: {
                    clientId: clientId,
                    authority: `https://login.microsoftonline.com/${context.user.tenant.id}`,
                    navigateToLoginRequestUrl: false
                },
                cache: {
                    cacheLocation: "sessionStorage",
                },
            };

            const msalInstance = new msal.PublicClientApplication(msalConfig);
            const scopesArray = scope.split(" ");
            const scopesRequest = {
                scopes: scopesArray,
                redirectUri: window.location.origin + `/auth-end.html?clientId=${clientId}`,
                loginHint: loginHint
            };
            await msalInstance.loginRedirect(scopesRequest);
        });
    });
</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 17.4.1

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.

[microsoft-github-policy-service]

Thank you for contacting us! Any issue or feedback from you is quite important to us. We will do our best to fully respond to your issue as soon as possible. Sometimes additional investigations may be needed, we will usually get back to you within 2 days by adding comments to this issue. Please stay tuned.

[KennethBWSong]

@DayanK Thank you for using Teams Toolkit. This is known issue that Auth Code Flow is not fully supported on IOS. We will keep tracking this issue and update here if any updates. Would you please try to use OBO flow for now? You can refer to this sample.

[microsoft-github-policy-service]

This issue has been automatically marked as stale because it has been marked as requiring author feedback but has not had any activity for 7 days. It will be closed if no further activity occurs within 3 days of this comment. If it is closed, feel free to comment when you are able to provide the additional information and we will re-investigate.

[microsoft-github-policy-service]

Due to lack of details for further investigation, we will archive the issue for now. In case you still have following-up questions on this issue, please always feel free to reopen the issue by clicking ‘reopen issue’ button below the comment box. We will get back to you as soon as possible.