How do I know that I already single sign-on in angular application?

Question

I use https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/lib/msal-angular/docs/v2-docs/configuration.md to setup a single sign-on in angular. So if I click the sign in button then I can login.

My question is that if in other place I already login with my company's credentials so I don't need to login again in the angular application. How my angular application knows I already signed? Therefore I don't need navigation to login component and click sign in button again?

Answer 1

The msal-browser library provides the following APIs to access cached accounts:

• getAllAccounts(): returns all the accounts currently in the cache. An application must choose an account to acquire tokens silently.
• getAccountByHomeId(): receives a homeAccountId string and returns the matching account from the cache.
• getAccountByLocalId(): receives a localAccountId string and returns the matching account from the cache.
• getAccountByUsername(): receives a username string and returns the matching account from the cache.

[ ... snip ... ]

The current msal-browser default sample has a working single account scenario.

Source: Accounts in MSAL Browser.

Part of that example code:

const myMSALObj = new msal.PublicClientApplication(msalConfig);

myMSALObj.handleRedirectPromise().then(handleResponse).catch(err => {
    console.error(err);
});

function handleResponse(resp) {
    if (resp !== null) {
        accountId = resp.account.homeAccountId;
        myMSALObj.setActiveAccount(resp.account);
        showWelcomeMessage(resp.account);
    } else {
        const currentAccounts = myMSALObj.getAllAccounts();
        if (!currentAccounts || currentAccounts.length < 1) {
            return;
        } else if (currentAccounts.length === 1) {
            const activeAccount = currentAccounts[0];
            myMSALObj.setActiveAccount(activeAccount);
            accountId = activeAccount.homeAccountId;
            showWelcomeMessage(activeAccount);
        }
    }
}