HttpClient post returns true, but component subscribe function is false

Question

I am trying to log in from a button. I have template input fields with two-way binding to set the string values of username and password. By event binding, the login button triggers a login() method. This login method creates a local Credential object which absorbs the username and password. The Credential object is passed to the HttpClient service method. The service method hits the backend endpoint, and a boolean is passed back which indicates whether the credentials are in the database.

In the component class, the service method is subscribed to, and - as I interpret it - during the subscription, a loginSuccess boolean is assigned the value that the service method returns. Except... my understanding of this must be wrong because this is not happening in the order I would expect.

login.component.ts

export class LoginComponent implements OnInit, OnDestroy {
  // credential: Credential;
  username: string;
  password: string;
  user: User;
  loginMessage: string = "";
  loginSuccess: boolean = false;
  userSubscription: Subscription;

  constructor(private userService: UserService) { }

  ngOnInit(): void {
  }
  ngOnDestroy(): void {
    // this.userSubscription.unsubscribe();
  }

  login(): void {
    if(this.username != null){
      var credential: Credential = { username: this.username, password: this.password };
      
      this.userService.authenticateCredential(credential).subscribe(subscribeCheck => { 
        this.loginSuccess = subscribeCheck;
        console.log("mark 04: loginSuccess = " + this.loginSuccess);
      });
      console.log("mark 13: loginSuccess = " + this.loginSuccess);
    }
    console.log("mark 14: loginSuccess = " + this.loginSuccess);

    if(this.loginSuccess){
      console.log("mark 24");
      this.userService.getUser(credential).subscribe(subscriptionUser => {
        this.user = subscriptionUser;
      });
        this.loginMessage = "";
    } else {
      console.log("mark 25");
      this.loginMessage = "LOGIN FAILURE!!!";
    }
  }
}

The console shows that because the order of execution is not what I expect, the login fails. The boolean variable loginSuccess always is false when it encounters the if() conditional because the if() conditional is always executed before loginSuccess is assigned by the HttpClient observable. Why does this happen? How can I fix it?

Answer 1

Your check of if(this.loginSuccess){ should be inside the subscribe. and you're right the order here matters.

export class LoginComponent implements OnInit, OnDestroy {
      // credential: Credential;
      username: string;
      password: string;
      user: User;
      loginMessage: string = "";
      loginSuccess: boolean = false;
      userSubscription: Subscription;
    
      constructor(private userService: UserService) { }
    
      ngOnInit(): void {
      }
      ngOnDestroy(): void {
        // this.userSubscription.unsubscribe();
      }
    
      login(): void {
        if(this.username != null){
          var credential: Credential = { username: this.username, password: this.password };
          
          this.userService.authenticateCredential(credential).subscribe(subscribeCheck => { 
            this.loginSuccess = subscribeCheck;
            if(this.loginSuccess){
               console.log("mark 24");
               this.userService.getUser(credential).subscribe(subscriptionUser => {
                  this.user = subscriptionUser;
               });
              this.loginMessage = "";
            } else {
               console.log("mark 25");
               this.loginMessage = "LOGIN FAILURE!!!";
            }
            console.log("mark 04: loginSuccess = " + this.loginSuccess);
          });
          console.log("mark 13: loginSuccess = " + this.loginSuccess);
        }
        console.log("mark 14: loginSuccess = " + this.loginSuccess);
    
        
      }
    }