teamsfx-react@3.0.2 TeamsUserCredential.getToken results in error

Question

The error I am getting when trying to get a teams access token:

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

Code that has the error:

// configure teamsfx-react

const { loading, theme, themeString, teamsUserCredential } = useTeamsUserCredential({

initiateLoginEndpoint: `${process.env.REACT_APP_INITIATE_LOGIN_ENDPOINT}/auth-start.html`,

clientId: process.env.REACT_APP_AAD_APP_CLIENT_ID as string

});

// calling getToken

const scopes = [

"openid",

"profile",

process.env.REACT_APP_API_SCOPE as string,

];

// Throws the "please login first" error

const token = await teamsUserCredential?.getToken(scopes)

The issue is only occurring on "New Teams" for Mac. The same code works on "New Teams" on Windows.

Logging in solves the issue temporarily, if I close teams and open it again I am forced to login again.

I have been trying to figure out this issue for weeks.

mrtimn · Answer

Chased this down with the TeamsFX team: https://github.com/OfficeDev/TeamsFx/issues/10379"@mr-github-user Thanks for all the information. Here's one solution: run npm install azure/msal-browser@2.21 to your project and redeploy your app. It should work on iOS devices.Technical background:The auth-start.html and auth-end.html is using MSAL-Browser 2.21 to login users and handle login redirect response. The project does not specify the MSAL version so npm installs latest version. But in newer MSAL, the cache logic is changed so it cannot read cache from 2.21 and fallback to the ssoSilent function. In desktop browser environment, ssoSilent can acquire a token silently so you can get the token. But it cannot acquire the token in iOS so your app cannot work properly. Changing the MSAL version in your react app to 2.21 aligns the version between react app and auth-end.html so it fixes the problem. There could be other solution for your issue, as long as the MSAL version is aligned. You can have your own solution based on your requirement."I decided that instead of downgrading my msal-browser version I would update the CDN version in the auth-start.html and auth-end.html files. It worked!

sayali-msft · Answer

MrTimn-Thanks for reporting your issue.We will check this at our end and will get back to you.

mrtimn · Answer

My application is using Application Insights, so I may be able to provide more information.Let me know if there is anything I could provide that would help you troubleshoot the issue.Thanks

mrtimn · Answer

I am using New Teams on Mac:Version: 23285.3805.2505.9215ClientVersion: 50/23101227708

shabbirdhangot · Answer

We are also facing similar issue with our production application. Kindly provide urgent resolution for the issue. I have reported issue to TeamsFx side as well. Following is Github issue link for the same:&nbsp;https://github.com/OfficeDev/TeamsFx/issues/10379

Forum Discussion

teamsfx-react@3.0.2 TeamsUserCredential.getToken results in error

Share

Resources