Javascript and Firebase 3 - Create user with Email and password

Question

I'm trying to create a registration system with jquery and firebase and the problem that I'm having trouble with is not knowing what the 'call to firebase' returns. Let me show you in my code:

HTML (simplified by removing irrelevant code):

<div id="registerForm">
    <input type="text" id="userEmail" placeholder="Email"> 
    <input type="password" id="userPass" placeholder="Password"> 
    <button type="button" id="register">Register</button> 
</div>

JQuery (again, only showing the code relevant to Firebase and registration):

<script src=" /* Jquery url */ "></script>
<script src=" /* Firebase url */ "></script>
<script>

    // Initialize Firebase
    var config = {
        apiKey: "*my api key*",
        authDomain: "*myProject*.firebaseapp.com",
        databaseURL: "https://*myProject*.firebaseio.com",
        storageBucket: "*myProject*.appspot.com",
    };
    firebase.initializeApp(config);
</script>
<script>
    $('#register').click(function() {

        var email = $('#userEmail');    
        var pass = $('#userPass');      

        if(email.val() && pass.val()){
            // this is where I stop knowing how all this firebase stuff works


            firebase.auth().createUserWithEmailAndPassword(email.val(), pass.val()).catch(function(error) {
                var errorCode = error.code;
                var errorMessage = error.message;
                console.log(errorCode + ' - ' + errorMessage);
            });

            // This is where it doesn't wanna work. Please check the first paragraph below 
            // for the explanation of how it doesn't work.
            console.log('this message shouldn\'t show if there wasn\'t an error.'); //This fires before firebase.auth()... for some reason
            if(error) {
                console.log('there was an error');
            } else {
                console.log('everything went fine');
            }                 
        } else {
            console.log('fill in both fields');
        }  
    });
</script>

I want an if-else statement here that checks what the firebase.auth method returned. If it's an error, display an error, if not display a success message and store other user details to a userDetails db table, etc. but whatever code I put down here seems to execute before the firebase.auth method. I think the problem is that I don't know what the return variable from firebase is called so that I can do something like if(firebase.auth.success (or whatever)){ } else {}.

The above code works, like if the registration was successful, a new user will show up on firebase and if there was an error I can print and see the error. The problem is just not knowing how to handle a successful/unsuccessful call to firebase and the fact that code that gets written later seem to execute before the call to firebase.

Please disregard any spelling/syntax mistakes that I may have made as it would've been mistakes of copying it to SO and not mistakes in the actual code.

Any help would be appreciated, thank you!

Answer 1

createUserWithEmailAndPassword is an assync call that returns a promise. It was built to callback the method set on .then() in case of success or .catch() if any error occured. Your current code is trying to validate if there was any error but the firebase call to create the user has not finished by the time you check if(error).

What you should be looking for is the following:

if(email.val() && pass.val()){

    firebase.auth().createUserWithEmailAndPassword(email.val(), pass.val()).then(function(user){
        console.log('everything went fine');
        console.log('user object:' + user);
        //you can save the user data here.
    }).catch(function(error) {
        console.log('there was an error');
        var errorCode = error.code;
        var errorMessage = error.message;
        console.log(errorCode + ' - ' + errorMessage);
    });

} else {
    console.log('fill in both fields');
}