Firebase Authentication Not Working

Question

I've been working with Firebase for authentication purposes and I can get it to work as long as there are two alert methods like so:

var x;
var y; 

function boo() {
   if (document.getElementById('email') !== null && document.getElementById('password') !== null) {
      x = document.getElementById("email").value;
      y = document.getElementById('password').value;
      alert(x);
      alert(y);
      const auth = firebase.auth();
      auth.createUserWithEmailAndPassword(x, y);
      } else {
            ...
      }
}

However, if I remove the two alert methods then nothing is sent nor displayed in Firebase and I'm not seeing any errors within the console. I was hoping someone knew what is going on because I don't want to display the email and password every time someone signs up.

Here's the HTML:

<form class="signupForm">
    <input type="email" class="inputs" onblur="validateForm()" id="email" required name="email" placeholder="Email" />
    <input type="password" class="inputs" id="password" required name="password" placeholder="Password" />
    <button id="btn" class="buttons" onclick="boo()">Signup</button>
</form> 

Answer 1

Replace <form> tags with <div>

Use this code to check for errors:

auth.createUserWithEmailAndPassword(email, 
password).then(function(user) {
   var user = firebase.auth().currentUser;
   console.log(user); // Optional
}, function(error) {
   // Handle Errors here.
   var errorCode = error.code;
   var errorMessage = error.message;
});

Check your firebase config infos:

  // Initialize Firebase
  // TODO: Replace with your project's customized code snippet
  var config = {
    apiKey: "<API_KEY>",
    authDomain: "<PROJECT_ID>.firebaseapp.com",
    databaseURL: "https://<DATABASE_NAME>.firebaseio.com",
    storageBucket: "<BUCKET>.appspot.com",
    messagingSenderId: "<SENDER_ID>",
  };
  firebase.initializeApp(config);

Also in firebase console -> authentication, check that Sign-in method email/password is enabled

Answer 2

Use event.preventDefault , like below:

async function handleSubmit(event) {
    event.preventDefault();
    const email = event.target.elements.email.value;
    const password = event.target.elements.password.value;
    // alert(email)
    // alert(password)
    await createNewUserWithFirebase(email, password);
}