Can't Sign up with firebase

Question

I am trying to create a sign up form with firebase and login as well, I have tried so many things but it won't work. I keep getting this error when I click the signup button which calls the method auth.createUserWithEmailAndPassword(email, pass).

A network error (such as timeout, interrupted connection or unreachable host) has occurred.

Below here is part of my HTML

<div class="col l7" id="signup">
      <h4>Signup</h4>
      <div class="form card">
        <br>
        <div class="switch">
          <label>
                Student
                <input name="student_" id="student_" type="checkbox">
                <span class="lever"></span>
                Staff
              </label>
        </div>
        <div class="container">
          <input type="text" placeholder="Name" id="signup_fullname">
          <!--student/staff-->
          <input type="text" placeholder="Matric Number/Staff no." id="signup_matric">
          <input type="email" placeholder="Email" id="signup_email">
          <div class="input-field col s12">
            <select id="signup_dept">
                  <option value="" disabled selected>Select your department</option>
                  <option value="ics">ICS</option>
                  <option value="masscomm">Mass Comm.</option>
                  <option value="lis">Library Science</option>
                  <option value="tcs">Telecomm Science</option>
                  <option value="csc">Computer Science</option>
                </select>
          </div>
          <div class="input-field col s12">
            <select id="signup_level">
                  <option value="" disabled selected>Select your Level</option>
                  <option value="100">100 Level</option>
                  <option value="200">200 Level</option>
                  <option value="300">300 Level</option>
                  <option value="400">400 Level</option>
                  <option value="500">500 Level</option>
                </select>
          </div>
          <div class="input-field col s12">
            <select id="signup_religion">
                  <option value="" disabled selected>Select your religion</option>
                  <option value="1">Islam</option>
                  <option value="2">Christianity</option>
                </select>
          </div>
          <input type="password" placeholder="password" id="signup_password">
          <!--<input type="password" placeholder="Confirm password" id="signup_confirm_password">-->
          <button class="btn-large second-color" id="btnSignUp">signup</button></a>
        </div>
      </div>
      <br>
    </div>

and my JS code

readystatemode = false;
(function () {
  var config = {
    apiKey: "<my API key>",
    authDomain: "<my auth domain>",
    databaseURL: "<my database url>",
    storageBucket: "<my storage bucket url>",
  };
  firebase.initializeApp(config);

  // Get Elements
  var student_ = document.getElementById('student_'); // check whether is a student or staff; expect on or off
  var student__;
  if (student_.value == "on") {
    student__ = "student";
  } else {
    student__ = "staff";
  }
  var signup_fullname = document.getElementById('signup_fullname');
  var signup_matric = document.getElementById('signup_matric');
  var signup_email = document.getElementById('signup_email');
  var signup_dept = document.getElementById('signup_dept');
  var signup_level = document.getElementById('signup_level');
  var signup_religion = document.getElementById('signup_religion');
  var signup_password = document.getElementById('signup_password');
  var login_email = document.getElementById('login_email');
  var login_password = document.getElementById('login_password');
  // buttons
  var btnLogin = document.getElementById("btnLogin");
  var btnSignUp = document.getElementById("btnSignUp");

  // signup event
  btnSignUp.addEventListener('click', e => {
    // Get Email and pass
    //TODO: check for real emails
    console.log("just clicked the signup button");

    var email = signup_email.value;
    var pass = signup_password.value;
    var auth = firebase.auth();
    // sign up
    const promise = auth.createUserWithEmailAndPassword(email, pass);
    promise
      .catch(e => console.log(e.message));

    if (auth.currentUser != null) {
      auth.currentUser.updateProfile({
        displayName: signup_fullname,
        userCategory: student__,
        matric: signup_matric,
        department: signup_dept,
        level: signup_level,
        religion: signup_religion
      }).then(function () {
        console.log("update successful");
        window.readystatemode = true;
      }, function (error) {
        console.log("update failed");
      });
    }
  });

  firebase.auth().onAuthStateChanged(firebaseUser => {
    if (firebaseUser && window.readystatemode) {
      console.log(firebaseUser);
      btnLogout.classList.remove('hide');
      window.location('./dashboard.html');
    } else {
      console.log("not logged in");
      btnLogout.classList.add('hide');
    }
  });

})();

Solution 1

I had a similar issue with the device login using Firebase but i could login on the browser. I used the following commands to resolve the issue,

--cordova plugin remove cordova-plugin-whitelist--

--cordova plugin add cordova-plugin-whitelist--

Solution 2

While this answer is not relevant to the actual code above, I suspect a lot of people google the error:

"A network error (such as timeout, interrupted connection or unreachable host) has occurred."

It might be that your form is actually in a form element in the HTML. Small bug, but it could have huge concequences. If you are following along this tutorial: "https://www.youtube.com/watch?v=-OKrloDzGpU", please make sure your form does not have a <form></form>tag. This will lead to this error!

Solution 3

In my case, the problem resolved if you try to reconnect to the Internet.

Solution 4

I had the same problem too The way I solved it was to add the domain where the firebase app is hosted on the firebase console

Solution 5

If you are using Cordova (which I am not sure if you are or not, but some answers imply that you may be), including the cordova-plugin-network-information corrected this issue for me. I confirmed that the 'navigator.onLine' was occasionally 'false', which I believe was causing Firebase to think there was an issue. Once I added the cordova-plugin-network-information to my project, the problem went away. I didn't dig deep into why, but I suspect this plugin has a better wrapper around the navigator which may be giving Firebase better information. I did confirm this problem came back after removing the plugin, but re-applying it fixes it. I will update this if I dig deeper. I hope this helps.

View more solutions

Comments

[meedgee]

In your firebase console (dashboard): console.firebase.google.com, under the auth section, you can add the domain there

[The worm]

why would being in a form tag cause an issue? surely most people sign up through a form?

[Ayman Al-Absi]

This is the correct answer.Change <form></form> to <div></div> solved the issue.

[Dan Alboteanu]

I agree. After changing from <form></form> to <div></div> it solved my problem

[Devin Carpenter]

Any updates on why a form tag would cause this error? Reference in the documentations?

[shreesha]

I wasted my 3 days on this issue. I had code inside FORM element.no where in firebase documentation this is mentioned.anybody from firebase team can respond?

[Sushant Bhargav]

I am using div tags instead of form to begin with , yet I am facing similar issue.

[Breno Teixeira]

Same thing here! Can someone explain this behavior?

[stax]

I'm using vue js with vutify; the form tag did not work for me, but the div tag solved the issue.

[Rumit Patel]

this is not seems answer. you should comment this.

[Coluccini]

well, this was the answer for me…

[psimons]

That solved it on a brand new xperia I am using as a testbed, THANKS !!!!

[Breno Teixeira]

<div> resolved my problem but I rly want to user the <form> tag for html native validations. Any thoughts how to make the form tag works?

[Vijayendra Gade]

I added the plugin and build and relaunched the app in ios simulator. but i am still facing the issue. Did you make any other changes after installing the plugin?