msal angular - continuous reloading while authentication using MsalGuard on routing

Question

I'm trying to implement msal-v1 in my angular application to authenticate my enterprise application.

There are few routes in my application like below

const routes: Routes = [
  { path: '', component: HomeComponent, canActivate: [MsalGuard] },
  { path: 'profile', component: ProfileComponent, canActivate: [MsalGuard] },
  { path: 'search', component: SearchComponent, canActivate: [MsalGuard] }
];

and my MSAL config is like below

MsalModule.forRoot(
      {
        auth: {
          clientId: environment.clientId,
          authority: "https://login.microsoftonline.com/tenant.onmicrosoft.com/",
          validateAuthority: true,
          redirectUri: "https://example.com/",
          postLogoutRedirectUri:
            "https://example.com/",
          navigateToLoginRequestUrl: true,
        },
        cache: {
          cacheLocation: "localStorage",
          storeAuthStateInCookie: isIE, // set to true for IE 11
        },
        system: {
          logger: new Logger(loggerCallback, {
            level: LogLevel.Verbose,
            piiLoggingEnabled: true,
          }),
        }
      },
      {
        popUp: false,
        consentScopes: ["user.read", "openid", "profile"],
        unprotectedResources: ["https://www.microsoft.com/en-us/"],
        protectedResourceMap,
        extraQueryParameters: {},
      }
    )  

The issue I'm facing here is, when I try to run the domain with empty route , then authentication is working fine and then redirecting to home Component /page. From then on, I was able to redirect to all pages with out any issues.

But when I'm trying to directly open Profile/Search routes, after the authorize call, the url is entering a loop by redirecting first to https://example.com/#id_token=eyJ0eXAiOi.. . and then to https://example.com/search#id_token=eyJ0eXAiOi.. . and then entering to https://example.com/#id_token=eyJ0eXAiOi.. . again and so on.

I have also observed a console issue saying clientautherror: login_in_progress: error during login call - login is already in progress.

can anyone let me know what I might be doing wrong?

Answer 1

I have discussed the same issue in the github forum and have found a alternate solution by setting a new route without the MsalGuard but to the same HomeComponent .

const routes: Routes = [
  {
    path: '',
    component: HomeComponent,
    canActivate: [
      MsalGuard
    ]
  },
  {
    path: 'auth-redirect',
    component: HomeComponent
  },
  {
    path: 'profile',
    component: ProfileComponent,
    canActivate: [
      MsalGuard
    ]
  }
];

full details here