TypeError: Cannot read property 'email' of undefined

@sort wrote:

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

Posts: 1

Participants: 1

Read full topic