Unable to get the Graph API working using TeamsFx

[Mingz6]

Describe the bug
Due to @microsoft/mgt-teams-msal2-provider package has been deprecated, I changed the package to @microsoft/mgt-teamsfx-provider. The new package cannot exchange the graph token.

To Reproduce
Steps to reproduce the behavior:

1. Clone the project from https://github.com/Mingz6/TeamsFxSso.git
2. Debug the project in Edge.

Expected behavior
I would like to see my profile display in teams tab app with the new teamFX provider.

Screenshots

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

• OS: iOS
• Version 14.5

Additional context
This issues was reported in #10379, but I do not find anything to solve the login problem.

Error Log detail
try get profile
Graph.tsx:37 [Thu, 30 May 2024 05:12:03 GMT] : @microsoft/teamsfx : Verbose - Get SSO token from memory cache
useTeamsUserCredential.js:22 [Thu, 30 May 2024 05:12:03 GMT] : @microsoft/teamsfx : Info - Get access token with scopes: User.Read
useTeamsUserCredential.js:22 [Thu, 30 May 2024 05:12:03 GMT] : @microsoft/teamsfx : Verbose - Get SSO token from memory cache
useTeamsUserCredential.js:22 [Thu, 30 May 2024 05:12:03 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, 30 May 2024 05:12:03 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, 30 May 2024 05:12:03 GMT] : @microsoft/teamsfx : Error - Failed to get access token cache silently, please login first: you need login first before get access token.
useTeamsUserCredential.js:22 [Thu, 30 May 2024 05:12:03 GMT] : @microsoft/teamsfx : Info - Get SSO token
Welcome.tsx:43 [Thu, 30 May 2024 05:12:03 GMT] : @microsoft/teamsfx : Info - Get basic user info from SSO token
Welcome.tsx:43 [Thu, 30 May 2024 05:12:03 GMT] : @microsoft/teamsfx : Verbose - Get SSO token from memory cache
useTeamsUserCredential.js:22 [Thu, 30 May 2024 05:12:03 GMT] : @microsoft/teamsfx : Info - Get SSO token
POST https://substrate.office.com/sigsapi/v1.0/Me/Signals 409 (Conflict)

Attempts to Resolve the Issue

1. Cloned the project from https://github.com/KennethBWSong/authCodeTemplate but was unable to build it. After clicking the Authorize button, Graph.tsx fails to retrieve the user profile, resulting in a blank component and the error log shown above.

2. Referenced https://techcommunity.microsoft.com/t5/teams-developer/teamsfx-react-3-0-2-teamsusercredential-gettoken-results-in/m-p/3984411.
   Using https://alcdn.msauth.net/browser/2.21.0/js/msal-browser.min.js prompts "Permissions requested."
   Using https://alcdn.msauth.net/browser/2.35.0/js/msal-browser.min.js shows a blank page.
   After granting permission, the error log still appears as above.

3. Updated to https://res.cdn.office.net/teams-js/2.23.0/js/MicrosoftTeams.min.js. No change observed.

4. Installed Specific MSAL Version: Ran npm install @azure/msal-browser@2.21. No change observed.

5. Updated all npm packages to their latest versions. No change observed.

6. Added "profile" permission in App registrations. No change observed.

7. Added await teamsUserCredential.login(scope); in Graph.tsx with no success, but some render issues occurs occasionally.

[Mingz6]

The problem was caused by the following package versions:

@microsoft/teams-js: ^2.23.0 ==> ^2.22.0
@microsoft/teamsfx: ^2.3.2 ==> ^2.3.0
@microsoft/teamsfx-react: ^3.1.2 ==> ^3.1.0

I reverted these versions back to the previous ones, and it is now working for me.

[KennethBWSong]

@Mingz6 Thank you for using Teams Toolkit. I want to first confirm that are you going to implement Auth Code Flow or OBO flow in your Teams app? The two repos (https://github.com/Mingz6/TeamsFxSso.git and https://github.com/KennethBWSong/authCodeTemplate) are using different Auth flows. We would suggest you to implement OBO flow since it has better support for mobile devices. You can refer to the sample for OBO flow.

[Mingz6]

sample

Hi @KennethBWSong ,

I am working on this repo https://github.com/Mingz6/TeamsFxSso.git. I managed to get the token that I need. The only issue is that the latest versions of @microsoft/teams-js, @microsoft/teamsfx, and @microsoft/teamsfx-react are not working for me. So I switch to older version.

[yiqing-zhao]

Hi @Mingz6, I'm currently investigating this problem, and will update here when I have a conclusion.

[yiqing-zhao]

Hi @Mingz6, the error is due to @microsoft/teamsfx upgraded @microsoft/msal-browser from V2.x to V3.x since v2.3.1, which conflicts with the @microsoft/msal-browser@2.x referenced in auth-start/end.html.

The workaround is fixing the @microsoft/teamsfx version to 2.3.0 and @microsoft/teamsfx-react version to 3.1.0. @microsoft/msal-browser does not provide official CDN for v3.x, and we are currently investigating ways to update our auth-start/end.html.

[andrewconnell]

@yiqing-zhao Any update on this? It appears this breaks any use of the useGraphWithCredential() hook...

[yiqing-zhao]

@yiqing-zhao Any update on this? It appears this breaks any use of the useGraphWithCredential() hook...

Hi @andrewconnell , could you try fixing the @microsoft/teamsfx version to 2.3.0 and @microsoft/teamsfx-react version to 3.1.0 and see if this works for you?

[andrewconnell]

@yiqing-zhao said:

Hi @andrewconnell , could you try fixing the @microsoft/teamsfx version to 2.3.0 and @microsoft/teamsfx-react version to 3.1.0 and see if this works for you?

Yup, that did fix the issue for me. Thanks!

[adashen]

Close as the issue is resolved

[andrewconnell]

@adashen any context as to why this was closed? If this was resolved, can you either provide a link where it was closed or provide details on what versions of the relevant packages fix it?