Its time to start adding functionality

Step 1

In the command line run this command:

ionic generate page Login

Step 2

Open the login folder in assets and replace the two files in 'src/pages/login' with login.html. login.scss

Step 3

Replace the contents of this file src/pages/login/login.ts

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams, ToastController } from 'ionic-angular';
import {HomePage} from  '../home/home';
import {Account} from '../../models/Account.interface';
import {LoginResponse} from '../../models/LoginResponse.interface';

/**
 * Generated class for the LoginPage page.
 *
 * See https://ionicframework.com/docs/components/#navigation for more info on
 * Ionic pages and navigation.
 */

@IonicPage()
@Component({
  selector: 'page-login',
  templateUrl: 'login.html',
})
export class LoginPage {
  public account = {} as Account;
  constructor(public navCtrl: NavController, public navParams: NavParams, private toast:ToastController) {
  }

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


  register() {
    //this.navCtrl.setRoot("RegisterPage");
  }

  login() {
    // add your check auth here
    this.navCtrl.setRoot("HomePage");

  }
}

Step 4

In the command line run this command:

ionic generate page Register

Step 5

Open the login folder in assets and replace the two files in 'src/pages/register' with register.html. register.scss

Replace code in register.

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import {Account} from '../../models/Account.interface';
import {LoginResponse} from '../../models/LoginResponse.interface';
import {ToastController} from 'ionic-angular';

/**
 * Generated class for the RegisterPage page.
 *
 * See https://ionicframework.com/docs/components/#navigation for more info on
 * Ionic pages and navigation.
 */

@IonicPage()
@Component({
  selector: 'page-register',
  templateUrl: 'register.html',
})
export class RegisterPage {

  public account = {} as Account;

  constructor(public navCtrl: NavController, public navParams: NavParams, private toast:ToastController) {
  }

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

  register() {
    this.navCtrl.setRoot("HomePage");
  }


login() {
  // add your check auth here
  this.navCtrl.setRoot("LoginPage");
}
}

Step 6

Lets add some Authentication go to Firebase

Login with your gmail account
Click "Go to Console"
Click Add Project
Name and Create Project
Select add firebase to Web
Copy the block of code that looks like whats below, and replace those values with the ones in src/firebase.credentials.ts

    apiKey: "secret",
    authDomain: "secret.firebaseapp.com",
    databaseURL: "https://secret.firebaseio.com",
    projectId: "secret",
    storageBucket: "",
    messagingSenderId: "00000"

Add these imports to src/app/app.module.ts

import {AngularFireModule} from 'angularfire2';
import { AngularFireDatabaseModule } from 'angularfire2/database';
import {AngularFireAuthModule} from 'angularfire2/auth';
import { FIREBASE_CREDENTIALS } from '../firebase.credentials';

Replace the imports block in src/app/app.module.ts

  imports: [
    BrowserModule,
    HttpClientModule,
    FormsModule,
    AngularFireModule.initializeApp(FIREBASE_CREDENTIALS),
    AngularFireAuthModule,
    AngularFireDatabaseModule,
    IonicModule.forRoot(MyApp)
  ]

Run this command in the command line

ionic generate provider AuthService

Replace the code in src/providers/auth-service/auth-service.ts

import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import {LoginResponse} from '../../models/LoginResponse.interface';
import { AngularFireAuth } from 'angularfire2/auth';
import {Account} from '../../models/Account.interface';
/*
  Generated class for the AuthServiceProvider provider.

  See https://angular.io/guide/dependency-injection for more info on providers
  and Angular DI.
*/
@Injectable()
export class AuthServiceProvider {

  constructor(private auth:AngularFireAuth) {
    console.log('Hello AuthServiceProvider Provider');
  }

  async signInWithEmailAndPassword(account:Account){
    try {
      return <LoginResponse> {
        result: await this.auth.auth.signInWithEmailAndPassword(account.email, account.password)
      }
    }
    catch(e){
      return <LoginResponse> {
        error: e
      };
    }
  }

  async createUserWithEmailAndPassword(account){
    try {
      return <LoginResponse>{
        result:await this.auth.auth.createUserWithEmailAndPassword(account.email,account.password)
      }
    }catch (e){
      return <LoginResponse>{
        error: e
      }
    }
  }

  getAuthenticatedUser(){
    return this.auth.authState;
  }

}

Add this import in src/pages/register/register.ts

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

replace the constructor signature with below in : src/pages/register/register.ts

constructor(public navCtrl: NavController, public navParams: NavParams, private auth:AuthServiceProvider, private toast:ToastController)

replace the login function with below in : src/pages/register/register.ts