in angular v16 project I need to wait for an http response in a sync manner for a guard and other components handle the result

I’m using an AuthService into which I created a function that returns a boolean, isUserAuthenticated(): boolean. Into this function according some conditions, I need to make an http call to recover user data from backend, and according to the response, the function will return true/false to a guard or other components take the decision to redirect user to login page.

Here is my function:

isUserAuthenticated(): boolean {
  return this.checkUserAuthenticated();
}

Due to http is async I had to use async/await this way:

private async checkUserAuthenticated() {
    const token = this.sessionStorageService.getTokens();
    const user = this.sessionStorageService.getUser();
    const isUserDataOk = user.username !== '' && user.username != undefined;

    if (token != null && user.id != null && isUserDataOk) {
      this.userAuthenticated = true;
      return true;
    } else if (!isUserDataOk && user.id != null) {
      const result = await this.recoverUserData(user.id);
      if (result.body?.user != undefined) {
        this.userAuthenticated = true;
        return true;
      }
    } else {
      this.userAuthenticated = false;
      return false;
    }

    return this.userAuthenticated;
  }

Code is going through await this.recoverUserData(..) that calls the http:

private async recoverUserData(userId: string)  {
    console.log('recovering user data');

    return await firstValueFrom(
      this.http.post<LoginResponseDto>(
        AppApis.Auth.signInData, { 'userId': userId }, { observe: 'response' }
      )
    );
  }

The problem is these chain of async calls are becoming hard to manage as sync, the line of code: return this.checkUserAuthenticated(); is returning a promise<boolean> but I need a simple boolean because for example can activate guard condition is: if (authService.isUserAuthenticated()) return true.

firstValueFrom is new and it returns a promise from an observable.