MSAL (Angular) popup login

I'm facing an issue with MSAL in Angular. I'm using the @azure/msal-angular package (version 1.1.1).

I'm working on an Angular app embedded in an ERP system (Business Central). At the moment i'm facing issues with authentication.

Below an overview of the components.

Business central is embedding the Angular app by referencing the Angular dist files from Azure blobstorage.

When logging in, there is no way the login provider can redirect back to the Angular app, since it's embedded in Business Central, and there is no public url to call a route in Angular itself when embedded.

So what I did was hosting the Angular application on a public endpoint and in the embedded app, use the external application to redirect back after authentication. I have used another library to support authentication this way, and when using a popup for authentication I redirected to a plain HTML page with a couple lines of JavaScript to retrieve the access_token / id_token from the url segments. After retrieval, I called (window.opener || window.parent).postMessage(message, "*"); to notify the parent window of the authentication result.

But now I'm having issues with MSAL. When running the Angular application just local, with redirectURL https://localhost:4200/ the authentication process works just fine. But when changing this to that external hosted Angular application (Same version) it show a popup with the application (after redirect) with JWT's in the url segments. And MSAL is not reacting on this result. I think because the domain of the popup is different than the parent window.

Is there a way to fix this (complicated) way of authentication with MSAL?

Okay, so it turns out that MSAL does not currently support CORS popup login out of the box by design since this is a potential security risk.

According to my post on GitHub this is verified. https://github.com/AzureAD/microsoft-authentication-library-for-js/issues/2320

So I had to change things a little to make it work. Instead of embedding the application completely (natively download all application source files and appending them to elements in the ERP system), I now load the complete Angular app in an iframe on the page. This way the popup remains on the same domain as the iframe and the problem does not occur.

At first I thought it was not possible to send events from Angular to BC and vice-versa. But I was wrong. This is completely possible since you always have a parent window.

So this was the solution to my problem.