Solution 1 :

When you click the submit button:

  1. The JS function is called
  2. The form is submitted

Submitting a form triggers navigation to the page in the HTTP response from the form submission.

Leaving the current page stops the JS that was running in it so the asynchronous JS call never completes.

Use preventDefault to stop the normal submission of the form.

Problem :


    <form >
        <input id="email" type="text" placeholder="username">
        <input id="pass" type="password" placeholder="password">
        <button onclick="login()">login</button>
        <p class="message">Not registered? <a href="home.html">Create an account</a></p>



function login(){

     var userE=document.getElementById("email").value;
     var userP=document.getElementById("pass").value;

     firebase.auth().signInWithEmailAndPassword(userE, userP).catch(function(error) {
       // Handle Errors here.
       var errorCode = error.code;
       var errorMessage = error.message;


     firebase.auth().onAuthStateChanged(function(user) {
       if (user) {




The authorization works when the input fields are out of the <form>, or there are no <form>. But as soon as I introduce it to the HTML, the authorization does not work. It keeps redirecting me to the same login page over and over again.


Comment posted by NewJava

where do I add it? I have never used it anywhere and it’s my first time using Firebase

Comment posted by

This is basic JS event handling. It has nothing to do with Firebase.