Ad

The Method SignInWithEmailAndPassword() Is Unresponsive - Firebase Web

I am trying to create a small program that registers users through createUserWithEmailAndPassword(), which works like a charm. However, when I try to signInWithEmailAndPassword(), the program is unresponsive to incorrect email/password, correct email/password, etc. and then it simply reloads the page. The only time the sign-in program responds is when it detects the email being badly formatted.

Note: the createUserWithEmailAndPassword() and the signInWithEmailAndPassword() are used in different Javascript files. Also, the firebase is well connected and the authentication is enabled.

There are no error messages. My goal for after signing in is to be taken to another page (index.html).

Thank you!

Below is my code for this method!

const loginEmail = document.getElementById("loginEmail");
const loginPassword = document.getElementById("loginPassword");

function loginToSearch() {
    const email = loginEmail.value;
    const password = loginPassword.value;

    firebase.auth().signInWithEmailAndPassword(email, password)
        .then(function(firebaseUser) {
            // Success
            window.alert("LOGGED IN");
            window.location = "index.html";
        })
        .catch(function(error) {
            // Handle Errors here.
            var errorCode = error.code;
            var errorMessage = error.message;
            window.alert(errorMessage);
        });
}

The code that calls this method:

<form class="main-form">
    <h4>Login:</h4>
    <br/>
    <div id="login_div" class="main-div">
        <div class="form-group">
            <label for="loginEmail">Email</label>
            <input type="email" name="Email" id="loginEmail" class="form-control" required>
        </div>
        <div class="form-group">
            <label for="loginPassword">Password</label>
            <input type="password" name="Password" id="loginPassword" class="form-control" required>
        </div>
    </div>
    <button class="btn btn-primary" id="loginBtn" onclick="loginToSearch()">Login!</button>
</form>

Real time listener for AuthState:

firebase.auth().onAuthStateChanged(user => {
    if (user) {
        console.log("Logged In!");
        console.log(user);
    } else {
        console.log('Not Logged In!');
    }
});

Thank you so, so much for your help!

Ad

Answer

I don't see any issues with the Firebase code, but I do see an issue with your HTML code...

You have a button at the end of your form, that button click is causing the form to be submitted. This is what's causing your page to reload. To fix it, include the click event in the button's onclick handler:

<button class="btn btn-primary" id="loginBtn" onclick="loginToSearch(e)">Login!</button>

and then in your javascript:

function loginToSearch(e) {
    e.preventDefault();   // <-- prevent whatever default behavior would occur
                          //     in this case, it prevents the form submission

    const email = loginEmail.value;
    const password = loginPassword.value;

    // etc...

I suspect that if you fix this, your signin code will work - actually, I think it's already working - just that your page reload is occurring before you get the chance to see it.

Ad
source: stackoverflow.com
Ad