AngularFire Login Auth Erreur

Question

J'essaie de configurer le login pour les utilisateurs sur notre site Web. Les utilisateurs peuvent s'inscrire et la base de données collecte leurs e-mails et mots de passe, mais je ne peux pas vérifier l'adresse e-mail ou le mot de passe de connexion. Plus de détails ci-dessous ..

Voici le composant de connexion:

import { Component, OnInit } from '@angular/core'; 
import { FormGroup, FormBuilder, Validators } from '@angular/forms'; 

import { Store } from '@ngrx/store'; 

import * as fromApp from '../../../reducers'; 

import * as app from '../../../core/store/app.actions'; 

import { AngularFireDatabase } from 'angularfire2/database'; 
import { AngularFireAuth } from 'angularfire2/auth'; 
import * as firebase from 'firebase/app'; 

@Component({ 
    selector: 'app-client-login', 
    templateUrl: './client-login.component.html', 
    styleUrls: ['./client-login.component.css'] 
}) 
export class ClientLoginComponent { 

    client: FormGroup; 

    constructor(
     private _fb: FormBuilder, 
     private _afAuth: AngularFireAuth, 
     private _afDb: AngularFireDatabase, 
     private _appStore: Store<fromApp.State> 

    ) { 
     this.buildForm(); 

     // this._appStore.dispatch(new app.DisplayLoading()); 
    } 

    ngOnInit() {} 

    buildForm(): void { 
     this.client = this._fb.group({ 
     email: ['', [Validators.required, Validators.email]], 
     password: ['',Validators.required], 
     }); 
    } 

    login(email: string, password: string) { 
     return this._afAuth.auth.signInWithEmailAndPassword(email, 
     password) 
    } 

} 

Voici le code html

<div class="container-fluid"> 
<div class="row justify-content-center"> 
    <div class="col-sm-12 col-md-6"> 

     <form [formGroup]="client"> 

     <h2 class="form-signin-heading">Please login</h2> 
     <div class="form-group"> 

     <input type="text" formControlName="email" id="email" 
class="form-control" name="username" placeholder="Email Address" 
required="" autofocus="" /> 

     <input type="password" formControlName="password" id="password" 
class="form-control" name="password" placeholder="Password" 
required=""/>  

     <label class="checkbox"> 
     <input type="checkbox" value="remember-me" id="rememberMe" 
name="rememberMe"> Remember me 
     </label> 
    </div> 

     <button (click)="login()" class="btn btn-primary" 
type="submit">Login</button> 

    </form> 

    </div> 
    </div> 
</div> 

Voici le message d'erreur:

{code: "auth/argument-error", message: "signInWithEmailAndPassword failed: First argument "email" must be a valid string.", ngDebugContext: DebugContext_, ngErrorLogger: ƒ} 

S'il vous plaît laissez-moi savoir si vous avez besoin de plus d'informations. Si vous souhaitez voir le projet dans notre répertoire GitHub, veuillez suivre ce lien.

https://github.com/htobolka/nile-delivery

Nous sommes toujours à la recherche de l'aide!

Answer 1

Le problème est votre gestionnaire d'événements (c'est-à-dire, login()) n'a aucun paramètre spécifié, mais login nécessite l'adresse électronique et le mot de passe transmis en tant que paramètres. Dans ce cas, l'e-mail et le mot de passe sont passés à signInWithEmailAndPassword() sous la forme undefined, ce qui entraîne l'erreur d'exécution que vous avez constatée.

Pour résoudre le problème, vous pouvez soit mettre à jour votre modèle pour passer les valeurs e-mail et mot de passe:

<button (click)="login(client.get('email').value, client.get('password').value)" class="btn btn-primary" type="submit">Login</button> 

Ou vous pouvez mettre à jour login pour lire les valeurs du formulaire impérieusement:

login() { 
    const email = this.client.get('email').value; 
    const password = this.client.get('password').value; 
    return this._afAuth.auth.signInWithEmailAndPassword(email, password); 
}