CODEWITHSUNDEEP
javascriptangularfirebaseionic-frameworkfirebase-authentication
Stubbsie8
Stubbsie8

Reputation: 51

Firebase Authentication "auth/invalid-email" and "The email address is badly formatted."

I am trying to implement Firebase login/registration into my app using Angular and Ionic 4. I have the registration of my account working and forgetting the password working I can see the accounts in my firebase console. The issue I am having is when I try to log into that account I created. In the developer console I get https://i.sstatic.net/3wEF2.jpg :

code: "auth/invalid-email"
message: "The email address is badly formatted."

Its saying the issue lies in my tab3.page.ts:22

Here is the code from that page 

import { Component } from '@angular/core';
import { AlertController } from '@ionic/angular';
import { LoadingController, ToastController } from '@ionic/angular';
import { Router } from '@angular/router';
import { AngularFireAuth } from '@angular/fire/auth';

@Component({
  selector: 'app-tab3',
  templateUrl: 'tab3.page.html',
  styleUrls: ['tab3.page.scss']
})
export class Tab3Page {
  email: string = '';
  password: string = '';
  error: string = '';
  constructor(private fireauth: AngularFireAuth,
    private router: Router,
    private toastController: ToastController,
    public loadingController: LoadingController,
    public alertController: AlertController) {

  }


  async openLoader() {
    const loading = await this.loadingController.create({
      message: 'Please Wait ...',
      duration: 2000
    });
    await loading.present();
  }
  async closeLoading() {
    return await this.loadingController.dismiss();
  }

  login() {
    this.fireauth.auth.signInWithEmailAndPassword(this.email, this.password)
      .then(res => {
        if (res.user) {
          console.log(res.user);
          this.router.navigate(['/home']);
        }
      })
      .catch(err => {
        console.log(`login failed ${err}`);
        this.error = err.message;
      });
  }

  async presentToast(message, show_button, position, duration) {
    const toast = await this.toastController.create({
      message: message,
      showCloseButton: show_button,
      position: position,
      duration: duration
    });
    toast.present();
  }

}

I have been staring at this since Friday trying multiple different methods and guides online and every method I try I am getting this error any help would be VERY much appreciated. This code came from following this https://enappd.com/blog/email-authentication-with-firebase-in-ionic-4/38/ tutorial and even looking at his github and following it exactly I still come to this issue.

Upvotes: 3

Views: 19181

Answers (6)

Arniel Canillo
Arniel Canillo

Reputation: 1

Add some validation before to call this

this.fireauth.auth.signInWithEmailAndPassword(this.email, this.password)

make sure you validate the email before passing it through signInWithEmailAndPassword

Upvotes: 0

Jason Bennett
Jason Bennett

Reputation: 13

I'm not sure who needs to hear this but I ran into this error a few days ago using suggested text on Android. When you're finishing typing an email address it will suggest "@gmail.com" "@yahoo.com" etc...

But for some reason it adds a space when you select them resulting in "[email protected] ". That little space will result in the badly formatted error.

In flutter I was able to remedy this by adding .trim() to the end of my text to ignore the trailing whitespace: final email = _email.text.trim(); // _email is the textcontroller

Upvotes: 0

RAVI KUMAR DHAWAN
RAVI KUMAR DHAWAN

Reputation: 1

Firebase Authentication "auth/invalid-email" and "The email address is badly formatted."

Use an email format like:

[email protected]
[email protected]

Upvotes: 0

Jude Okagu
Jude Okagu

Reputation: 307

change ' ' to null.

better still update to

const [email, setEmail] = useState(null);

Upvotes: -1

Neha Shah
Neha Shah

Reputation: 1247

Here is your error type

https://firebase.google.com/docs/auth/admin/errors

Hopefully email which you are passing having issue. It should be proper string only.

Upvotes: 4

Doug Stevenson
Doug Stevenson

Reputation: 317362

From what you're showing here, email has an initial value of an empty string:

email: string = '';

And, from what I can see, it never changes value. So you're passing an empty string to signInWithEmailAndPassword, which isn't valid.

Upvotes: 3

Related Questions