No action is getting performed when we click on Sign in with Microsoft on Teams mobile , Teams desktop , and web Teams Browser.

Question

we are trying to integrate Microsoft Login SSO in TEAMS APP. with both methods

instance
      .loginPopup(loginRequest)
or
      .loginRedirect(loginRequest)

But in LoginPoPup  method it only working in  Browser , when we open teams app Teams desktop, Teams mobile,Teams browser Microsoft login button is not clickable it show "browser Auth error : pop is block by browser".


After that we move to loginRedirect in browser , teamApp mobile login issue is working and but some redirect issue some time happen. But still in desktop version still login button is not clickable. and gives 

Refused to display '
 
BrowserAuthError: redirect_in_iframe: Redirects are not supported for iframed or brokered applications. Please ensure you are using MSAL.js in a top frame of the window if using the redirect APIs, or use the popup APIs. (window.parent !== window) => true 

these type error . 

please help us to solve these issue .

Answer 1

@Jitendra - As per the above error, you cannot authenticate the user inside iframe meaning you cannot use redirect APIs for user interaction with the identity provider.

You can start with creating your own customer page and allow the user to enter the credentials and then authenticate the user. When the user enters their credentials and clicks on login, the server will return OK (if email/password is correct). After that you should save the token in localstorage and then set isAuthenticated = true.

If you are using the Auth code flow, then you should do the authentication in the outer real page not inside the iframe. Then you will have to login once your authenticated. The concept is that you must fully redirect to the Auth pages in azure ad not in iframe.

Reference doc-https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/lib/msal-browser/docs/iframe-usage.md#:%7E:text=Using%20MSAL%20in%20iframed%20apps%20By%20default%2C%20MSAL,redirect%20APIs%20for%20user%20interaction%20with%20the%20IdP%3A