react-aad: ClientAuthError: Token calls are blocked in hidden iframes

Took me a while, but through process of elimination worked out that you need auth.html

in the public folder.

Error Message:

Without it:

Fix:

Add this to your public folder:

Package.json:

  "dependencies": {
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.3.2",
    "@testing-library/user-event": "^7.1.2",
    "axios": "^0.19.1",
    "msal": "^1.2.1",
    "react": "^16.12.0",
    "react-aad-msal": "^2.3.2",
    "react-dom": "^16.12.0",
    "react-redux": "^7.1.3",
    "react-scripts": "3.3.0",
    "redux": "^4.0.5",
    "typescript": "^3.7.5"
  },

Took me a while, but through process of elimination worked out that you need auth.html in the public folder.

I tried this and updated to msal 1.2.1 and react-aad-msal 2.3.2 adding in the option ‘tokenRefreshUri’

const options = {
    loginType: LoginType.Redirect,
    tokenRefreshUri: window.location.origin + '/auth.html',
}

and now I get the following error instead: Unsafe JavaScript attempt to initiate navigation for frame with origin 'https://localhost:3000' from frame with URL 'https://*'. 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.

We do however call getAccessToken within the <AzureAD> , shouldn’t that be handle with with the cache config set automatically and check if it’s already been run?

const config = {
    cache: {
        cacheLocation: "localStorage",
        storeAuthStateInCookie: true
    }
}

https://github.com/syncweek-react-aad/react-aad#refreshing-access-tokens

I was seeing the same error. I was getting this error in the iFrame.
AADSTS50011: The reply URL specified in the request does not match the reply URLs configured for the application:

Turns out the redirectUrl being sent in the iFrame included /auth.html. I added http://{domain}.com/auth.html to the list of accepted redirectURLs in App registration on Azure.

I’ve experienced the same errors as those mentioned above and added everything mentioned as required to get rid of the errors. Now I’m with the following versions: “react-aad-msal”: “^2.3.3” and “msal”: “^1.2.1”. The only error that I’m receiving is during the Login process: “[ERROR] ClientAuthError: Token calls are blocked in hidden iframes”. However, it logs in but it’s still annoying to have the error message appearing in the console.

Took me a while, but through process of elimination worked out that you need auth.html

in the public folder.

Error Message:

Without it:

Fix:

Add this to your public folder:

Package.json:

  "dependencies": {
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.3.2",
    "@testing-library/user-event": "^7.1.2",
    "axios": "^0.19.1",
    "msal": "^1.2.1",
    "react": "^16.12.0",
    "react-aad-msal": "^2.3.2",
    "react-dom": "^16.12.0",
    "react-redux": "^7.1.3",
    "react-scripts": "3.3.0",
    "redux": "^4.0.5",
    "typescript": "^3.7.5"
  },

Using this approach works for us. Thank you!

Did as @Nexith on this, adding http://localhost:3000/auth.html to the Redirect URI for the app registration resolved the issue.

@KonstantinDinev, I’ve added both https://localhost:3000 and https://localhost:3000/auth.html to the Azure Auth config for allowed callback urls.

Currently my application config looks like this for authProvider.js:

import { MsalAuthProvider, LoginType } from 'react-aad-msal';
const config = {
    auth: {
        authority: 'https://login.microsoftonline.com/**************',
        clientId: '**************',
        redirectUri: 'https://' + window.location.host
    },
    cache: {
        cacheLocation: "localStorage",
        storeAuthStateInCookie: true
    }
};
const authenticationParameters = {
    scopes: [
        '**************'
    ]
};
const options = {
    loginType: LoginType.Redirect,
    tokenRefreshUri: window.location.origin + "/auth.html"
};
export const authProvider = new MsalAuthProvider(config, authenticationParameters, options);

Still seeing intermittent errors where it get’s blocked in the iFrame where you have to stop the page and then click refresh for it to login, but it happens very rarely and only in our dev/prod environment. We are still in development and testing phase so it’s not an issue for us at the moment.

@KonstantinDinev Can you post the full text of the error, including the URLs? The error you’re seeing is saying that there was an error, and AAD was trying to redirect to the error page but MSAL prevented it. If you click on the second URL it will take you to the error page so you can get the error description. Usually this is caused by a configuration issue.

Nexith, in your case, you’re probably have some sort of infinite authProvider.somthing() loop because it is inside an <AzureAD>authProvider.somthing()</AzureAD> Provider.

so it’s like this

• <AzureAD> load
• authProvider.somthing()
• <AzureAD> detect change, que load
• <AzureAD> load
• authProvider.somthing()
• <AzureAD> detect change, que load
• <AzureAD> load
• …

And example that is most likely related to yours is:

getAccessToken() is called inside <AzureAD> without an check to see if it has already been run. Therefore causing an infinite refresh loop.

Solution:

<AzureAD provider={authProvider}>
                                {
                                    (adProps: IAzureADFunctionProps) => {
                                        const isAuthenticated = adProps.authenticationState === AuthenticationState.Authenticated;
                                        const isUnauthenticated = adProps.authenticationState === AuthenticationState.Unauthenticated;

                                        if (adProps.error) {
                                            console.log(adProps.error.errorMessage);
                                        }

                                        if (isAuthenticated && adProps.accountInfo) {
                                            if (adProps.accountInfo && adProps.accountInfo.jwtAccessToken === undefined && getAccessTokenCallback == null) {
                                                getAccessTokenCallback = authProvider.getAccessToken().then(() => {
someGlobalVariable Set();
getAccessTokenCallback  == null;
 }
)
                                            }

You’ll need to probably store getAccessTokenCallback in some sort of global env… setState usually forces an refresh too. I have an AuthRequestStore class that handles all of this refresh stuff.

See the sample js react app for an implementation that seems to have no errors.