Angular Service Variable comes up as undefined in component

Question

I have an app that uses firebase email/password auth to login and I want to be able to display firebase auth errors to the user if they fail login.

Ive got in my AuthService:

AuthError: string;


  login(email: string, password: string) {
    this.firebaseAuth
      .signInWithEmailAndPassword(email, password)
      .then(value => {
        console.log('Nice, it worked!');
        this.navroute.navigate(['home']);
        
      })
      .catch(err => {
        console.log('Something went wrong:',err.message);
        this.AuthError = err.message;

      });
  }

But when I assign AuthError to anther variable in my login component to display to the user it comes up as undefined.

Here is a section from my login component.ts

errorMessage: string;

submit(){
    console.log("login");
    this.email = this.LoginForm.value.inputUsername;
    this.password = this.LoginForm.value.inputPassword;

    if(this.email ==  null || this.password == null){
      this.errorMessage = "Username or password cannot be empty!";
    } else{
      this.authService.login(this.email, this.password);
      this.LoginForm.reset();
      console.log(this.authService.AuthError);
    }
  }//end submit

and the console when a user fails login shows:

login
undefined
auth.service.ts:48 Something went wrong: The email address is badly formatted.

for some reason, this.authService.AuthError is undefined in the login component, when instead what I'd like for it to do is show the same message as err.message in the AuthService.

Thanks in advance and please let me know if any additional info is needed.

errorMessage is undefined because you are checking its value even before the server sends response. — abhay tripathi
How can I check the value after the server sends a response? — Noah Lanson

Jobelle Jobelle · Accepted Answer · 2020-08-07T12:58:18

Try the below. The value in this.authService.AuthError only be available after the login , right?

  submit(){
        console.log("login");
        this.email = this.LoginForm.value.inputUsername;
        this.password = this.LoginForm.value.inputPassword;
    
        if(this.email ==  null || this.password == null){
          this.errorMessage = "Username or password cannot be empty!";
        } else{
    
          this.authService.login(this.email, this.password).subscribe(data= {
    
     console.log(this.authService.AuthError);
    });
         
         
        }
      }//

end submit

Angular Service Variable comes up as undefined in component

1 Answers