Angular MsalGuard for Authentication and written own Guard for Authorize, Need to wait for authentication first

Question

I have an application where there are two guards (MsalGuard - for Authentication, AuthGuard - written own code to authorize whether the user is having access to that particular page). Using the lazyloading while loading the modules. Please find the below-mentioned code

app-routing.module.ts

      { 
        path: 'administration',
        loadChildren: () => import('./administration/administration.module').then(m => 
        m.AdministrationModule),
       // loadChildren: './administration/administration.module#AdministrationModule',
       canActivate: [MsalGuard],
      },

administration-routing.module.ts

           path: '',
    //canActivate: [AuthGuard],
    component: AdministrationComponent,

       children: [
         {
           path: 'user-admin/user-list',
           children: [
              { path: '', component: UserListComponent, canActivate: [AuthGuard] },
              { path: 'user-creation', component: UserCreationComponent, canActivate: [AuthGuard] },
           ]
         },

auth.guard.ts

     canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
        const currentUser = this.authenticationService.currentUserValue;
        if (currentUser) {
            return this.hasAdminAccess(state, currentUser);
        } 
        this.router.navigate(['/login'], { queryParams: { returnUrl: state.url } });
        return false;
    }

Here the main issue it is working as expected if we logged once and able to authorize accordingly.. but in case If I cleared the total cache and opening one of the component page directly then it is asking MsalAuth and providing the details but by that time AuthGuard might be executed and user details are empty and it is opening the page without authorization.

Answer 1

I solved it finally by checking the login process in the canactivate of my own guard:

export class UserGuardService {
    
constructor(private userSrv: EmployeeService, private msalBroadcastService: MsalBroadcastService) { }
    
      canActivate(next: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean {
        return this.msalBroadcastService.inProgress$
        .pipe(
          filter((status: InteractionStatus) => status === InteractionStatus.None)
          )
        .pipe(() => {
          //Getting the user from the service, this needs accesstoken first, so msal need to be completed
          return this.userSrv.getUser().pipe(
            filter(user => !!user),  // Filter NULL value here before sending object further
            map(user => {
              let hasRights = true;
              //Check on roles
              return hasRights;
            }));
        });
      }
    }

So then you are sure its called after the login process completes!