acquireTokenPopup, add support for an existing popup window to avoid browser popup blocking when acquiring tokens for multiple resources

[mfalkus]

Core Library

MSAL.js (@azure/msal-browser)

Wrapper Library

Not Applicable

Public or Confidential Client?

Public

Description

When an application needs one-off user tokens for two separate resources (e.g. Microsoft Graph and the Teams PowerShell API / api.interfaces.records.teams.microsoft.com), the current API requires two separate acquireTokenPopup calls, because OAuth does not allow tokens for multiple resources in a single request.

This reliably triggers browser popup blocking on the second call (as only one popup is allowed synchronously within a user action handler like a button click).

Suggested solution is to add an optional popupWindowHandle?: Window field to PopupRequest.

When provided, PopupClient would skip openSizedPopup() and use the supplied window instead. This lets the application open a single popup synchronously on the user action/button click, then reuse it across sequential token acquisitions.

    // User clicks button — open popup here, inside the gesture handler
    const popupWindow = openMyPopup();
    
    // First token — pass the pre-opened window
    const graphResponse = await msalInstance.acquireTokenPopup({
      scopes: ['https://graph.microsoft.com/Directory.ReadWrite.All'],
      popupWindowHandle: popupWindow
    });
    
    // Second token — reuse the same window (no new popup opened)
    const teamsResponse = await msalInstance.acquireTokenPopup({
      scopes: ['https://api.interfaces.records.teams.microsoft.com/user_impersonation'],
      popupWindowHandle: popupWindow,
      loginHint: graphResponse.account.username
    });

PopupParams already can take an existing popup object, so the change is hopefully simple and small, just exposing that capability from PopupRequest type.

The aim would be to allow:

• One popup window, reused for sequential token acquisitions
• No browser popup blocking on the second (or subsequent) requests
• No change to existing behaviour when popupWindowHandle is not supplied

[tnorling]

You can handle consent for multiple resources in a single popup by using the extraScopesToConsent parameter. The acquireTokenPopup call will return the token for the scopes specified under scopes and allow you to then call acquireTokenSilent for the 2nd set of scopes without the need for a second popup flow.

[mfalkus]

Thanks @tnorling , I hadn't spotted extraScopesToConsent and that does solve part of my challenge.

In some cases we need the user to give admin_consent to a backend app, then we need a one-off user-delegated token for some extra scope (e.g. RoleManagement.ReadWrite.Director in Graph). This scenario is also a double pop-up for us at the moment which could be solved with the suggested change to pass in an existing pop-up context. I appreciate it's maybe not a super common scenario.