app.component.ts

import { Component } from '@angular/core';
import { Platform } from 'ionic-angular';
import { StatusBar } from 'ionic-native';

import { HomePage } from '../pages/home/home';
import { LoginPage } from '../pages/login/login';

import firebase from 'firebase';


@Component({
  template: `<ion-nav [root]="rootPage"></ion-nav>`
})
export class MyApp {
  rootPage: any;

  constructor(platform: Platform) {
    firebase.initializeApp({
      apiKey: "",
      authDomain: "",
      databaseURL: "",
      storageBucket: "",
      messagingSenderId: ""
    });

    let unsubscribe = firebase.auth().onAuthStateChanged((user) => {
      if (user) {
        this.rootPage = HomePage;
        console.log("HomePage", user);
        unsubscribe();
      } else {
        this.rootPage = LoginPage;
        console.log("LoginPage", user);
        unsubscribe();
      }
    });

    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();
    });
  }
}

/**
 * The code works with Firebase, I get back the user and log it to the console, 
 * but it's not assigning the rootPage.
 * 
 * Or it is, because if I log it I get the correct value, but is not redirecting to it.
 */

// However, if I just do 

rootPage = LoginPage;

// It goes to the login page.

Basically it's not navigating to the new rootPage, everything else is working perfectly, and only happens when the new rootPage is assigned inside firebase.auth().onAuthStateChanged()

Hello,

I'm trying to do the same exercice, but unfortunately the same problem happens on my. RootPage doesn't work if we inlcude inside of the firebase.auth().onAuthStateChanged().

For the previous version taht i had:

af.auth.subscribe( user =>{
if (user)
{
this.rootPage = SlideMenuPage;
}
else
{
this.rootPage = LoginPage;
}
})

works perfectly, but this case af is making reference to public af: AngularFire.
Any idea about how we can solve the problem?

kind regards

Hello,

Finaly i can fixed using something like this:

import { Component, ViewChild } from '@angular/core';
import { Nav } from 'ionic-angular';

@component({
template: <ion-nav [root]="rootPage"></ion-nav>
})
export class MyApp
{
@ViewChild(Nav) nav: Nav;
......
firebase.auth().onAuthStateChanged((user) =>
{
if (user)
this.nav.setRoot(SlideMenuPage);
else
this.nav.setRoot(LoginPage);
});
}

And it's working.
Please some coments that i need know using this method?

Kind regards