I am trying to use aws amplify to implement login functionality in an angular app.

When I click on the "Login with Google" button, it takes me to the google login page and brings me back to my home page when I provide valid google credentials.

In my authService, I am listening to 'auth' event. So when a user is logged in, the subject "isLoggedInSub " emits a "true" value. I am trying to display the value of "isLoggedIn$" observable that is made out of this subject. But it always displays false. As you can see in my html page, I am using async pipe to display the value. Why is the value true not being displayed?

When I debug this particular flow outlined above, I do see that it hits the code where the subject emits true. ie this.isLoggedInSub.next(true);

logincomponent.html

<button (click) ="signInWithGoogle()" type="button" class="btn btn-outline-primary">Login with Google</button>    
<span>is loggedin: {{this.authService.isLoggedIn$ | async}}</span>

loginComponent.ts

async signInWithGoogle() {
    await this.authService.socialSignIn(AuthService.GOOGLE);
  }

auth.service.ts

private isLoggedInSub = new BehaviorSubject<boolean>(false);
isLoggedIn$ = this.isLoggedInSub.asObservable();

constructor() {
    Hub.listen('auth', (data) => {
      switch (data.payload.event) {
        case 'signIn':
          this.isLoggedInSub.next(true);
          break;
        case 'signOut':
          this.isLoggedInSub.next(false);
          break;
        case 'signIn_failure':
          break;
        default:
          break;
      }
    });
  }

socialSignIn(socialProvider: CognitoHostedUIIdentityProvider): Promise<ICredentials> {
    return Auth.federatedSignIn({
      provider: socialProvider,
    });
  }