Teams custom app fails to load after integrating Azure AD authentica

Question

I’m developing a custom Teams app that integrates with Azure AD for user authentication. The app worked correctly in the development tenant, but after adding Azure AD sign-in using MSAL.js, the app intermittently fails to load inside Teams with the error “Refused to connect” or “This content can’t be displayed in a frame.”

Here’s my authentication flow:

const msalConfig = {
  auth: {
    clientId: "xxxxxxx-xxxx-xxxx-xxxx-xxxxxxxx",
    authority: "https://login.microsoftonline.com/common",
    redirectUri: window.location.origin
  }
};
const msalInstance = new msal.PublicClientApplication(msalConfig);
async function login() {
  try {
    const result = await msalInstance.loginPopup({
      scopes: ["User.Read"],
    });
    console.log("Access token:", result.accessToken);
  } catch (error) {
    console.error("Login failed:", error);
  }
}

The same web app runs fine in a browser, and all redirect URLs are correctly added in Azure App Registration. I’ve already checked CSP headers and manifest permissions.

Is there any recent change in Teams iframe or authentication handling that could cause this behavior?

Answer 1

Dear Kinatyan Halaas

Thank you for reaching out to the Q&A forum. 

The error you’re encountering might be a result of how Microsoft Entra ID and the Teams client handle authentication inside iframes. Based on my research, here are some points to consider:

1> According to the official document Using MSAL in iframed apps - Microsoft Authentication Library for JavaScript | Microsoft Learn, Microsoft states that "Microsoft Entra ID will refuse to render any prompt requiring user interaction (e.g. credential entry, consent, logout etc.) in an iframe by throwing the X-FRAME OPTIONS SET TO DENY error, a measure taken to prevent clickjacking attacks." This means the login page cannot be loaded inside a Teams tab iframe. The browser is correctly enforcing this security measure. 

2> Your msalInstance.loginPopup() works in a standalone browser because it can open a popup freely. Inside Teams, that behavior is blocked or fails because the tab runs in a WebView/iframe. The authentication module - Teams | Microsoft Learn documentation confirms in authenticate(AuthenticatePopUpParameters) section that "When your app needs to show authentication UI that is blocked from being shown in an iframe (e.g., Microsoft Entra consent prompts) "

3> Additionally, since New Teams uses Edge WebView2, iframe and popup restrictions are enforced more strictly, so previous workarounds (like opening a popup directly) are more likely to break. The Develop secure WebView2 apps  documentation discusses treating all web content as insecure and limiting certain behaviors such as navigation handling, which impacts popup flows. 

The recommendation is to use Teams SSO (microsoftTeams.authentication.getAuthToken()) for the best experience. If interactive consent is needed, use microsoftTeams.authentication.authenticate() to open a Teams-managed popup and run MSAL redirect inside that popup.  

For similar reports, you might check this thread: Teams tab app not loading content correctly in desktop client - Microsoft Q&A  

Hope this information helps! 

---

If the answer is helpful, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".  

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.