My auth guard not working as expected


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) {
        apiEndPoint + "/auth",
        { email, password },
        { responseType: "text" }
        res => {
, res).then(() => {
        ex => {

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 {
    private authService: AuthenticationService,
    private router: Router
  ) {}
  canActivate() {
    if (!this.authService.isAuthenticated()) {
      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