(TeamsFx) Teams toolkit tab app SSO not working in mobile platform.

[pjpraveenjayakumar]

Describe the bug Toolkit default sample tab app SSO is deployed. Once tab app loaded, user clicks on "Authorize" button to give the consent. Once consent granted, person control loaded logged in user name and details. If the user logout/login in desktop/web teams user is not required to click on "Authorize" button to load person component. But in mobile, person component is not loading the details. Once user clicks on "Authorize" button in mobile, user has to login in popup and then popup closing. Subsequently person component is loading.

Could you please check and confirm why user has to authorize in mobile again? and it's not the same case with desktop/web client.

we tried to get the fiddler traces but have challenges.

To Reproduce Steps to reproduce the behavior:

1. deploy the tab SSO toolkit sample.

2. open the same Tab SSO toolkit sample App in mobile (android or iOS ).

3. click on "authorize" button and t will open login popup then provide same credentials then it will load logged in user details in people picker component.

4. logout and login back from teams mobile and go to respective app. click on "autherize" button and it will again open login popup to enter credentials. it should not be the case like every time it's asking user to enter credentials.

Expected behavior If the user logout/login in desktop/web teams user is not required to click on "Authorize" button to load person component. It should load the person component automatically since SSO has been implemented.

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

• OS: iOS, Android.
• Version [iOS 16.2 Android 11]

Additional context Add any other context about the problem here.

[ghost]

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.

[SLdragon]

Hi, @pjpraveenjayakumar , thank you for submitting this issue, and sorry for the inconvenience.

Not sure whether it is related we cache the token inside session storage cause this issue, and need further investigation.

You can call teamsUserCredential.getToken(scope) method to check whether there is an error message here: https://github.com/OfficeDev/TeamsFx/blob/dev/templates/tab/ts/default/src/components/sample/Graph.tsx#L17

PS: by the way, it is not secure to share your password in this public issue page, and make sure to change your password ASAP.

[KennethBWSong]

@SLdragon I think it's a limitation of Teams mobile client. @blackchoey Do you remember we have a discussion on this problem before?

[frankqianms]

@SLdragon @KennethBWSong As @huimiu and I investigated before, this problem differs in different mobile platforms. Sometimes the login page will continuously popup and cannot successfully consent. It is as if the authorization information is never cached in this issue.

[KennethBWSong]

@frankqianms Actually I think this is different from consent issue. This issue will occur when the Tab app failed to silently login, mainly with this error. I remember there is an issue saying Teams mobile client has some limitation on silent login, and I am working on this. For consent issue, you need to use an external auth flow.

[frankqianms]

@KennethBWSong Thanks for replying. It might not be a consent issue actually. As we always failed to login before consenting, it is probably because the tab app failed to silently login.

[SLdragon]

@KennethBWSong , @frankqianms , I checked the github issue, may be related to this comment: https://github.com/AzureAD/microsoft-authentication-library-for-js/issues/3329#issuecomment-811825340

[pjpraveenjayakumar]

@SLdragon Could you please let us know if there any workaround to make SSO to work in mobile platforms ?

[frankqianms]

Hi @pjpraveenjayakumar , we have been working on this. Currently, we think it is related to monitor_window_timeout error, and here is the workaround for this error: https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/lib/msal-browser/docs/errors.md#monitor_window_timeout:~:text=To%20solve%20this%20problem%20you%20should%20ensure%20that%20the%20page%20you%20use%20as%20your%20redirectUri%20is%20not%20doing%20any%20of%20these%20things%2C%20at%20the%20very%20least%2C%20when%20loaded%20in%20a%20popup%20or%20iframe.%20We%20recommend%20using%20a%20blank%20page%20as%20your%20redirectUri%20for%20silent%20and%20popup%20flows%20to%20ensure%20none%20of%20these%20things%20can%20occur. You can try it to check if it works for you. As most of my teammates are in the vacation of Chinese New Year, we will provide you a complete workaround as soon as possible after 1/27. Sorry for the inconvenience.

[SLdragon]

Could you please let us know if there any workaround to make SSO to work in mobile platforms?

Currently there is no easy workaround to make it work in mobile platform, because TeamsFx SDK doesn't expose the cache location settings and we need further investigation to find the root cause. Please stay tuned and we will let you know when we have a solution, thank you!

[pjpraveenjayakumar]

Hi @SLdragon Could you please let us know if there is any update ? Thanks

[KennethBWSong]

Hi @pjpraveenjayakumar We are confirming with msal-browser team about this issue and will reach out to you as soon as we have any update. Thanks!

[pjpraveenjayakumar]

hi @KennethBWSong Could you please let us know if there is any update on this? Thanks

[pjpraveenjayakumar]

hi @KennethBWSong and @SLdragon kindly let us know if there is any update or when it can be fixed and available for public ring. it's little urgent for customers since the SSO app has been already moved to production and live. thanks for understanding and looking forward to your response.

[SLdragon]

Hi, @pjpraveenjayakumar , sorry for the late. From our testing, this issue is caused by MSAL.js v2 (@azure/msal-browser) library and getAccountByUsername inside this library return null on IOS platform. Maybe related to some IOS webview limitation cased this issue, and we have already created an issue here: https://github.com/AzureAD/microsoft-authentication-library-for-js/issues/5617

We are waiting for the response from MSAL teams, will let you know when there is a solution, thanks!

If you have any other detailed information that not covered inside that issue thread, feel free to add your comments!

[ThomasPe]

still broken for me with the latest npm updates. Any news?

[ThomasPe]

How does this issue not have a higher priority? Not being able to log into the app on iOS means you cannot publish the app to the Teams Store as it does not pass the inspection.

I just tried the latest preview on Static Web Apps and it still does not work! The toolkit has basically been unsuable for over a year due to this if you want to distribute your app through the Teams Store.

[KennethBWSong]

Hi @ThomasPe Thank you for using our Toolkit. We would recommend you have a try with "React with Fluent UI" template for apps cross platforms. You can simply click on "Create a new app" -> "Tab" -> "React with Fluent UI" to create this app.

This template implements OBO flow which is recommended by Teams team. This template works well on IOS platform in our test.

[ThomasPe]

Thanks for the update, it seems this requires iOS to be 17.x or newer? Btw. is there an updated sample on how to integrate both the API and Microsoft Graph Toolkit?

[KennethBWSong]

@ThomasPe This app should not have requirements on the version of iOS, but I only test on latest iOS and Teams. For integration of Teams Toolkit, we don't have a sample now. You can have a try with this provider, and also this sample which use APIM as backend.

[ThomasPe]

I have double checked with a new iOS device. From what I can tell iOS 15 and lower are not working. With 17 the sample worked. However I didn't get it to work for my app despite using basically the same code. I assume that this might be due to me perhaps using a Multi Tenant App Registration? Should I create a new issue for this then?

[keeth]

My teams app also fails Teams Store validation due to this issue.

[KennethBWSong]

I have double checked with a new iOS device. From what I can tell iOS 15 and lower are not working. With 17 the sample worked. However I didn't get it to work for my app despite using basically the same code. I assume that this might be due to me perhaps using a Multi Tenant App Registration? Should I create a new issue for this then?

@ThomasPe For multi-tenant issue, please refer to this wiki. If you have any other questions about multi-tenant, please create a new issue, thanks!

[KennethBWSong]

My teams app also fails Teams Store validation due to this issue.

@keeth Thank you for using our Toolkit. As mentioned above, Teams now recommend to use OBO flow for SSO. You can refer to "React with Fluent UI" template for apps cross platforms. You can simply click on "Create a new app" -> "Tab" -> "React with Fluent UI" to create this app.

[keeth]

Hmm actually I may have a different issue. I was not logging in/out of Teams, but silent token acquisition was failing every time on iOS only. Switching cacheLocation from sessionStorage to localStorage for iOS fixed it. Unfortunately teamsfx.TeamsUserCredential is hardcoded to sessionStorage so I had to monkeypatch it for iOS :(.

[ThomasPe]

@keeth updating the app-start.html and app-end.html to the latest msal-browser version from the CDN fixed the iOS login issue for me. see https://github.com/OfficeDev/TeamsFx/issues/10379#issuecomment-1905003489 for more info.

<script type="text/javascript" src="https://alcdn.msauth.net/browser/2.35.0/js/msal-browser.min.js" crossorigin="anonymous"></script>

[ThomasPe]

I do need to sign into the app on each launch so it doesn't fix the silent sign in

[keeth]

@ThomasPe yeah I updated those dependencies as well, but similarly it did not fix the issue. My app was rejected due to the silent sign-in issue. Like I said above, I fixed silent token acquisition by using localStorage instead of sessionStorage for iOS.

[microsoft-github-policy-service[bot]]

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.

[KennethBWSong]

Hi @keeth Thank you for providing this solution. In TeamsFx SDK, we are using session storage due to security concerns. For better support on mobile device, we would suggest you to use OBO flow as mentioned above.