[Bug]: `authorizeWithPopUp` breaks on blocked popups

[marklagendijk]

Version

18.0.1

Please provide the exception or error you saw

When popups are blocked by the browser the following error happens, as expected.

[ERROR] {{configId }} - Could not open popup

However, when the user then allows the popup:

1. The login flow completes successfully in the popup.
2. The popup remains open.
3. The calling code does not continue (the observable does not complete, neither with success nor error).

Steps to reproduce the behavior

Call authorizeWithPopup and log on next, error and complete:

this.oidcSecurityService.authorizeWithPopUp().subscribe({
  next: (response) => {
    console.log("Authentication success");
  },
  error: (error) => {
    console.log("Authentication error", error);
  },
  complete: () => console.log("Authentication complete"),
});

• Open the page in the browser and make sure that popups are blocked.
• Note that the popup error from the browser appears in the console.
• Note that Authentication error does not appear in the console.
• Allow the popup.
• Note that no success, error or complete message appears in the console.
• In Firefox the popup will now open and complete the authentication, and show the application in the popup, while the main window remains broken. In Chrome allowing does not open the popup, but the user needs to reload the page.

A clear and concise description of what you expected to happen.

I would expect that either an error would be returned as soon as opening the popup fails (by opening the popup in a try ... catch), or that the user allowing the popup would result in a normal successful login flow.

I believe the code is simply lacking a try ... catch. I would propose adding that and returning an error in the case of the popup being blocked. Application developers can then show an page that explains to the user that they need to allow popups in order for the application to function.