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> 

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> 

• javascript
• html
• firebase
• firebase-authentication

• When you remove the alerts, what are the values of x and y before the create user line? – camden_kid Commented Aug 10, 2017 at 11:27
• add to createUserWithEmailAndPassword 'then' and 'catch' and log the response to see what is going on – mohamad rabee Commented Aug 10, 2017 at 11:30
• They're just declared without any value. – mur7ay Commented Aug 10, 2017 at 11:32
• @mur7ay can you show me the html code that contain email and password inputs ? – Bmaed Riasbet Commented Aug 10, 2017 at 11:57
• @badisMerabet I've added the HTML as well – mur7ay Commented Aug 10, 2017 at 12:01

2 Answers 2

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.",
    databaseURL: "https://<DATABASE_NAME>.firebaseio.",
    storageBucket: "<BUCKET>.appspot.",
    messagingSenderId: "<SENDER_ID>",
  };
  firebase.initializeApp(config);

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

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);
}