How to prevent msal-angular from automatic redirection to login page

Issue

I am using msal-angular in my Angular project. I want to display a custom login page (kind of landing page) before redirecting to https://login.microsoftonline.com. My code is based on offical example.

I am not protecting my custom login page with any guard:

const routes: Routes = [
  {
    path: '',
    component: HomeComponent,
    canActivate: [authGuard]
  },
  {
    path: 'login',
    component: LoginComponent
  }
];

When I am not signed-in, I can see the login page for about 1 second, then I am automatically redirected to MS login page and this is what I want to avoid.

When I remove MsalRedirectComponent from bootstrap section in app.module.ts:

bootstrap: [AppComponent, MsalRedirectComponent]

the redirection is not being triggered, but then, when clicking on login button in my login page I get following error:

ERROR Error: Uncaught (in promise): BrowserAuthError: uninitialized_public_client_application: You must call and await the initialize function before attempting to call any other MSAL API

login() in LoginComponent:

login(): void {
    if (this.msalGuardConfig.authRequest) {
        this.authService.loginRedirect({...this.msalGuardConfig.authRequest} as RedirectRequest);
    } else {
        this.authService.loginRedirect();
    }
}

Solution for above error was to add following lines when initializing the component:

this.authService.initialize().subscribe();
this.authService.handleRedirectObservable().subscribe();

After adding them, the error is gone but I'm again being redirected automatically. Is there a way to NOT trigger redirection automatically but programatically on button click?

Solution

I was able to resolve that, so will share the solution.

MSAL interceptor triggers a redirection or popup when a request to protected resource is sent. Protected resources are configured within MSALInterceptorConfigFactory:

export function MSALInterceptorConfigFactory(): MsalInterceptorConfiguration {
  const protectedResourceMap = new Map<string, Array<string>>();
  protectedResourceMap.set("/api/*", ["user.read"]);

  return {
    interactionType: InteractionType.Redirect,
    protectedResourceMap,
  };
}

In my case a request was sent despite the fact that the user was not logged in yet, what caused the redirection.

Answered By - Kamil