Ionic 3.20.0, Firebase Authentication первый щелчок не работает, но следующий работает.

Question

Итак, я баловался с Ionic 3.20.0. Мне удалось использовать Firebase для аутентификации для Facebook и Google +.

Одна проблема, которая у меня возникла, как говорится в названии. При первом нажатии происходит аутентификация, но процесс просто останавливается. При повторном нажатии, страница загружается.

После выхода из системы я попытался снова войти в систему, и на этот раз при входе в систему не происходит никаких задержек в процессе, и я попадаю на страницу, которую я ожидал увидеть.

Ниже приведен код для home.html

<ion-header>

iFarm

import { Component, ViewChild } from '@angular/core';
import { NavController, AlertController } from 'ionic-angular';
import { LoginPage } from '../login/login';
import { RegisterPage } from '../register/register';
import firebase from 'firebase';
import {AngularFireAuth} from 'angularfire2/auth';
import { LoggedinPage } from '../loggedin/loggedin';

<ion-content padding>

         <div id = "topButtons">

        <button block ion-button (click)="signIn()"*ngIf = "!provider.loggedin" item-left>Sign In</button>
        <button block ion-button (click)="register()"*ngIf = "!provider.loggedin" item-left>Register</button> 


    </div>

    <div>

      <button block ion-button (click)="loginWithFacebook()" *ngIf = "!provider.loggedin" item-left>Login With Facebook</button>
      <button block ion-button (click)="loginWithGoogle()" *ngIf = "!provider.loggedin" item-left>Login With Google</button>
      <ion-card *ngIf = "provider.loggedin">
        <img src="{{ provider.profilePicture }}"/>
        <ion-card-content>
          <ion-card-title>
            {{ provider.name }}
            </ion-card-title>
          <p style = "text-align: center">
            {{ provider.email }}
          </p>
        </ion-card-content>
      </ion-card>


      <button block ion-button (click)="logout()" *ngIf = "provider.loggedin" item-left>Logout</button>

    </div>

Следующим является home.ts.

    import { Component, ViewChild } from '@angular/core';
    import { NavController, AlertController } from 'ionic-angular';
    import { LoginPage } from '../login/login';
    import { RegisterPage } from '../register/register';
    import firebase from 'firebase';
    import {AngularFireAuth} from 'angularfire2/auth';
    import { LoggedinPage } from '../loggedin/loggedin';
@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

    @ViewChild('username') uname;
    @ViewChild('password') password;

    provider = {

      name : '',
      profilePicture: '',
      email: '',
      loggedin : false
    }

  constructor(private fire: AngularFireAuth, public navCtrl: NavController, public alertCtrl: AlertController) {
    console.log('constructor');
  }

  signIn(){
    this.navCtrl.push(LoginPage);
  }


  register(){
    this.navCtrl.push(RegisterPage);
  }

  loginWithGoogle(){
    this.fire.auth.signInWithPopup(new firebase.auth.GoogleAuthProvider())
    .then (res => {
      console.log(res)
      console.log('from -Google--')

      this.provider.loggedin = true;
      this.provider.name = res.user.displayName;
      this.provider.name = res.user.email;
      this.provider.profilePicture = res.user.photoURL;

    })
  }

  loginWithFacebook(){

    this.fire.auth.signInWithPopup(new firebase.auth.FacebookAuthProvider())
    .then(res => {

      console.log(res);
      //this.navCtrl.push(LoggedinPage);
      this.provider.loggedin = true;
      this.provider.name = res.user.displayName;
      this.provider.name = res.user.email;
      this.provider.profilePicture = res.user.photoURL;
      console.log(this.provider);
    })

  }

  logout(){

    this.fire.auth.signOut();
    this.provider.loggedin = false;

  }

}

Я не могу понять, почему.

Большое спасибо тем, кто отвечает.