ClientAuthError: Token calls are blocked in hidden iframes

Library versions

• react-aad-msal: 2.3.1
• msal:1.2.0

Describe the bug Sometimes the following error is displayed in Chrome Developer tools console. index.js:1406 [ERROR] ClientAuthError: Token calls are blocked in hidden iframe It appears 500+ times and then MsalAuthProvider.js:75 Uncaught (in promise) RangeError: Maximum call stack size exceeded Usually happens after a page reload or when coming back after a while of inactivity on the page.

The react application is not rendered in an iframe, it’s a default create-react-app. However everything still seems to work fine after it happens.

Expected behavior No error messages in the console.

Desktop (please complete the following information):

• OS: Windows 10
• Browser: Chrome
• Version: 79.0.3945.117 (Official Build) (64-bit)

[PathToLife]

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"
  },

[Nexith]

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