Popup authentication with other domain as redirect URI than application URI

[ferryferry]

Library

• msal@1.x.x or @azure/msal@1.x.x
• @azure/msal-browser@2.x.x
• @azure/msal-angular@0.x.x
• @azure/msal-angular@1.x.x
• @azure/msal-angularjs@1.x.x

Description

I'm using MSAL in an embedded Angular app. Due to embedding, I don't have a public endpoint which is reachable from the outside (for redirect URI).

So I have hosted the application somewhere else, and after authentication (via popup) I want to retrieve the id_token and access_token from the popup. But MSAL doesn't recognize the popup came back with a result.

Examples:
I'm running the Angular app local (so not embedded in another application). And the URL is: https://localhost:4200.
The redirect URL i'm using is: https://localhost:4200. This works fine, and the app is logged in successfully.

When running local again, (https://localhost:4200) and setting the redirect URL to https://angular-host.z6.web.core.windows.net/ the popup is showing the Angular application homepage, with in the URL the right id_token / access_token params.

How do I extract those parameters and send them back to my parent window and notify MSAL that the authentication was actually successful?

[jmckennon]

When your app is running on localhost, msal will not be able to parse the response from a popup running on a different domain. msal does not support using a different domain for the redirectUri.

Does the popup flow work if the app and the redirectUri are both on the angular-host.z6.web.core.windows.net domain?

[ferryferry]

When your app is running on localhost, msal will not be able to parse the response from a popup running on a different domain. msal does not support using a different domain for the redirectUri.

Does the popup flow work if the app and the redirectUri are both on the angular-host.z6.web.core.windows.net domain?

Yes, when logging in on application and redirect-url on the same domain, it's working as expected.
But in my case this is not possible when the app is embedded (since Microsoft Business Central cannot forward that request into my Angular app).

So, I'm using the MSAL library to authenticate against microsoft-api's (main use-case is to deploy a PowerApp inside my application to a user's tenant). And the "normal" authentication in my app is working via another auth library (angular-oauth2-oidc). This library is supporting the other domain in the popup window since it's redirecting to a page which extracts the url fragment from the redirectUri and posts it via (window.opener || window.parent).postMessage(message, "*");

But I can't figure out how to let MSAL know that we have retrieved the token in that popup window

[jmckennon]

Unfortunately msal does not support CORS redirect URIs as a security consideration. We will consider supporting scenarios like this one in the future.

[ferryferry]

Okay, I understand this security concern. I changed the way my application is embedded in the other application by embedding the application in an iframe. This way the origin remains the same.

This way the login works as expected. Thanks!