authContext.login() causes “ Refused to display ‘login.microsoftonline.com…’ in a frame because it set ‘X-Frame-Options’ to ‘deny’ ”

Question

I’m currently trying to implement my website into Microsoft Teams. For that I’ve made a custom app with App Studio. In that app I have a tab to direct to my website. This website has a button that executes a code in which it tries to authContext.login(), which causes the site to direct to the microsoft login and back to the redirect.

In web browsers (Firefox, Chrome, Edge) it works fine. But when I try to use authContext.login() in the Teams Desktop Client I get this error in the DevTools console (Due to security concerns I’ve changed some of the hexcode for this post):

Refused to display https://login.microsoftonline.com/common/oauth2/authorize?response_type=id_token&client_id=1904f197-dae8-4740-94f2-e12dee41b451&redirect_uri=https%3A%2F%2Fsomeadress.com%2Freally%2F&state=19484c2c-2aff-463a-9cba-2894af66c09d&client-request-id=91308f53-96a1-4f2b-8ee4-774b2f168c6b&x-client-SKU=Js&x-client-Ver=1.0.15&nonce=5cabfef7-36aa-470a-aaa3-754448369ab4&sso_reload=true' in a frame because it set 'X-Frame-Options' to 'deny'.

The website gets displayed until the button with authContext.login() is executed, then it vanishes and the error is thrown.

This is a code snippet of my button:

<!--- Import packages for authentication information in Teams/Azure --->
<script src="https://secure.aadcdn.microsoftonline-p.com/lib/1.0.15/js/adal.min.js"  crossorigin="anonymous"></script>

...

function loginO365() {
    let config = {
        clientId: "190af997-d6f8-4730-9462-e13dee41d451",
        redirectUri: "#application.gc_app_rootURL#", // same URL as redirect in error and Azure app
        cacheLocation: "localStorage",
        navigateToLoginRequestUrl: true,
    };

    let authContext = new AuthenticationContext(config);
    let isCallback = authContext.isCallback(window.location.hash);
    authContext.handleWindowCallback();
    authContext.login(); // causes error
}

My questions:

1. What causes this?
2. Why does it not happen in web browsers?
3. How do I fix it?

Answer 1

Microsoft does not allow its authentication dialog to open in an I-frame. It works fine in browser but MS Teams is implemented on I-frame, that is why you are getting this error.

Please have a look into Microsoft Teams authentication flow for tabs flow.

Here is a ink for Auth code sample