My auth guard not working as expected

#1

I am trying to implement a login flow but I’m struggling trying to do this, I’m new to Angular and I have no idea how to handle global variables, not even sure if the whole app re-renders every time there’s a change somewhere (like React).

Anyways, look at my login method:

authenticationState = new BehaviorSubject(false);

login(email, password) {
    console.log("Authenticating...");
    this.http
      .post(
        apiEndPoint + "/auth",
        { email, password },
        { responseType: "text" }
      )
      .subscribe(
        res => {
          this.storage.set(TOKEN_KEY, res).then(() => {
            this.authenticationState.next(true);
          });
        },
        ex => {
          alert(ex.error);
        }
      );
  }

isAuthenticated() {
    return this.authenticationState.value;
  }

So after the form is submitted, the authenticationState value should change to truth and it does, but this does not happen in my authGuard

export class AuthGuard implements CanActivate {
  constructor(
    private authService: AuthenticationService,
    private router: Router
  ) {}
  canActivate() {
    console.log(this.authService.isAuthenticated());
    if (!this.authService.isAuthenticated()) {
      this.router.navigate(["login"]);
      return false;
    }
    return true;
  }
}

The value of isAuthenticated() in authGuard is always false (because that’s the initial value) Why is this value not changing after logging in?

Please any help is greatly appreciated