title: firebase onAuthStateChanged following Fibonacci's series
body: <p>I'm developing an hybrid app using Ionic 3 and Firebase as authentication provider. The app consist in 2 pages. A login page and an home page. On the login page there's a button that log-in the user using email+password and on the home page another button logout the current user. Basically, the first time the app is loaded everything works fine. But after loggin-in then logging-out then logging-in again the function inside onAuthStateChange gets called twice, then three times, then five and so on following the Fibonacci's series.
  This is the login page code:</p>
  
  <pre><code>firebase.auth().onAuthStateChanged(function(user) {
        if (user) {
          console.log('User logged-in');
          if (user.emailVerified) {
            self.goToHome();
          } else {
            self.showAlert();
            firebase.auth().signOut();
          }
        }
      });
    }
  </code></pre>
  
  <p>and this is the logout code:</p>
  
  <pre><code>firebase.auth().onAuthStateChanged(function(user) {
        if (user == null) {
            console.log('User logged-out');
            navCtrl.push(WelcomePage);
          }
        });
  </code></pre>
  
  <p>chrome console shows this behavior:</p>
  
  <p>(the error at the end of the image was my fault as I used the wrong password)</p>
  
  <p><a href="https://i.stack.imgur.com/ocYzQ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ocYzQ.png" alt="Chrome console showing the functions getting called following the Fibonacci series"></a></p>
  
  <p>The functions called by the buttons (but I'm 99% sure that the problem is onAuthStateChanged):</p>
  
  <pre><code>  doLogin() {
      console.log('Trying to log in...');
      var email = this.account.email;
      var password = this.account.password;
      if (this.validateEmail(email) &amp;&amp; password.length &gt;= 8) {
        loading.present();
        firebase.auth().signInWithEmailAndPassword(email, password)
        .then(function(data) {
          loading.dismiss();
         });
  }
  
  logout() {
      firebase.auth().signOut();
    }
  </code></pre>
  
  <p>The function goToHome to move the user to the homepage:</p>
  
  <pre><code>goToHome() {
      this.navCtrl.push(MainPage);
    }
  </code></pre>
  
  <blockquote>
    <p>Solution as pointed out by <a href="https://stackoverflow.com/a/45464693/7932010">Ben</a> in his comment:</p>
  </blockquote>
  
  <p>1: moving all navController related functions from onAuthStateChanged
  2: using setRoot instead of pop() and push()</p>
  
  <pre><code>goToHome() {
      this.navCtrl.setRoot(HomePage);
    }
  logout() {
    firebase.auth().signOut();
    this.navCtrl.setRoot(WelcomePage);
  }
  </code></pre>
  
  <p>3) To fix be able to auto-login the user if he/she didn't logout I check 
     if firebase.auth().currentuser exist, but using a timeout because 
     Firebase needs some time before functioning properly:</p>
  
  <pre><code>setTimeout(function(){
          var user = firebase.auth().currentUser;
          if (user != null) {
            self.goToHome();
          }
        }, 1500);
  </code></pre>