Msal loginPopup() not working on macOS & Windows Outlook Client

Programming
, , , ,
1

I’m using MSAL library to login users in an Outlook add-in. When I call the loginPopup method on the macOS desktop client, I get the error Error opening popup window. This can happen if you are using IE or if popups are blocked in the browser.

I read this, which suggests there is no solution.

I’m thinking of using the OfficeJS library to get a token with SSO using the following code:

Office.auth.getAccessToken({
  allowConsentPrompt: true,
  allowSignInPrompt: true,
  forMSGraphAccess: true,
});

Is there a method to login silently using this token with MSAL, for example by injecting the token into MSAL and then using it to show the consent popup?

Note that I’m using MSAL to prompt all scopes in the manifest.xml. Using only the OfficeJS auth method does not prompt all permissions, as seen here.

2

The MSAL library does not provide a direct method to inject a token obtained from the OfficeJS library for silent login. However, you can achieve silent login by integrating MSAL with the OfficeJS library using the following steps:

  1. Use the OfficeJS library to obtain an access token using the getAccessToken method.
  2. Pass the obtained access token to MSAL using the acquireTokenSilent method to acquire a token silently without showing any prompts.

Here’s an example code snippet:

Office.auth.getAccessToken({
  allowConsentPrompt: true,
  allowSignInPrompt: true,
  forMSGraphAccess: true,
}, function (result) {
  if (result.status === "succeeded") {
    // Use the obtained access token to acquire a token silently with MSAL
    const loginRequest = {
      scopes: ["your-scope"],
      loginHint: result.value.upn, // Optional: provide the user's login hint
      extraQueryParameters: {} // Optional: provide additional query parameters
    };

    // Acquire a token silently
    msalInstance.acquireTokenSilent(loginRequest).then((response) => {
      // Handle the response with the acquired token
      console.log(response.accessToken);
    }).catch((error) => {
      // Handle any errors
      console.error(error);
    });
  } else {
    // Handle any errors in obtaining the access token from OfficeJS
    console.error(result.error);
  }
});

Replace "your-scope" with the actual scope you want to acquire the token for. Additionally, you can provide the user’s login hint and any additional query parameters if necessary.

Note that this approach requires proper integration and configuration of both the MSAL and OfficeJS libraries. Make sure you have the necessary dependencies and configurations in place.