Firebase Authentication on Ionic 2

Question

I am trying to implement login with firebase on Ionic 2 with the following code.

export class MyApp {
  rootPage:any = Login;  
  isAuthenticated = false;

  constructor(platform: Platform, statusBar: StatusBar, splashScreen: SplashScreen) {

    firebase.initializeApp({
        apiKey: "AIzaSyC94rD8wXG0aRLTcG29qVGw8CFfvCK7XVQ",
        authDomain: "myfirstfirebaseproject-6da6c.firebaseapp.com",
    });        

    firebase.auth().onAuthStateChanged(function(user) {
        if (user) {
            this.rootPage = Home;              
        } else {            
            this.rootPage = Login;        
        } 
    });    

    platform.ready().then(() => {
      // Okay, so the platform is ready and our plugins are available.
      // Here you can do any higher level native things you might need.
      statusBar.styleDefault();
      splashScreen.hide();
    });     
  }
}

I realize that even when I am authenticated, I am always brought to the Login screen because it does not wait for onAuthStateChanged promise to be fulfilled and carries on with initializing the app, therefore, the Login screen instead of the Home screen is always shown.

But how should I change my code so that I can show Home when authenticated?

Gabriel Barreto Gabriel Barreto · Accepted Answer · 2017-05-03T14:57:09

Remove the login from the rootPage declaration

export class MyApp {
  rootPage:any;
...
}

You're setting the page to your LoginPage as the app initializes and before he can check if the user is loged.

For it to run the onAuthStateChange, when the app initializes you need to use Zone to create an observable and the run it.

import { NgZone } from '@angular/core';

zone: NgZone; // declare the zone

this.zone = new NgZone({});
const unsubscribe = firebase.auth().onAuthStateChanged((user) => {
  this.zone.run(() => {
    if (user) {
      this.rootPage = Home;
      unsubscribe();
    } else {            
      this.rootPage = Login;
      unsubscribe();
    } 
  }); 
});

Hope it helps

Firebase Authentication on Ionic 2

1 Answers