React + msal raises block_iframe_reload error

[emaborsa]

Core Library

MSAL.js (@azure/msal-browser)

Core Library Version

5.6.3

Wrapper Library

MSAL React (@azure/msal-react)

Wrapper Library Version

None

Public or Confidential Client?

Public

Description

I am developing a react SPA and implementing msal:

"react": "^19.2.7",
"react-dom": "^19.2.7",
"react-router-dom": "^7.18.0",
"@azure/msal-browser": "^5.6.3",
"@azure/msal-react": "^5.2.1",
"@vitejs/plugin-react": "^6.0.2",
"swr": "^2.2.5",
"vite": "^8.0.7"

i tried to slightly change packages versions, did not help.
Switched to Axios, have same problem.
Tried a lot of AI, did not help.
Tested on Chrome and Edge.
the swr middleware worked on an old version at projects of my old company.

Error Message

Standard error:

ERROR Error: Uncaught (in promise): BrowserAuthError: block_iframe_reload: Request was blocked inside an iframe because MSAL detected an authentication response. For more visit: aka.ms/msaljs/browser-errors
BrowserAuthError: block_iframe_reload: Request was blocked inside an iframe because MSAL detected an authentication response. For more visit: aka.ms/msaljs/browser-errors

Adding redirectUri as mentioned in the docs:

Unsafe attempt to initiate navigation for frame with origin 'http://localhost:30730' from frame with URL 'https://login.microsoftonline.com/045c0c45-3c80-4b73-b52f-42f07d6207d4/oauth2/v2.0/authorize?client_id=02523c40-99cf-4e42-ae60-cf6c9970c2bf&scope=02523c40-99cf-4e42-ae60-cf6c9970c2bf%2F.default%20openid%20profile%20offline_access&redirect_uri=http%3A%2F%2Flocalhost%3A30730%2Fredirect&client-request-id=019f036a-11a7-7717-8d10-1027ced42247&response_mode=fragment&client_info=1&clidata=1&prompt=none&sid=00a96749-a377-1142-16af-0dd0a6b910c8&X-AnchorMailbox=Oid%3A871ae8c1-ae67-4d4b-bbc0-8ae0b871548d%40045c0c45-3c80-4b73-b52f-42f07d6207d4&nonce=019f036a-11ac-7eb0-86f0-5a8e7fd74708&state=eyJpZCI6IjAxOWYwMzZhLTExYWMtNzhmOC1hOTVmLTYzMDdkZThlMzU4ZiIsIm1ldGEiOnsiaW50ZXJhY3Rpb25UeXBlIjoic2lsZW50In19&x-client-SKU=msal.js.browser&x-client-VER=5.14.0&response_type=code&code_challenge=4MZOzNRENYe0SlK5pvcrGKH7pX3xu0yus_EJcxsjf4Y&code_challenge_method=S256'. The frame attempting navigation of the top-level window is sandboxed, but the flag of 'allow-top-navigation' or 'allow-top-navigation-by-user-activation' is not set.

MSAL Logs

No response

Network Trace (Preferrably Fiddler)

• Sent
• Pending

MSAL Configuration

import { BrowserCacheLocation, Configuration, PopupRequest, PublicClientApplication } from "@azure/msal-browser";

const CLIENT_ID = "xxxxxxxxxxxxxxxxxxxxx";

export const msalConfig: Configuration = {
  auth: {
    clientId: CLIENT_ID,
    authority: "https://login.microsoftonline.com/zzzzzzzzzzzzzzzzzzzzzzzz",
    knownAuthorities: ["https://login.microsoftonline.com"],
    redirectUri: "/",
    postLogoutRedirectUri: "/",
  },
  cache: {
    cacheLocation: BrowserCacheLocation.LocalStorage,
  },
  system: {
    allowRedirectInIframe: false,
  },
};

export const msalInstance = new PublicClientApplication(msalConfig);
await msalInstance.initialize();

Relevant Code Snippets

swr middleware:

import { InteractionRequiredAuthError } from "@azure/msal-browser";
import { ConfiguredMiddleware } from "wretch";
import { msalApp } from "../context/authContext";

export type AuthOptions = {
  scopes: string[];
};

type AuthMiddleware = (options?: AuthOptions) => ConfiguredMiddleware;

export const authMiddleware: AuthMiddleware =
  ({ scopes } = { scopes: [] }) =>
  (next) =>
  (url, opts) => {
    let account = msalApp.getActiveAccount();

    // Handle case where no active account is set
    if (!account) {
      const allAccounts = msalApp.getAllAccounts();

      if (allAccounts.length === 0) {
        const msg = "No authenticated user account was found.";
        console.error(msg);
        throw Error(msg);
      } else if (allAccounts.length === 1) {
        // If there's only one account, set it as the active account
        account = allAccounts[0] ?? null;
        msalApp.setActiveAccount(account);
      } else {
        // If multiple accounts exist, prompt the user to select one
        console.warn("Multiple accounts detected. Prompting user to select one.");
        return msalApp
          .loginPopup({ prompt: "select_account", scopes })
          .then((response) => {
            if (response.account) {
              msalApp.setActiveAccount(response.account);
              return authMiddleware({ scopes })(next)(url, opts); // Retry with the selected account
            } else {
              throw Error("Account selection failed.");
            }
          })
          .catch((error) => {
            console.error("Error during account selection:", error);
            throw error;
          });
      }
    }

    // Proceed with the active account
    return msalApp
      .acquireTokenSilent({
        scopes,
        account: account ?? undefined,
      })
      .then((res) => {
        return next(url, {
          ...opts,
          headers: {
            ...opts["headers"],
            Authorization: `Bearer ${res.accessToken}`,
          },
        });
      })
      .catch((error) => {
        if (error instanceof InteractionRequiredAuthError) {
          msalApp.loginRedirect({ scopes });
        }
        return Promise.reject(error);
      });
  };


Axios interceptor:

apiClient.interceptors.request.use(async (config) => {
  const accounts = msalInstance.getAllAccounts();
  if (accounts.length === 0) return config;

  try {
    const result = await msalInstance.acquireTokenSilent({
      ...loginRequest,
      account: accounts[0],
      redirectUri: "http://localhost:30730/redirect",
    });
    config.headers.Authorization = `Bearer ${result.accessToken}`;
  } catch (error) {
    if (error instanceof InteractionRequiredAuthError) {
      await msalInstance.acquireTokenPopup(loginRequest);
    }
  }
  return config;
});

Reproduction Steps

Base React application. I reproduce it on all my new projects.

Expected Behavior

I expect that if the user is not logged in, it is redirected to MS login. IF logged in, silent get token.

Identity Provider

Entra ID (formerly Azure AD) / MSA

Browsers Affected (Select all that apply)

Chrome, Edge

Regression

No response

[emaborsa]

For Axios i have the following middleware:

import { InteractionRequiredAuthError } from "@azure/msal-browser";
import { InternalAxiosRequestConfig } from "axios";
import { loginRequest, msalInstance } from "../auth/msalConfig";

export async function authMiddleware(config: InternalAxiosRequestConfig): Promise<InternalAxiosRequestConfig> {
  let account = msalInstance.getActiveAccount();

  if (!account) {
    const allAccounts = msalInstance.getAllAccounts();

    if (allAccounts.length === 0) {
      throw new Error("No authenticated user account was found.");
    } else if (allAccounts.length === 1) {
      account = allAccounts[0]!;
      msalInstance.setActiveAccount(account);
    } else {
      console.warn("Multiple accounts detected. Prompting user to select one.");
      const response = await msalInstance.loginPopup({ prompt: "select_account", scopes: loginRequest.scopes });
      if (!response.account) throw new Error("Account selection failed.");
      msalInstance.setActiveAccount(response.account);
      account = response.account;
    }
  }

  try {
    const res = await msalInstance.acquireTokenSilent({ scopes: loginRequest.scopes, account });
    config.headers.set("Authorization", `Bearer ${res.accessToken}`);
    return config;
  } catch (error) {
    if (error instanceof InteractionRequiredAuthError) {
      await msalInstance.loginRedirect({ scopes: loginRequest.scopes });
    }
    return Promise.reject(error);
  }
}

[emaborsa]

The interesting part is, if I wait ~60sec, it works...

[konstantin-msft]

Your redirect page serves the entire React app. So the hidden renewal iframe boots a second copy of your app, which calls msalInstance.initialize()  / MSAL APIs, MSAL detects an auth-response hash while running inside an iframe, and deliberately throws blocked_iframe_reload error. This is an intentional guardrail - it prevents your whole app and a redirect loop from re-bootstrapping inside the renewal iframe.

Point  redirectUri  at a dedicated, minimal page that does not bootstrap your React app:

1. Add a static blank page, e.g.  public/blank.html  (empty   ), or a  /redirect route that renders nothing and does not initialize MSAL / render <MsalProvider>.
2. Set that page as your redirectUri and register the exact URI in your Entra app registration
3. Remove the per-call redirectUri: "http://localhost:30730/redirect"  override in your Axios interceptor — it conflicts with the config-level value and must also be registered if used.

See https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/lib/msal-browser/docs/initialization.md for more details.

[emaborsa]

I still get

Unsafe attempt to initiate navigation for frame with origin 'https://myDomain.com' from frame with URL 'https://login.microsoftonline.com/xxxxxxxxxxxxxxxxxxxxxxx/oauth2/v2.0/authorize?client_id=xxxxxxxxxxxxxxxxxx&scope=openid%20profile%20email%20api%3A%2F%2FmyDomain.com%2Fbackend-api%2Fuser_impersonation%20offline_access&redirect_uri=https%3A%2F%2FmyDomain.com%2Fredirect.html&client-request-id=xxxxxxxxxxxxxxxxxxxxxxx&response_mode=fragment&client_info=1&clidata=1&prompt=none&sid=xxxxxxxxxxxxxxxxxxxxxxx&X-AnchorMailbox=xxxxxxxxxxxxxxxxxxxxxxx&nonce=xxxxxxxxxxxxxxxxxxxxxxx&state=xxxxxxxxxxxxxxxxxxxxxxx&x-client-SKU=msal.js.browser&x-client-VER=5.6.3&response_type=code&code_challenge=xxxxxxxxxxxxxxxxxxxxxxx&code_challenge_method=S256'. 
The frame attempting navigation of the top-level window is sandboxed, but the flag of 'allow-top-navigation' or 'allow-top-navigation-by-user-activation' is not set.

After some seconde it works. Is the behavior correct?