Title: Ionic - The Email Address is Badly Formatted
Tags: angular;firebase;ionic-framework;firebase-authentication
Question: I am working on an ionic project where I am using firebase as back-end and I am building a signup and login form. Whenever I sign up the code is working well and. When I try to retrieve it using "```signInWithEmailAndPassword```" I am getting the following error. The email address is badly formatted Firebase. When first time created account log in successfully. But after login with same email and password error occur.

```import { Component, ViewChild} from '@angular/core';
import { IonicPage, NavController, AlertController,  NavParams } from 'ionic-angular';
import { AngularFireAuth } from 'angularfire2/auth';
import { HomePage } from '../home/home';


@IonicPage()
@Component({
 selector: 'page-signin',
 templateUrl: 'signin.html',
})

export class SigninPage {

 @ViewChild('email') email;
 @ViewChild('password') password;

constructor(public alertCon: AlertController, public afAuth: AngularFireAuth, public navCtrl: NavController, public navParams: NavParams) {
}

    ionViewDidLoad() {
      console.log('ionViewDidLoad SigninPage');
    }

   alert(title, message){
    this.alertCon.create({
    title: title,
    subTitle: message,
    buttons: ['OK']
  }).present();
  }

  userSignin(){
  this.afAuth.auth.signInWithEmailAndPassword(this.email.value, this.password.value)
 .then(data=&gt;{
  console.log('loged in');
  this.navCtrl.setRoot(HomePage);
  this.alert('WELCOME', 'You are loged in');
})
 .catch(error=&gt;{
  console.log('Error', error)
  this.alert('ERROR!', 'password or Email is wrong');
  });
 }

}
```

Comment: Where is the code you use to sign in a user?

Comment: Sorry!! My mistake..
I have edited post.


Here is another answer: I suggest you create a User model in a separate folder. 
define the User model with the following way: 

export interface User{
    id?: string
    email: string; 
    password:string;  

}

Then create a new obj of the User Model in LogIN ts file provided you have imported the model in the login ts file.

  user= {} as User;

You can make your login function
loginUser(user:User){    this.logauth.auth.signInWithEmailAndPassword(user.email,user.password);

}

Angular works better if data is passed in an object rather than a property.
So the User Model in this aspect will hold the user data from the login html page and pass to the object in the  Login TS File. Hope this helps. 

Comment for this answer: i Suggest you create a User Model, in a model folder.  export interface User{  
 id?: string;
 username: string; 
 email: string; 
 password:string;  
  roles: Roles; 

}
Comment for this answer: can you explain yourself better and  add some format to your code example ?

{'source': 'StackExchangeDataset', 'subset': 'stackoverflow.com', 'metadata': {'AnswerCount': 1, 'CommentCount': 2, 'ContentLicense': 'CC BY-SA 3.0', 'CreationDate': '2018:00:03/29/18', 'FavoriteCount': None, 'PostTypeId': 1, 'Tags': '<angular><firebase><ionic-framework><firebase-authentication>', 'Title': 'Ionic - The Email Address is Badly Formatted', 'ViewCount': 1232, 'id': 49548911, 'user_AboutMe': '', 'user_AccountId': 10430836.0, 'user_DisplayName': 'Chamith', 'user_Reputation': 71.0, 'user_Views': 16.0, 'user_id': 9147619.0}}