Calling canActivate function of all providers implementing CanActivate in Angular

Question

I created a .NET DLL I want to use together with an Angular UI implementation. The DLL offers some basic operations such as job monitoring. I also implemented some basic authentication that provides http only cookies when logging in but this can be used or not, depending on the project's specs. We have certain projects that will use MSAL ENTRA to authenticate users and some projects that will use our basic implementation to do that. I implemented the AuthGuard in my library that it's used to allow access to routes for the authentication implemented in the DLL. I don't want my library to be dependent on the MSAL so I need a way to check in my AuthGuard provided in the library if the user is authenticated if the main application is using MSAL.

In order to avoid circular dependency I have a service that provides all the implementations of CanActivate and CanActivateChild interfaces except for my AuthService. When logging them it appears that the services are there, both MsalGuard and my AuthGuard.

export const CanActivateToken = new InjectionToken<CanActivate>('CanActivate');export const CanActivateChildToken = new InjectionToken<CanActivateChild>('CanActivateChild');

@Injectable({providedIn: 'root'})export class AuthGuardProviderService {private static canActivateServices: CanActivate[] | undefined;private static canActivateChildServices: CanActivateChild[] | undefined;

public static get thirdPartyCanActivateServices(): CanActivate[] | undefined {return AuthGuardProviderService.canActivateServices?.filter(x => x.constructor.name != AuthGuard.name);}

public static get thirdPartyCanActivateChildServices(): CanActivateChild[] | undefined {return AuthGuardProviderService.canActivateChildServices?.filter(x => x.constructor.name != AuthGuard.name);}

constructor(@Inject(CanActivateToken) _canActivateServices: CanActivate[],@Inject(CanActivateChildToken) _canActivateChildServices: CanActivateChild[]) {AuthGuardProviderService.canActivateServices = _canActivateServices;AuthGuardProviderService.canActivateChildServices = _canActivateChildServices;}}

I am calling the canActivate method in my AuthGuard.canActivate() method for all implementations but I have no idea how to get the result. It seems the canActivate method returns a MaybeAsync<GuardResult> value...

canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {console.log(AuthGuardProviderService.thirdPartyCanActivateServices);


let canActivate: boolean = true;
AuthGuardProviderService.thirdPartyCanActivateServices?.map(x => {
  if (!x.valueOf()) {
    canActivate = false;
  }
});

if (canActivate && this.authService.hasAccessCredentials) {
  // authorised so return true
  return true;
}

// not logged in so redirect to login page with the return url
this.router.navigate([`${NavBarService.LOGIN_PATH}`], { queryParams: { returnUrl: state.url } });
return false;
}

If this is the wrong approach can you point me in the right way?

Thanks.