Using MSAL.js in Outlook Add-in with Office.js authentication

I have a SPA which is run either as standalone web app or as Outlook add-in. I want the user to be able to login using their Microsoft account. However when using the Outlook add-in I want to let Outlook provide us the user's identity (and not show a popup) and an access token as the user is already logged in.

I am trying to use features (MsalAuthenticationTemplate) of msal-react together with office.js but MSAL has no support for Outlook authentication.

I've tried to inject the Outlook access token into the MSAL cache to mimick a login but MSAL can't use the tokens.

msalInstance.initialize()
    .then(() => {
        // Account selection logic is app dependent. Adjust as needed for different use cases.
        const accounts = msalInstance.getAllAccounts()
        if (accounts.length >= 0 && msalInstance.getActiveAccount() === undefined) {
            msalInstance.setActiveAccount(accounts[0])
        } else if (isOfficeInitialized()) {
            Office.auth.getAccessToken({ allowConsentPrompt: false, allowSignInPrompt: false })
                .then(result => {
                    const token = result && jwtDecode<AzureTokenPayload>(result)

                    msalInstance.hydrateCache(payload, {}).then(() => msalInstance.setActiveAccount(account))
                })
        }
    })

I know it is possible to show an inline popup, but the user is already logged in to Outlook so that's not the solution I'm looking for.

I also tried looking for any other library but to no avail. Is there any other library capable of doing what I want?

Solution

Note that: MSAL.js does not directly support Outlook authentication.

You can use the acquireTokenSilent method to attempt to obtain a token silently.
As you want to avoid popups, check for NAA for SSO, check for NAA Support and Obtain Access Token.
Nested App Authentication (NAA) enables your add-in to utilize the user's current Outlook session to acquire an access token without requiring the user to enter their credentials again.

Check if NAA is supported in the user's Office environment using the following code:

Office.context.requirements.isSetSupported("NestedAppAuth", "1.1");

If NAA is available, you can use it to obtain the access token directly from the user's Outlook session.

Additionally, it's crucial not to try injecting tokens into the MSAL cache, as MSAL.js is built to handle its own token lifecycle. Instead, prioritize the NAA method for a smooth authentication experience.