Teams app custom tab: BrowserAuthError: redirect_in_iframe: Code flow is not supported inside an iframe

[goldylucks]

Library

• @azure/msal-browser@2.3.1

Framework

React

Description

We have a ms teams app with a chatbot tab and a custom tab.
In the custom tab, calling msalInstance.loginRedirect({ scopes: [] }); throws the error below.
In the chatbot tab, opening an iframe with the exact same screen as the custom tab, and calling the same command msalInstance.loginRedirect({ scopes: [] }); works just fine.

Error Message

BrowserAuthError: redirect_in_iframe: Code flow is not supported inside an iframe. 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

Security

• Is this issue security related?
  No

Regression

• Did this behavior work before?
  No

MSAL Configuration

{
	auth: {
		clientId: process.env.REACT_APP_MICROSOFT_CLIENT_ID,
		redirectUri: window.location.origin,
	},
};

Reproduction steps

Make a custom tab inside a ms teams app with the following code:

import * as msal from '@azure/msal-browser';
const msalConfig = {
	auth: {
		clientId: process.env.REACT_APP_MICROSOFT_CLIENT_ID,
		redirectUri: window.location.origin,
	},
};

const msalInstance = new msal.PublicClientApplication(msalConfig);

msalInstance
	.handleRedirectPromise()
	.then(response => {
		if (!response) {
			return;
		}
		store.dispatch(
			socialLoginRequest({
				token: response.accessToken,
				backend: 'azuread-oauth2',
			})
		);
	})

msalInstance.loginRedirect({ scopes: [] }); // simulating trigger with a button

Expected behavior

It should trigger ms auth process with redirect and respond with an access token.

Browsers/Environment

• Chrome
• Firefox # haven't tested
• Edge # haven't tested
• Safari # haven't tested
• IE # haven't tested
• MS Teams app

[idan666]

Doesn't work for me either

[goldylucks]

If I change the strategy from redirect to popup:

const response = await msalInstance.loginPopup({ scopes: [] });

I get this error:

Unable to send AtomFrameHostMsg_Message_Sync

[jasonnutter]

@goldylucks Are you using the Teams JS SDK (as demoed here)?

[goldylucks]

I'm using @azure/msal-browser

[github-actions]

This issue has not seen activity in 14 days. It will be closed in 7 days if it remains stale.

[janandreschweiger]

Any updates on this? I have the same issue.

[kenny-reyes]

For me also, appears this when logout user:

Code flow is not supported inside an iframe. Please ensure you are using MSAL.js in a top frame of the window if using the redirect APIs, or use the popup APIs

It appears before redirection, so technically doesn't affect to my flow but leave this awful error in the console.

[jasonnutter]

@kenny-reyes Currently this is expected. We will be making improvements to logout in #2546 and #2563.

[brugh]

Happens to me at logon too. Is there a workaround yet?

[jasonnutter]

Update: We will have a proper sample for this scenario, but if you are getting this error, it is because you are trying to call loginRedirect inside the Teams tab directly, which is not the proper way to invoke auth in Teams.

You need to use the Teams JS SDK:

1. Invoke microsoftTeams.authentication.authenticate, setting the url to a page on your app (e.g. /auth-start). This page will be opened in a popup created by Teams.
2. The /auth-start page should invoke loginRedirect on page load, setting the redirectUri to a page (e.g. /auth-end) that will call handleRedirectPromise to handle the response.
3. The result of handleRedirectPromise should be passed to microsoftTeams.authentication.notifySuccess or microsoftTeams.authentication.notifyFailure, depending on if there is an error.
4. This result will be passed back to your code from step 1, at which point you can use the result.

Example:

// auth.js
const msal = new PublicClientApplication({
    auth: {
        clientId: "your-client-id",
        authority: `https://login.microsoftonline.com/common`, // may need to replace with tenanted endpoint
        redirectUri: `${window.location.origin}/auth-end`,
        navigateToLoginRequestUrl: false
    }
})

// tab.js (when auth is needed)
microsoftTeams.authentication.authenticate({
    url: window.location.origin + "/auth-start",
    width: 600,
    height: 535,
    successCallback: (result) => {
        // This will be called when microsoftTeams.authentication.notifySuccess is called from the popup
    },
    failureCallback: (error) => {
        // This will be called when microsoftTeams.authentication.notifyFailure is called from the popup
    }
});

// auth-start.js (on page load)
msal.loginRedirect()

// auth-end.js (on page load)
msal.handleRedirectPromise()
    .then(result => {
        microsoftTeams.authentication.notifySuccess(result);
    })
    .catch((error) => {
        microsoftTeams.authentication.notifyFailure(error);
    })

[jasonnutter]

And if you want to use the Teams OBO token to get SSO, you will need to trade it server-side, as demonstrated here: https://github.com/OfficeDev/microsoft-teams-app-quickstarts/blob/master/js/clients/tabs/tab-personal-sso/src/components/Tab.js#L68

We'll have a sample that shows both approaches using MSAL Browser and MSAL Node.

[github-actions]

This issue has not seen activity in 14 days. It will be closed in 7 days if it remains stale.

[github-actions]

This issue has been closed due to inactivity. If this has not been resolved please open a new issue. Thanks!