[Feature Request] Allow for login popup to be refocused

[taurheim]

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)

[ghost]

This issue requires attention from the MSAL.js team and has not seen activity in 5 days. @sameerag please follow up.

[tnorling]

@taurheim Thanks for the suggestion! We'll add this to our backlog to investigate. To help provide a bit more detail, what are you expecting each API call to return in this case? Are you expecting both invocations of loginPopup to return the result? Or is it acceptable for the 2nd call to continue to throw interaction_in_progress as long as it refocuses the popup first? What about if the two popup calls are made with different request parameters? What then?

[sameerag]

cc @EmLauber

[taurheim]

Hi @tnorling, good questions :)

I don't think we have an expectation of what the API would look like - for our use case the approach you describe would work (throw interaction_in_progress but still focus the window)

[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();
  }
}