TypeError: Cannot read property 'email' of undefined

Ionic Framework ionic-v3
1

Hi,

I created a project with firebase. A user was created successfully by email and password. Now, i am trying to login with this email and password but It is not logging and gives an error in the console.

TypeError: Cannot read property 'email' of undefined
    at LoginPage.<anonymous> (login.ts:28)
    at step (main.js:96)
    at Object.next (main.js:77)
    at main.js:71
    at new t (polyfills.js:3)
    at webpackJsonp.101.__awaiter (main.js:67)
    at LoginPage.webpackJsonp.101.LoginPage.login (login.ts:26)
    at Object.eval [as handleEvent] (LoginPage.html:12)
    at handleEvent (core.es5.js:11914)
    at callWithDebugContext (core.es5.js:13206)

login.ts

import { Component } from '@angular/core';
import { AlertController, App, LoadingController, NavController, IonicPage } from 'ionic-angular';
import { SignupPage } from '../signup/signup';
import { AngularFireAuth } from "angularfire2/auth"
import { User } from "../../models/user";
import { DerslerPage } from '../dersler/dersler';

@IonicPage()
@Component({
  selector: 'login',
  templateUrl: 'login.html',
})
export class LoginPage {

  public loginForm: any;
  

  user = {} as User;

  constructor(private afAuth: AngularFireAuth,
    private navCtrl: NavController, public loadingCtrl: LoadingController, public alertCtrl: AlertController, public app: App) {

  }
    
  async login(user: User) {
    try {
      const result = this.afAuth.auth.signInWithEmailAndPassword(user.email, user.password);
      if (result) {
        this.navCtrl.setRoot(DerslerPage);
      }  
    }
    catch (e) {
      console.error(e);
    }
  }
}

login.html

<ion-content padding class="transparent-header">
  <ion-header>
  </ion-header>
  <div padding>
    <ion-item>
      <ion-input type="text" [(ngModel)]="user.email" placeholder="Email"></ion-input>
    </ion-item>
    <ion-item>
      <ion-input type="password" [(ngModel)]="user.password" placeholder="Password" ></ion-input>
    </ion-item>
    <button ion-button block outline (click)="login()" color="light" class="login-button">Login</button>
  </div>
  <div class="strike">
    <span>OR</span>
  </div>
  <button ion-button block clear (click)="login()" color="light" class="login-button"><ion-icon name="logo-facebook"></ion-icon> Login with Facebook</button>
  <button ion-button block clear (click)="login()" color="light" class="login-button"><ion-icon name="logo-googleplus"></ion-icon> Login with Google</button>
</ion-content>
<ion-footer>
  <ion-toolbar class="footer">
    <div (click)="goToSignup()">
      <span>Don't have an account? <strong>Sign up here</strong>.</span>
    </div>
  </ion-toolbar>
</ion-footer>

login.module.ts

import { LoginPage } from './login';
import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';

@NgModule({
    declarations: [
        LoginPage,
    ],
    imports: [
        IonicPageModule.forChild(LoginPage),
    ],
    exports: [
        LoginPage
    ]
})

export class LoginPageModule { };

What may be the problem?

Thanks

2

async/await is a bad fit for AngularFire, which is Observable-based. If you change your code to use Observables and FirebaseObjectObservables, etc., you’ll probably find the problem…

3 Likes
3

Thank you for your response

What does it mean changing the code to use observables and FirebaseObjectObservables?

4

You’re login.ts file contains a function login(user :User). From that object, you request the email value.
In your HTML file, you call the function login(), but without the user object. The login function is executed, but you are now requesting an email value, of an undefined object, because you didn’t provide one. Change
login() to login(user).

1 Like
5

Oh yeah, you are right. I couldn’t see it.

It worked for me. Thanks

6

I’m getting error as

image
image.png898Ă—484 31.2 KB

my login.ts contains

image
image.png826Ă—477 16.1 KB

My home.ts is as
image

Please help me out