Redirection is not working when two angular apps are involved

[jineshataltera]

Core Library

MSAL.js (@azure/msal-browser)

Core Library Version

3.20.0

Wrapper Library

MSAL Angular (@azure/msal-angular)

Wrapper Library Version

3.0.23

Public or Confidential Client?

Public

Description

Hello everyone,

I’m currently facing an issue with the login workflow implementation using MSAL-Angular in a scenario involving two Angular applications. My goal is to create a wrapper for Angular client applications so they don't need to manually implement all the MSAL logic.

Here’s what I’ve done so far:

• I’ve created an Angular library that initializes the MsalModule and MsalService.
• This library includes a component that calls the loginRedirect() method within its ngOnInit.
• I’ve developed another Angular app that serves as a client for this library.
• In this client app, there’s a login button that triggers the rendering of the library component.
• Upon clicking the login button, the library component renders successfully and redirects to the ADFS login page.
• Up to this point, everything works as expected.
• However, after entering my credentials on the ADFS login page, although the login is successful, the redirection back to my Angular client application (running on http://localhost:4200) does not occur. It stops once it reaches to auth code endpoint with #code & #state attribute.
• I have specified the above URL as the redirectUri in the configuration and set navigateToLoginRequestUrl to false in the Angular library.

Any assistance or suggestions on resolving this issue would be greatly appreciated!

Thank you in advance for your help.

Error Message

No response

MSAL Logs

No response

Network Trace (Preferrably Fiddler)

• Sent
• Pending

MSAL Configuration

auth: {
          clientId: '{CLIENT_ID}',     
          authorityMetadata: '{METADATA}'
          redirectUri: 'http://localhost:4200',
          navigateToLoginRequestUrl: false,
        },
        cache: {
          cacheLocation: "localStorage",
          storeAuthStateInCookie: isIE,
        },

Relevant Code Snippets

auth: {
          clientId: '{CLIENT_ID}',     
          authorityMetadata: '{METADATA}'
          redirectUri: 'http://localhost:4200',
          navigateToLoginRequestUrl: false,
        },
        cache: {
          cacheLocation: "localStorage",
          storeAuthStateInCookie: isIE,
        },

Reproduction Steps

1. I’ve created an Angular library that initializes the MsalModule and MsalService.
2. This library includes a component that calls the loginRedirect() method within its ngOnInit.
3. I’ve developed another Angular app that serves as a client for this library.
4. In this client app, there’s a login button that triggers the rendering of the library component.
5. Upon clicking the login button, the library component renders successfully and redirects to the ADFS login page.
6. Up to this point, everything works as expected.
7. However, after entering my credentials on the ADFS login page, although the login is successful, the redirection back to my Angular client application (running on http://localhost:4200) does not occur. It stops once it reaches to auth code endpoint with #code & #state attribute.
8. I have specified the above URL as the redirectUri in the configuration and set navigateToLoginRequestUrl to false in the Angular library.

Expected Behavior

After successful login, redirection should be done to my angular client application with token response.

Identity Provider

ADFS

Browsers Affected (Select all that apply)

Chrome, Firefox, Edge, Safari, Other

Regression

No response

Source

Internal (Microsoft)