AngularFire Login Auth Error

Question

I am trying to setup the login for users on our website. Users can sign up and the db collects their email and password, but I cannot verify the login email or password. More details below..

Here is the login component:

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)
    }

}

Here is the 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>

Here is the error message:

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

Please let me know if you need more information. If you would like to view the project in our GitHub directory, please follow this link.

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

We are always looking for help!

Answer 1

The issue is your event handler (i.e., login()) has no parameters specified, but login requires the email and password passed in as parameters. In this case, the email and password are passed as undefined to signInWithEmailAndPassword(), resulting in the runtime error you observed.

To solve the issue, you could either update your template to pass in the email and password values:

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

Or you could update login to read the form values imperatively:

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