Javascript - firebase.auth().onAuthStateChanged not firing upon login/logout

Question

I have the following code:

var config = {
       apiKey: "xxxxx",
       authDomain: "xxxxx",
       databaseURL: "xxxxx",
       projectId: "xxxxx",
       storageBucket: "xxxxx",
       messagingSenderId: "xxxxx"
};

firebase.initializeApp(config);

$("#loginButton").on('click', function(){
    logIn($("#email").val(), $("#pwd").val());
});

$("#logoutButton").on('click', function(){
   firebase.auth().signOut();
   console.log("clicked logout button");
});

function logIn(email, password){
   firebase.auth().signInWithEmailAndPassword(email,    password).catch(function(error) {
    // Handle Errors here.
    var errorCode = error.code;
    var errorMessage = error.message;
    alert(error.message);
  });
}

firebase.auth().onAuthStateChanged(function(user) {
    if (user) {
      console.log("Signed in");                  
      firebase.auth().currentUser.getIdToken(true).then(function(idToken) {
        // Send token to your backend via HTTPS
        // ...
        console.log("Token = " + idToken);
        console.log("Logged in!");
        $("#loginButton").val(idToken);
        $("#loginForm").submit();
      }).catch(function(error) {
           // Handle error
           console.log(error);
      });
   }
   else{
       console.log("User signed out");
   }
});

What I am trying to accomplish here is: The user fills the email and password fields, click on a button with id="loginButton", I sign in, get the token id and send it to server (Is this form hackish way of sending it recommended?) and verify the token id through the Admin SDK in my express app (Node.js).

The point is. The user does sign in and sign out (By refreshing the page I can see that "Signed in" and "User signed out" are printed).

But why is onAuthStateChanged called only once when it should be observing/listening to every change on auth state?

Why am I able to sign in and out but onAuthStateChanged is called only at the beginning (when page loads) and not called anymore upon button clicks (loginButton and logoutButton)?

Answer 1

First, change firebase.auth().currentUser.getIdToken to user.getIdToken in your auth state listener.

Second, you should add a then to signInWithEmailPassword promise and print some message to see if login succeed.

Last, auth state listener will not be triggered if you sign in the same user twice without log out in between. If you want to trigger some logic every time user logged in, you should put it into the then block of signInWithEmailPassword promise.

Answer 2

Although this is an old question it seems like some people are still struggling with this.

I was having the same problem with onAuthStateChange not being fired on SignOut and I realized it was because I was unsubscribing from the listener before I signed out, so that by the time I signed out there was no listener anymore.