msal v3 - navigateToLoginRequestUrl true does not wait for logic performed in redirectUri component before navigating to previous page

[ac-ih]

Core Library

MSAL.js (@azure/msal-browser)

Core Library Version

3.13.0

Wrapper Library

MSAL Angular (@azure/msal-angular)

Wrapper Library Version

3.0.16

Public or Confidential Client?

Public

Description

I am using the recommended redirect approach (as mentioned here / Angular 15 sample)

My auth config looks like:

auth: {
  authority: `https://login.microsoftonline.com/${tenantId}`,
  clientId: `${clientId}`,
  redirectUri: '/auth/callback',
  postLogoutRedirectUri: '/logout/success',
  navigateToLoginRequestUrl: true
}

This works as expected. However, when I want to add some logic in the component connected to the redirectUri (aka callback component), then it initiates the call, does not wait for it, and redirects to the previous page. If I set navigateToLoginRequestUrl to false, then it waits on the redirectUri-connected component, but I lose the previous page info/functionality.

There's somewhat of a lack of control due to MsalGuard triggering logic redirect for the user, and the provided RedirectComponent is handling things.

Is there an option to override or passthrough the redirectUri path within the callback component so custom logic can be done?

Error Message

No response

MSAL Logs

No response

Network Trace (Preferrably Fiddler)

• [ ] Sent
• [ ] Pending

MSAL Configuration

{
  auth: {
    authority: `https://login.microsoftonline.com/${tenantId}`,
    clientId: `${clientId}`,
    redirectUri: '/auth/callback',
    postLogoutRedirectUri: '/logout/success',
    navigateToLoginRequestUrl: true
  }
}

Relevant Code Snippets

// routes
const routes: Route[] = [
  { path: 'auth/callback', component: AuthCallbackComponent },
  { path: 'logout/success', component: LogoutSuccessComponent },
  { path: 'home', component: HomeComponent, canActivate: [MsalGuard] },
  { path: 'resource', component: ResourceComponent, canActivate: [MsalGuard] },
  { path: '', redirectTo: 'home', pathMatch: 'full' }
];

// AuthCallback.component.ts

authenticateAndRedirect() {
  this.authService.someMethod().subscribe({
    next: (apiResponse: any) => {
      // do stuff

      // logic: if not base url, redirect user back to prev page; else redirect based 
      const calculatedRedirectUrl = `{}`
      this.router.navigate([calculatedRedirectUrl]);
    },
    error: () => {
      this.router.navigate(['/error']);
    }
  });
}

Reproduction Steps

Try to add some api call logic in the component connected to the redirect path (aka callback component)

Expected Behavior

Is there an option to override or passthrough the redirectUri path within the callback component so custom logic can be done?

Identity Provider

Entra ID (formerly Azure AD) / MSA

Browsers Affected (Select all that apply)

Other

Regression

No response

Source

Internal (Microsoft)

[tnorling]

This is the type of use case where you should consider not using our prebuilt components. In other words, don't use RedirectComponent and instead invoke handleRedirectPromise yourself. You can then do your custom logic and then invoke handleRedirectPromise to send you back to your original route.

[microsoft-github-policy-service[bot]]

@ac-ih This issue has been automatically marked as stale because it is marked as requiring author feedback but has not had any activity for 5 days. If your issue has been resolved please let us know by closing the issue. If your issue has not been resolved please leave a comment to keep this open. It will be closed automatically in 7 days if it remains stale.