acquireTokenSilent after first redirect is not working

Library

• msal@1.2.1

Framework

React 16.5.2

Description

With 3rd Party cookies enabled

After a redirect login, the app immediately renews the token in a hidden iFrame.

With 3rd Party cookies disabled

After a redirect login, the app tries to renew the token in a hidden iFrame, this fails, then it redirects again (it does not prompt the user again, it just disrupts the login flow with an extra redirect)

Security

No

Regression

This behavior has been the same since 1.0.2.

Configuration

Please provide your MSAL configuration options.

const MSAL_AUTHORITY = `https://login.microsoftonline.com/tfp/${
  process.env.REACT_APP_MSAL_TENANT_ID
}/${process.env.REACT_APP_MSAL_SIGNIN_POLICY}/v2.0`;
export const MSAL_SCOPES = {
  MMG: `https://${process.env.REACT_APP_MSAL_TENANT_NAME}.onmicrosoft.com/${
    process.env.REACT_APP_MSAL_APP_ID_URI
  }/read`,
  OPENID: 'openid'
};
export const msalApp = new UserAgentApplication({
  auth: {
    clientId: `${process.env.REACT_APP_MSAL_CLIENT_ID}`,
    authority: MSAL_AUTHORITY,
    validateAuthority: true,
    postLogoutRedirectUri: `${process.env.REACT_APP_HOST_DOMAIN}`,
    redirectUri: `${process.env.REACT_APP_HOST_DOMAIN}`,
    navigateToLoginRequestUrl: false
  },
  cache: {
    cacheLocation: 'sessionStorage',
    storeAuthStateInCookie: false
  },
  system: {
    // increase the number of milliseoconds of inactivity before a token renewal response from Azure AD should be considered timed out.
    loadFrameTimeout: 9000,
    tokenRenewalOffsetSeconds: 0 
  }
});


export const acquireToken = () => {
  const request: AuthenticationParameters = {
    scopes: [MSAL_SCOPES.MMG]
  };
  console.log('MSAL account from inside acquireToken() ', msalApp.getAccount())
  return msalApp.acquireTokenSilent(request).catch(error => {
    // Call acquireTokenPopup (popup window) in case of acquireTokenSilent failure
    // due to consent or interaction required ONLY
    console.log('catching error acquireTokenSilent', error);
    if (requiresInteraction(error.errorCode)) {
      console.error('redirecting to login from inside acquireTokenSilent');
      msalApp.acquireTokenRedirect(request)
      return delay(3000).then(() => {
        // wait for the redirect before returning the error to the calling function.
        console.log('redirecting to MSALlogin took too long, throwing error.')
        throw error;
      });
    }
    throw error;
  });
};

These are for a test app, not production, so I can share:

REACT_APP_MSAL_CLIENT_ID=6fa0ff31-bfad-4d6a-99d2-3f7d00cc0b2a
REACT_APP_MSAL_TENANT_ID=7bec88f8-013e-403f-8cc9-9e451c46f7ea
REACT_APP_MSAL_SIGNIN_POLICY=B2C_1_MMG_Test_Signin
REACT_APP_MSAL_FORGET_PASSWORD_POLICY=B2C_1_MMG_ForgotPassword_Test
REACT_APP_MSAL_TENANT_NAME=InteractionPlacesB2C1
REACT_APP_MSAL_APP_ID_URI=mmg-api

Reproduction steps

With 3rd party cookies enabled

1. acquireTokenRedirect()
2. acquireTokenSilent()
3. observe that acquireTokenSilent renews the session in a hidden iFrame

How do I know it is loading in the iFrame? Because I have a little snippet of code that prevents my Javascript from running inside the iFrame:

if (!(window !== window.parent && !window.opener)) {
// my app initialization code goes here
} else {
  console.log('loading silent refresh in iFrame');
}

3rd party cookies disabled

1. acquireTokenRedirect()
2. acquireTokenSilent()
3. observe that acquireTokenSilent tries to the session in a hidden iFrame
4. iFrame renewal fails and acquireTokenRedirect() is called
5. App redirects (it does not prompt the user again, it just disrupts the login flow with an extra redirect)
6. acquireTokenSilent() returns the accessToken

Expected behavior

After acquireTokenRedirect() returns, acquireTokenSilent() should return the cached accessToken rather than trying to renew the session in a hidden iFrame.

FYI this line: console.log('MSAL account from inside acquireToken() ', msalApp.getAccount()) returns the expected account.

Browsers

lates Chrome for Mac and Safari