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

Question

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?

MSAL.js does not directly support Outlook authentication, you can Use NAA for SSO, , Check for NAA Support and Obtain Access Token — Rukmini
– Rukmini, Commented Oct 22, 2024 at 11:56
Thanks for the info. I'll look into that. Had hoped I could use an OBO flow for both situations. — Hielke Hoeve
– Hielke Hoeve, Commented Oct 24, 2024 at 18:35
You can if you have enough reputation. If you can't I can copy it to an answer, but that won't give you reputation. — Hielke Hoeve
– Hielke Hoeve, Commented Oct 25, 2024 at 19:25

Rukmini · Accepted Answer · 2024-10-28 06:40:03Z

2

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.

answered Oct 28, 2024 at 6:40

Rukmini

17.7k2 gold badges9 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Hielke Hoeve Dec 12, 2024 at 12:17

I'm getting a msal:acquireTokenFailure -PERSISTENT_ERROR when I call acquireTokenSilent(). Any ideas?

Rukmini Dec 12, 2024 at 12:21

Please post a new question with all the details and paste the link here will help you:)

Hielke Hoeve Dec 12, 2024 at 12:30

stackoverflow.com/questions/79275112/…

Rukmini Dec 12, 2024 at 12:30

Sure will check

Collectives™ on Stack Overflow

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

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related