Firebase authentication is not working as intended

Question

I am setting up a website that should have a login form and have decided on using Firebase Authentication for it. It doesn't look like it actually works whenever I try to login using the login info of the account I made in the Firebase console.

I followed this Youtube tutorial (https://www.youtube.com/watch?v=iKlWaUszxB4) as it is newer than the one from Firebase.

login.html:

<div class="loginContainer">
  <div class="card"></div>
  <div class="card">
    <h1 class="title">Login</h1>
    <form>
      <div class="input-container">
        <input type="text" id="txtEmail" required="required"/>
        <label for="email_field">E-Mail</label>
        <div class="bar"></div>
      </div>
      <div class="input-container">
        <input type="password" id="txtPassword" required="required"/>
        <label for="password_field">Password</label>
        <div class="bar"></div>
      </div>
      <div class="button-container">
        <button onclick="login();"id="btnLogin"><span>Go</span></button>
      </div>
    </form>
  </div>
</div>
        <!-- Scripts -->
        <!-- The core Firebase JS SDK is always required and must be listed first -->
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
        <script src="https://www.gstatic.com/firebasejs/6.1.1/firebase-app.js"></script>

        <!-- TODO: Add SDKs for Firebase products that you want to use
        <!-- Insert these scripts at the bottom of the HTML, but before you use any Firebase services -->
        <!-- Add Firebase products that you want to use -->
        <script src="https://www.gstatic.com/firebasejs/6.2.0/firebase-auth.js"></script>
        <script src="https://www.gstatic.com/firebasejs/6.2.0/firebase-firestore.js"></script>
        <script>
          // Your web app's Firebase configuration
          var firebaseConfig = {
            (the config of my project I got from the console)
          };
          // Initialize Firebase
          firebase.initializeApp(firebaseConfig);
        </script>
        <script src="assets/js/login.js"></script>

login.js:


const auth = firebase.auth();

auth.onAuthStateChanged(function(user) {
  if (user) {
    window.alert("User is signed in");

  } else {
    window.alert("User is not signed in");

  }
});

function login(){

    var userEmail = document.getElementById("txtEmail").value;
    var userPass = document.getElementById("txtPassword").value;

    console.log(userEmail + " " + userPass);
    auth.signInWithEmailAndPassword(userEmail, userPass).catch(function(error) {
    // Handle Errors here.
    var errorCode = error.code;
    var errorMessage = error.message;
    window.alert("Error : " + errorMessage);
    });
}

I expected to get the "User is signed in" window alert but whenever I try to log into the account I made in the console the page just refreshes and I get prompted with the "User is not signed in" window alert. The page also just refreshed whenever I enter a false email and password without showing any error. When I enter a badly formatted Email or no password I get the appropriate error, though. It somehow feels like the email and password don't even go to the Firebase servers.

score 1 · Accepted Answer · answered Jun 15 '19 at 02:06

Your form is being submitted, and the default action for that is to post the data back to the original URL.

To prevent this, you'll want to cancel the form submission. A simple way to do that is to return false:

<button onclick="login(); return false;"id="btnLogin"><span>Go</span></button>

See How do I cancel form submission in submit button onclick event?

Alternatively, you can call preventDefault() as shown here: Stop form submission when using JavaScript

score 1 · Answer 2 · answered May 16 '20 at 17:18

1

use return false; in onclick event to prevent this kind of error

answered May 16 '20 at 17:18

Harish

104
6

Firebase authentication is not working as intended

2 Answers2