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