I don’t understand why firebase.auth().signInWithEmailAndPassword(email, password) does not work

I am trying to make a login page using firebase, I am very new to this and have been reading through the firebase documentation to find a solution to my problem.

This is my function using the firebase.auth().signInWithEmailAndPassword() method from the firebase auth SDK.

function toggleSignIn() {

    var email = document.getElementById('inputEmail').value;
    var password = document.getElementById('inputPass').value;

    if (email.length < 1) {
        alert('Please enter an email address.');
        return;
    }
    if (password.length < 1) {
        alert('Please enter a password.');
        return;
    }
    // Sign in with email and pass.
    firebase.auth().signInWithEmailAndPassword(email, password).catch(function (error) {
        // Handle Errors here.
        var errorCode = error.code;
        var errorMessage = error.message;
        if (errorCode === 'auth/wrong-password') {
            alert('Wrong password.');
        } else {
            alert(errorMessage);
        }
        console.log(error);
    });

}

This will run once in a blue moon, but will stop running after that. I click my ‘Login_buton’ on my HTML page, and it just clears the input email, and input password boxes. Nothing happens after that, I check my console window and there is no user signed in.

This is what the HTML looks like

 <div id="Login-google" class="input-group-google">
                <button id="Logout_buton" type="submit" class="submit-buton" onclick="toggleSignOut()"> Test Logout </button>
            </div>

            <form id="Login" class="input-group">
                <input id="inputEmail" type="text" class="input-field" placeholder="Email" required>
                <input id="inputPass" type="text" class="input-field" placeholder="Password" required>
                <input type="checkbox" class="check-box"> <span> Remember Password </span>
                <button id="Login_buton" type="submit" class="submit-buton" onclick="toggleSignIn()"> Test Login </button>
            </form>

Any help on this will be greatly appreciated, I am very new to this please be easy on me.

Answer

You are submitting a form, the default browser behaviour submits the form by making a POST request to the given URL. If you want to prevent the default behaviour you need to write e.preventDefault() in your submit method. Here is the updated code.

Use forms onsubmit event to submit the form

Javascript

function toggleSignIn(e) {
    e.preventDefault(); // prevent the default behaviour

    var email = document.getElementById('inputEmail').value;
    var password = document.getElementById('inputPass').value;

    if (email.length < 1) {
        alert('Please enter an email address.');
        return;
    }
    if (password.length < 1) {
        alert('Please enter a password.');
        return;
    }
    // Sign in with email and pass.
    firebase.auth().signInWithEmailAndPassword(email, password).then((response) => {
   console.log(response);
  // do something when sign in is successful
}).catch(function (error) {
        // Handle Errors here.
        var errorCode = error.code;
        var errorMessage = error.message;
        if (errorCode === 'auth/wrong-password') {
            alert('Wrong password.');
        } else {
            alert(errorMessage);
        }
        console.log(error);
    });

}

HTML

 <div id="Login-google" class="input-group-google">
                <button id="Logout_buton" type="submit" class="submit-buton" onclick="toggleSignOut()"> Test Logout </button>
            </div>

            <form id="Login" class="input-group" onsubmit="return toggleSignIn(event)">
                <input id="inputEmail" type="text" class="input-field" placeholder="Email" required>
                <input id="inputPass" type="text" class="input-field" placeholder="Password" required>
                <input type="checkbox" class="check-box"> <span> Remember Password </span>
                <button id="Login_button" type="submit" class="submit-button"> Test Login </button>
            </form>
 </div>