SSO between different apps not working when trying using loginhint

Question

I am using MSAL.js v2 with Angular 11

I have an application where I already signed in , I am using the same configuration like below

    clientId: environment.clientId,
    authority: b2cPolicies.authorities.signUpSignIn.authority,
    knownAuthorities: [b2cPolicies.authorityDomain],
    redirectUri: environment.redirectUri,
    
    The requirement is to implement single signon when I loggedin to application1 and when trying to open application2, application 2 should get all the account details with asking to sign in again
This below code snippet I am using in application2 to check if user is already logged in in the browser or not   

console.log( this.authService.instance.getActiveAccount()). // This is returning null

    const SsoSilentRequest = {
      loginHint: '******@gmail.com' // I have added my static mail id which i used to login in application1
        }

Note : I even tried by providing domainHint and scopes also in above param

      this.authService.instance.ssoSilent(SsoSilentRequest).then((res) => {
        console.log(res)
    }).catch(error => {
        console.error("Silent Error: " + error);
    });

But I am getting below error BrowserAuthError: monitor_window_timeout: Token acquisition in iframe failed due to timeout. For more visit: aka.ms/msaljs/browser-errors.

Answer 1

Hello, by default MSAL stores it's cache per tab. To enable SSO accross tabs you need to set the MSAL cache to localStorage:

const config = {
  auth: {
    clientId: "1111-2222-3333-4444-55555555",
  },
  cache: {
    cacheLocation: "localStorage",
  },
};

const msalInstance = new msal.PublicClientApplication(config);

Regaring the monitor_window_timeout error take a look to the documentation for how to mitigate it.

Let us know if you need additional assistance. If the answer was helpful, please accept it so that others can find a solution.