Forum Discussion
MrTimn
Nov 07, 2023Copper Contributor
teamsfx-react@3.0.2 TeamsUserCredential.getToken results in error
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 ...
Sayali-MSFT
Microsoft
Dec 13, 2023MrTimn -Currently we don't have update on this issue, engineering team looking into it. We will let you know once we get any update.
MrTimn
Jan 24, 2024Copper Contributor
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!
"@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!