Kain Kain - 4 years ago 98
jQuery Question

Firebase OnAuthStateChanged function not returning anything

I use Firebase password-based Authentication in my

login.html
. I have 2 text box and 3 buttons.

I use
firebase.OnAuthStateChanged
to know if user is logged in or logged out. When the user is logged in, the password text box and login button should be hidden, so I use
display : none;
for it. And when the user is logged out, the logout button should be hidden.




The buttons are working perfectly, but the real problem is in the
if elseif
statement.

Below is my JavaScript code.

P.S : Feel free to use the Firebase config to test. Or use this login:


  • email: sa@sa.sa

  • password : 123456






// Initialize Firebase
var config = {
apiKey: "AIzaSyDjYqNKbZaom0jplOusloWlr5mOhW2WbgQ",
authDomain: "awes-e3043.firebaseapp.com",
databaseURL: "https://awes-e3043.firebaseio.com",
storageBucket: "awes-e3043.appspot.com",
messagingSenderId: "191054424051"
};
firebase.initializeApp(config);
// SignIn
$("button#in").click(function(){
var email = document.getElementById('logemail');
var password = document.getElementById('logpassword');
firebase.auth().signInWithEmailAndPassword(email.value, password.value).catch(function(error) {
console.log(error.code);
console.log(error.message);
}).then(function(){
location.reload();
});
});
// SignOut
$("button#out").click(function(){
firebase.auth().signOut().then(function() {
console.log("Logged out!")
location.reload();
}, function(error) {
console.log(error.code);
console.log(error.message);
});
});

$(document).ready(function(){
function usigned(){
firebase.auth().onAuthStateChanged(function(user) {
if (user) {
return true;
} else {
return false;
}
}); }
if (usigned() == true) {
$("#hlogp").css("display", "none");
$("button#in").css("display", "none");
$("button#out").css("display", "inline-block")
}else if(usigned() == false) {
$("button#out").css("display", "none");
$("#hlogp").css("display", "block");
$("button#in").css("display", "block");
}
});

Answer Source

Like most firebase calls, onAuthStateChanged() runs asynchronously, so you need to set it up with a callback:

function usigned(bool) {
  if (bool) {
    $("#hlogp").css("display", "none");
    $("button#in").css("display", "none");
    $("button#out").css("display", "inline-block");
  } else {
    $("button#out").css("display", "none");
    $("#hlogp").css("display", "block");
    $("button#in").css("display", "block");
  }
}

firebase.auth().onAuthStateChanged(function(user) {
  if (user) {
    usigned(true);
  } else {
    usigned(false);
  }
});

Alternatively, you could simply put the usigned() code inline...

firebase.auth().onAuthStateChanged(function(user) {
  if (user) {
    $("#hlogp").css("display", "none");
    $("button#in").css("display", "none");
    $("button#out").css("display", "inline-block")
  } else {
    $("button#out").css("display", "none");
    $("#hlogp").css("display", "block");
    $("button#in").css("display", "block");
  }
});
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download