Check if user auth id exist in firebase database before navigating to a new page

Question

After a user sign in successfully, I want to use the User UID to verify the user has selected the right school, I have been able to achieve this task, but the problem is, I have to click the login button twice before an action takes effect.

var sbmit = document.getElementById("submit");
sbmit.onclick = function (e) {
  var email = document.getElementById("email").value;
  var password = document.getElementById("password").value;
  var s = document.getElementById("school");
  var school = s.options[s.selectedIndex].value;
  e.preventDefault();

  if (school == null || school == "") {
    alert("Please select your school")
    return false;
  } else if (email == null || email == "") {
    alert('email can\'t be empty')
    return false;
  } else if (password == null || password == "") {
    alert("Password ca\'t be empty")
    return false;
  } else {
    toggleSignIn();
//After signing in, use the user auth id to check if the user exist in the selected school
    firebase.auth().onAuthStateChanged(user => {
      if (user) {
        ref = database.ref('/schools/')
        userId = firebase.auth().currentUser.uid;

        ref.child(school).orderByChild("AuthID").equalTo(userId).once("value", snapshot => {

          if (snapshot.exists()) {
            document.location.href = "/Result"
          } else {
            alert("You have selected the wrong school")
          }

        });

      }
    });
  }


}

Answer 1

It is very unusual to have an onAuthStateChanged listener in a click handler like that. More likely you want something like:

    ...
  } else {
    toggleSignIn();
    ref = database.ref('/schools/')
    userId = firebase.auth().currentUser.uid;

    ref.child(school).orderByChild("AuthID").equalTo(userId).once("value", snapshot => {

      if (snapshot.exists()) {
        document.location.href = "/Result"
      } else {
        alert("You have selected the wrong school")
      }
    });
  }

By the way: if you can look up the school for the user with a query, is there any specific reason why you don't simply prepopulate that value for them in the form?

Answer 2

Your code has a flaw. onAuthStateChanged listener is attached every time the button is clicked. This could add multiple listeners and the same code triggered multiple times after each repeated click. onAuthStateChanged listener should be attached only once when the document is loaded. Your code should be something like:

var sbmit = document.getElementById("submit");

sbmit.onclick = function (e) {
  var email = document.getElementById("email").value;
  var password = document.getElementById("password").value;
  var s = document.getElementById("school");
  var school = s.options[s.selectedIndex].value;
  e.preventDefault();

  if (school == null || school == "") {
    alert("Please select your school")
    return false;
  } else if (email == null || email == "") {
    alert('email can\'t be empty')
    return false;
  } else if (password == null || password == "") {
    alert("Password ca\'t be empty")
    return false;
  } else {
    toggleSignIn();
  }
}

document.onload = function () {
  firebase.auth().onAuthStateChanged(user => {
    if (user) {
      ref = database.ref('/schools/')
      userId = firebase.auth().currentUser.uid;

      ref.child(school).orderByChild("AuthID").equalTo(userId).once("value", snapshot => {

        if (snapshot.exists()) {
          document.location.href = "/Result"
        } else {
          alert("You have selected the wrong school")
        }

      });

    }
  });
}

I assume toggleSignIn() function is used to sign in and will change the firebase AuthState on successful sign in.