signin-formbuilder.html

<ion-header>
    <ion-navbar hideBackButton="true">
        <ion-title>Iniciar Sesión</ion-title>
    </ion-navbar>
</ion-header>

<ion-content>
    <form [formGroup]="signInForm">
        <ion-list>
            <ion-item>
                <ion-label stacked>Correo electrónico</ion-label>
                <ion-input type="email" formControlName="email" autocorrect="off" autocapitalize="none"></ion-input>
            </ion-item>

            <ion-item>
                <ion-label stacked>Contraseña</ion-label>
                <ion-input type="password" formControlName="password"></ion-input>
            </ion-item>

            <ion-item>
                <ion-label stacked>Nombre</ion-label>
                <ion-input type="text" formControlName="firstName" autocorrect="off"></ion-input>
            </ion-item>

            <div padding-left padding-right padding-top>
                <button ion-button [disabled]="!signInForm.valid" (click)="signIn()" block>Entrar</button>
            </div>
        </ion-list>
    </form>
</ion-content>

signin-formbuilder.ts

import { Component } from '@angular/core';
import { NavController, LoadingController, AlertController } from 'ionic-angular';
import { Validators, FormBuilder, FormGroup } from '@angular/forms';

import { AuthService } from '../../providers/auth-service';

import { UserModel } from '../../models/user-model';

import { SignUpPage } from '../signup/signup';
import { HomePage } from '../home/home';

@Component({
    selector: 'page-signin',
    templateUrl: 'signin.html'
})
export class SignInPage {
    private signInForm: FormGroup;

    constructor(
        public navCtrl: NavController,
        public loadingCtrl: LoadingController,
        public alertCtrl: AlertController,
        public authService: AuthService,
        private formBuilder: FormBuilder) {
        this.signInForm = this.formBuilder.group({
            email: ['', Validators.compose([Validators.required, Validators.pattern('[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,3}$')])],
            password: ['', Validators.compose([Validators.required, Validators.minLength(6)])],
            firstName: ['', Validators.required]
        });
    }

    signIn() {
        let loading = this.loadingCtrl.create({
            content: 'Iniciando sesión. Por favor, espere...'
        });
        loading.present();

        let userModel = new UserModel();
        userModel.email = this.signInForm.value.email;
        userModel.password = this.signInForm.value.email;
        userModel.firtName = this.signInForm.value.firtName;

        this.authService.signInWithEmailAndPassword(userModel).then(result => {
            loading.dismiss();

            this.navCtrl.setRoot(HomePage);
        }).catch(error => {
            loading.dismiss();

            console.log(error);
            this.alert('Error', 'Ha ocurrido un error inesperado. Por favor intente nuevamente.');
        });
    }

    signUp() {
        this.navCtrl.push(SignUpPage);
    }

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

user-model-formbuilder.ts

export class UserModel {
    email: string;
    password: string;
    firtName: string;
}