Return the firebase.auth message in typescript

Question

I’m using Firebase in the back end of this login, but I’m not able to use the information that comes back from firebase.auth to check if it was an error or not and thus set the Autenticacao false or true, the msgErro turns into a json object, that I can use in html using pipe | json that shows the message that I have returned inside the error function.

Does anyone know how I access this object and get the information I need?

private usuario : Usuario = new Usuario();
private user: Observable<firebase.User>;
private verificarSenha: string;
private msgErro : any;
private autenticacao : boolean = true;

registrar(){
        if (this.verificarSenha == this.usuario.senha){
            this.register();
            //this.msgErro ? this.autenticacao = false : this.autenticacao = true;
        }
        else {
            this.msgErro = 'auth/wrong-password'
            this.autenticacao = false;
        }
    }

    register(){
        this.msgErro = firebase.auth().createUserWithEmailAndPassword(this.usuario.login, this.usuario.senha).catch(function(err : firebase.FirebaseError) {
            if (err.code){
                 if (err.code === 'auth/weak-password') {
                    return "A senha deve conter no mínimo 6 caracteres";
                }
                else if(err.code === 'auth/invalid-email'){
                    return "O email informado é invalido";
                }
                else {
                    return "O email informado ja está cadastrado";
                }
            }
        });
    }

<div class="login-page">
    <div class="form" [class.erro]="!autenticacao" >
        <div style="color: #4CAF50; margin-bottom : 20px">
            <h4>BEM VINDO AO UM HELP</h4>
            <p class="message">Por favor, insira o email e a senha que deseja usar</p>
        </div>
        <form class="login-form has-danger">
            <input [(ngModel)]="usuario.login" name="login" type="text" c placeholder="Usuario"/>
            <input [(ngModel)]="usuario.senha" name="senha" type="password" placeholder="Senha"/>
            <input [(ngModel)]="verificarSenha" name="verificar" type="password" placeholder="Repita a senha"/>
            <div class="form-control-feedback has-danger"> {{ msgErro.ya | json }} </div>
            <div *ngIf="msgErro == 'auth/wrong-password'" class="form-control-feedback has-danger">As senhas informadas não correspondem</div>
            <button (click)="registrar()">Registrar</button>
            <button>Google</button>
            <button>Facebook</button>
            <button>voltar</button>
        </form>
    </div>
</div>

Answer 1

First problem

The error message will not be returned by the createUserWithEmailAndPassword function but in callback (anonymous function created to treat the error)

Second, the msgErro variable will not be accessible through this and therefore a variable must be created in the other name (_this for example) to assign the parent object

the solution is this

register() {
      let _this = this;

               firebase.auth().createUserWithEmailAndPassword(this.usuario.login, this.usuario.senha).catch(function(err : firebase.FirebaseError) {
                    if (err.code){
                         if (err.code === 'auth/weak-password') {
                            _this.msgErro = "A senha deve conter no mínimo 6 caracteres";
                        }
                        else if(err.code === 'auth/invalid-email'){
                           _this.msgErro = "O email informado é invalido";
                        }
                        else {
                            _this.msgErro = "O email informado ja está cadastrado";
                        }
                    }
                });
            }