Microsoft-authentication-library-for-js: Failing to acquire access token - Non-interactive error: block_token_requests

[Edgias]

Please follow the issue template below. Failure to do so will result in a delay in answering your question.

Library

• [ ] [email protected] or @azure/[email protected]

Important: Please fill in your exact version number above, e.g. [email protected].

Framework

React v16.12.0

Description

I have 2 applications which are both protected by azure ad: a react app and an asp.net core web API. These applications are registered separately in Azure so each has its own client id. Users will get authenticated via the react app and in turn the react app will call the API. As of now users can successfully sign in but I can't get an access token to call the API. I exposed the API and it has a scope like this: api://{web_api_client_id}/api.read. I tested the API via postman and its working. In the console I'm seeing the following informational messages: Token is not in cache for scope:openid profile user.read api://{web_api_client_id}/api.read, renewing accesstoken, renewToken is called for scope:openid profile user.read api://{web_api_client_id}/api.read. There is also an error I am not sure if it affects: Unsafe JavaScript attempt to initiate navigation for frame with origin 'http://localhost:3000' from frame with URL 'https://login.microsoftonline.com/{tenant_id}/oauth2/v2.0/authorize?response_type=token&scope=openid%20profile%20User.Read%20api%3A%{tenant_id}%2Fapi.read&client_id={react_app_client_id}&redirect_uri=http%3A%2F%2Flocalhost%3A3000%2Fbusiness-units&state=4c9679db-e187-4531-a6c0-7f6b7d23d77c&nonce=c9cf0545-263c-4848-a03d-cdf051a4594c&client_info=1&x-client-SKU=MSAL.JS&x-client-Ver=1.2.1&login_hint={my_full_name}%40{my_domain.com}&login_req={user_account_identifier}&domain_req={tenant_id}&domain_hint=organizations&client-request-id=06c6df6e-34df-4909-be79-aa76fd5417c6&prompt=none&response_mode=fragment'. 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.

Security

Is this issue security related? No

Regression

Did this behavior work before? No

Configuration

Please provide your MSAL configuration options.
`export const GRAPH_SCOPES = {
OPENID: "openid",
PROFILE: "profile",
USER_READ: "User.Read",
MY_API: "api://{web_api_client_id}/api.read"
};

export const GRAPH_ENDPOINTS = {
ME: "https://graph.microsoft.com/v1.0/me"
};

export const GRAPH_REQUESTS = {
LOGIN: {
scopes: [
GRAPH_SCOPES.OPENID,
GRAPH_SCOPES.PROFILE,
GRAPH_SCOPES.USER_READ,
GRAPH_SCOPES.MY_API
]
}
};

export const msalApp = new UserAgentApplication({
auth: {
clientId: "{react_app_client_id}",
authority:
"https://login.microsoftonline.com/{tenant_id}",
redirectURI: "http://localhost:3000"
},
cache: {
cacheLocation: "localStorage",
storeAuthStateInCookie: isIE()
},
system: {
navigateFrameWait: 0,
logger: {
error: console.error,
errorPii: console.error,
info: console.log,
infoPii: console.log,
verbose: console.log,
verbosePii: console.log,
warning: console.warn,
warningPii: console.warn
}
}
});`

// Provide configuration values here.
// For Azure B2C issues, please include your policies.

Reproduction steps

1. npm start
2. Click button to sign-in and login pop-up appears
3. Enter username and password

Expected behavior

I expect that after user signs in the library will silently acquire an access token to call the API so that users can view the data from the API.

Browsers

Is this issue browser-specific? No, all browsers affected.

[jasonnutter]

@Edgias Can you try opening the login.microsoftonline.com url in its on tab, and let me know what happens?

Edit: was able to lookup your request in our logs, and it appears that your redirectUri is not valid. Have you registered that redirect uri in the Azure Portal for your application?

[Edgias]

@jasonnutter My bad about the url, the unsafe javascript error is gone but I am still getting Non-interactive error: block_token_requests. What am I missing? Could it be the way I registered my apps as described above?

[jasonnutter]

@Edgias That error is thrown when we detect that your application is try to make a call to acquireTokenSilent on page load when it is loaded inside a hidden iframe. We throw this error to prevent bad side effects from occurring (endlessly acquiring tokens in nested iframes, namely). This error is mostly informative, and does not prevent your application from acquiring tokens. To suppress this error, either add logic to your application to not attempt to not call acquireTokenSilent on page load when it is loaded inside an iframe, or have this error silently caught in a catch block when you call acquireTokenSilent.

[jasonnutter]

Closing. We will look into improving this error message and documentation. Let us know if you have any questions.

[EspressoBeans]

My page is not being loaded within an iframe yet still throws the Non-interactive error: block_token_requests error.

[jasonnutter]

@EspressoBeans We use a hidden iframe to acquire tokens, and this error occurs when we detect that the page used as the redirect uri for silent requests (which gets loaded inside the hidden iframe) is making calls to acquireTokenSilent on page load inside that iframe.

[oneillsp96]

is that what explains this if statement in the react sample app?

if (account && !WindowUtils.isInIframe()) { const tokenResponse = await this.acquireToken( GRAPH_REQUESTS.LOGIN, useRedirectFlow );

My app seems to be working fine with redirect flow, gets the token and everything but every time my componentDidMount runs I see these console logs:

Non-interactive error: block_token_requests
Non-interactive error: unsupported_response_type

[jasonnutter]

is that what explains this if statement in the react sample app?

if (account && !WindowUtils.isInIframe()) { const tokenResponse = await this.acquireToken( GRAPH_REQUESTS.LOGIN, useRedirectFlow );

Correct.

My app seems to be working fine with redirect flow, gets the token and everything but every time my componentDidMount runs I see these console logs:

Non-interactive error: block_token_requests
Non-interactive error: unsupported_response_type

Have you enabled your application for the implicit flow? The unsupported_response_type is an indicator it may not be. See this comment: https://github.com/AzureAD/microsoft-authentication-library-for-js/issues/766#issuecomment-503383859

[oneillsp96]

adding the check for !WindowUtils.isInIframe() fixed the blocked token request console error.
checking the box for implicit grant for access token fixed the unsupported_response_type error.

Thanks a ton. I can tell you guys are working hard on MSAL and it is a lot nicer to work with than it was this time last year.

[oneillsp96]

I did notice this warning, however last I checked the latest msal.js version is 1.3.0

[jasonnutter]

Great! You're welcome.

I did notice this warning, however last I checked the latest msal.js version is 1.3.0

That warning is for customers looking to upgrade to @azure/msal-browser aka MSAL.js v2 (currently in Public Preview), which switches from the Implicit Flow to the Auth Code Flow. See: #1000