For Firebase Simple Login, I have to login twice for it to register

Question

I'm pretty sure this is a problem of me not fully understanding asynchronous javascript, but I'll explain my problem.

I have an email/password authenticated with Firebase, and I have a login page with the following form:

<form class="form-signin" role="form" action="#" onsubmit="return login(this);">
    <h2 class="form-signin-heading">Please log in</h2>
    <input type="email" id="email" class="form-control" placeholder="Email address" required autofocus>
    <input type="password" id="password" class="form-control" placeholder="Password" required>
    <button class="btn btn-lg btn-primary btn-block" type="submit">Log in</button>
</form>

When I click the button I get the following error in my JS console that flashes really quickly:

Uncaught TypeError: Cannot read property 'token' of undefined --- firebase-simple-login.js:132

At the bottom of my head tag I include the script "js/firebase.js" and this is that file:

var myRef = new Firebase("https://xxxx.firebaseio.com");

var auth = new FirebaseSimpleLogin(myRef, function(error, user) {
  if (error) {
    console.log(error);
  } else if (user) {
    console.log("User ID: " + user.uid + ", Provider: " + user.provider);
  } else {
  }
});

function login(form)
{
    auth.login('password', {
      email: form.email.value,
      password: form.password.value
    });
}

After I fill out the form, press the button and get the error, the fields go blank and there is a "?#" appended to the end of my URL. If I try to login after this it works perfectly. Thanks in advance!

---

Answer 1

The first time you load this page and click "login" your form is being submitted and the page is reloading, preventing simple login from successfully completing. See How to prevent buttons from submitting forms.