CODEWITHSUNDEEP
javascripthtmlfirebase
Y. Chen
Y. Chen

Reputation: 323

Firebase cannot signup users with email and password

I am using firebase to signup users using email and password on my website. I have enabled email and password signup on my console. When I signup an user on the web page, the user email and password do not get passed to Firebase, and no error is displayed neither.

Her is my front end code

<!DOCTYPE html>
<html>
<head>
  <title>Registration </title>
  <link rel="stylesheet" type="text/css" href="style.css">
  <script src="https://www.gstatic.com/firebasejs/5.8.6/firebase.js"></script>
  <script src="https://www.gstatic.com/firebasejs/5.8.6/firebase-app.js"></script>
  <script src="https://www.gstatic.com/firebasejs/5.8.6/firebase-auth.js"></script>
  <script src="https://www.gstatic.com/firebasejs/5.8.6/firebase-database.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
  <script src="signup.js" defer></script>
</head>

<body>    
  <form id="form">
    <div class="header">
        <h2>Sign up as a Language Learner</h2>
    </div>
    <div class="input">
      <input id="username" type="text" name="username" placeholder="Username">
    </div>
    <div class="input">
      <input id="email" type="email" name="email" placeholder="Email">
    </div>
    <div class="input">
      <input id="password1" type="password" name="password_1" placeholder="Password">
    </div>
    <div class="input">
      <input id="password2" type="password" name="password_2" placeholder="Confirm Password">
    </div>
    <div>
      <p id="message">
      </p>
    </div>
    <div class="input">
      <button id="register_button" class="btn" name="signup">Register</button>
        <p class="input">Already a member? <a href="login.html">Sign in</a>
       &nbsp <a href="/">Cancel</a>
      </p>
    </div>
  </form>
  <div id="signup_success">
    <h2>Sign-up Successful!</h2>
  </div>

</body>
</html>

Here is my signup.js file:

var password2 = document.querySelector("#password2").value;
var register_button = document.querySelector("#register_button");
var config = {
  apiKey: "111",
  authDomain: "222",
  databaseURL: "333",
  projectId: "444",
  storageBucket: "555",
  messagingSenderId: "666"
};
firebase.initializeApp(config);

register_button.onclick = function() {
  var email = document.querySelector("#email").value;
  var password1 = document.querySelector("#password1").value;
  firebase.auth().createUserWithEmailAndPassword(email, password1).catch(function(error) {
    alert("hello");
    var errorCode = error.code;
    var errorMessage = error.message;
    document.querySelector("#message").innerHTML = errorCode + ": " + errorMessage;
  })
}

I have my config setup properly with the data from the console. If I get rid of register_button.onclick = function(), the firebase.auth().createUserWithEmailAndPassword executes. I tried to add register_button.addEventListener("click", register_user, false); at the end and it does not work either.

I have no idea what is wrong with this, any help and advice is very appreciated. Thanks in advance.

*Edit: Thanks to @Fire-in-D-Hole below, it was due to my tag in HTML, using tag messes up with what we submit on Firebase. Lesson learned: never use when using Firebase

Upvotes: 1

Views: 684

Answers (2)

Fire-In-D-Hole
Fire-In-D-Hole

Reputation: 270

Your code is absolutely Correct. However, There seems to be an Extra Space in the method createUserWithEmailAndPassword(email, password1) which is causing the issue.

Please change it to createUserWithEmailAndPassword(email,password1).

Also, When I click on Register it seems you are using Form Tagand the values are being displayed in the Address bar(See Below). Suggest you to Please check as you might not want to show Details in the Address bar. enter image description here

Users Registered Screenshot:

enter image description here

Lastly, you are using Two fields as password make sure you have the logic Written that both the password fields have to be matched. Adding the Code below which I tried and it doesn't have Form tags.

var password2 = document.querySelector("#password2").value;
var register_button = document.querySelector("#register_button");



  var config = {
    apiKey: "111",
    authDomain: "1111",
    databaseURL: "1111",
    projectId: "1111",
    storageBucket: "11111",
    messagingSenderId: "111"
  };
  firebase.initializeApp(config);


register_button.onclick = function() {
  var email = document.querySelector("#email").value;
  var password1 = document.querySelector("#password1").value;
  var password2= document.querySelector("#password2").value;

  //alert("heyman im in register button");
  //console.log("Email" +email);
 // console.log("password1 Value" +password1);
 // console.log("password2 Value" +password2);

  firebase.auth().createUserWithEmailAndPassword(email, password1).catch(function(error) {
    //alert("hello");
    var errorCode = error.code;
    var errorMessage = error.message;
    document.querySelector("#message").innerHTML = errorCode + ": " + errorMessage;
  });
}
<!DOCTYPE html>
<html>
<head>
  <title>Registration </title>
  <script src="https://www.gstatic.com/firebasejs/5.8.6/firebase.js"></script>
  <script src="https://www.gstatic.com/firebasejs/5.8.6/firebase-app.js"></script>
  <script src="https://www.gstatic.com/firebasejs/5.8.6/firebase-auth.js"></script>
  <script src="https://www.gstatic.com/firebasejs/5.8.6/firebase-database.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
  <script src="https://www.gstatic.com/firebasejs/5.8.6/firebase.js"></script>
  <script src="signup.js" defer></script>
</head>

<body>    
    <div class="header">
        <h2>Sign up as a Language Learner</h2>
    </div>
    <div class="input">
      <input id="username" type="text" name="username" placeholder="Username">
    </div>
    <div class="input">
      <input id="email" type="email" name="email" placeholder="Email">
    </div>
    <div class="input">
      <input id="password1" type="password" name="password_1" placeholder="Password">
    </div>
    <div class="input">
      <input id="password2" type="password" name="password_2" placeholder="Confirm Password">
    </div>
    <div>
      <p id="message">
      </p>
    </div>
    <div class="input">
      <button id="register_button" class="btn" name="signup">Register</button>
        <p class="input">Already a member? <a href="login.html">Sign in</a>
       &nbsp <a href="/">Cancel</a>
      </p>
    </div>
  <div id="signup_success">
    <h2>Sign-up Successful!</h2>
  </div>

</body>
</html>

Upvotes: 1

Ronnie Smith
Ronnie Smith

Reputation: 18555

You need to use the .onAuthStateChanged observer to handle the signin state change.

Upvotes: 0

Related Questions