[Feature Request] Allow for login popup to be refocused

Core Library

MSAL.js v2 (@azure/msal-browser)

Wrapper Library

Not Applicable

Description

Apologies if this is already supported by the library - I can’t seem to find documentation as to how it works (despite being closed as completed in #181)

This is basically the same ask as #181.

Use case

1. User clicks sign in (application calls loginPopup)
2. User accidentally or intentionally clicks on the host window, thereby hiding the login popup
3. User clicks sign in again, host application again calls loginPopup

Current behaviour Nothing happens, since a popup is already open, MSAL throws interaction_in_progress

Desired behaviour The existing window is refocused so that the user is brought back into context

Source

Internal (Microsoft)

[henrylake]

I had this same issue recently when using meal-react.

As a workaround, you can listen for the “POPUP_OPENED” event. The event returns the popup window in its payload which you can store. In your onClick handler for your sign in button, you can first check if you have a reference to the popup window and if you do, you can focus it which will bring it back to the front.

The code might look something like this:

let popupWindow = null

const callbackId = msalInstance.addEventCallback((message) => {
  if (message.eventType === EventType.POPUP_OPENED) {
    // Save the popup window for focusing later
    popupWindow = message.payload.popupWindow;
  }
});

const signInClickHandler = () => {
  // If the popup window is already open, focus it
  if (popupWindow && !popupWindow.closed && popupWindow.focus) {
    popupWindow.focus();
  } else {
    // Otherwiser open a new popup window
    msalInstance.loginPopup();
  }
}

[sameerag]

cc @EmLauber