Twitter Bootstrap Question posted in

Firebase cannot see user after using createUserWithEmailAndPassword-Twitter bootstrap

I am new to firebase and I created a very simple app to signup user. After signing up, the user is not shown in the user list on my firebase console. I followed the documentation and some tutorials on Youtube. I feel I did the same thing, but it does not work. Can anyone help me solve this issue?

<!DOCTYPE html>
<html>
<head>
    <title>Happy Referrals - Sign Up Free!</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="../css/style.css">
</head>
<body>
<div class="signup-container">
     <form>
        <h3>Sign Up Happy Referrals for Free!</h3>
        <label>Email:</label>
        <input type="email" name="" id="email" />
        <label>Password:</label>
        <input type="password" name="" id="pw" />
        <button id="signup">Sign Up</button>
     </form>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<!-- The core Firebase JS SDK is always required and must be listed first -->
<script src="https://www.gstatic.com/firebasejs/7.2.2/firebase-app.js"></script>
<!-- TODO: Add SDKs for Firebase products that you want to use
     https://firebase.google.com/docs/web/setup#available-libraries -->
<script src="https://www.gstatic.com/firebasejs/7.2.3/firebase-auth.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.2.3/firebase-firestore.js"></script>

<script>
  // Your web app's Firebase configuration
  var firebaseConfig = {
    // keep secret
  };
  // Initialize Firebase
  firebase.initializeApp(firebaseConfig);

  $('#signup').on('click', function() {
    var email = $('#email').val();
        var pw = $('#pw').val();
        console.log(email);

        firebase.auth().createUserWithEmailAndPassword(email, pw).catch(function(error) {
              // Handle Errors here.
              var errorCode = error.code;
              var errorMessage = error.message;
              console.log(errorMessage);
            });
  })

</script>
</body>
</html>
Tags:

2

Answers


  1. 0 
    You can try using async/await:

$('#signup').on('click', function() {
        var email = $('#email').val();
        var pw = $('#pw').val();

        signUp(email,pw);

  });

async function signUp(email,pw){
    await 
firebase.auth().createUserWithEmailAndPassword(email, 
pw).catch(error=> {
            // Handle Errors here.
            var errorCode = error.code;
            var errorMessage = error.message;
             console.log(errorMessage);
    });
    Login or Signup to reply.
  2. 0

    As you will read in the the W3 specification your button has a default behavior of submit. Therefore your form is submitted before the Firebase method is triggered.

    So you need to explicitly specify the button type as follows:

    <button type="button" id="signup">Sign Up</button>

    Also, note that it is better, with JQUery, to wait for the document to be “ready”. See the doc, that says:

    A page can’t be manipulated safely until the document is “ready.”
    jQuery detects this state of readiness for you. Code included inside
    $( document ).ready() will only run once the page Document Object
    Model (DOM) is ready for JavaScript code to execute.

    So you may adapt your script code as follows:

    <script>

    $( document ).ready(function() {
      // Your web app's Firebase configuration
      var firebaseConfig = {
        // keep secret
      };
      // Initialize Firebase
      firebase.initializeApp(firebaseConfig);

      $('#signup').on('click', function() {
        var email = $('#email').val();
            var pw = $('#pw').val();
            console.log(email);

            firebase.auth().createUserWithEmailAndPassword(email, pw).catch(function(error) {
                  // Handle Errors here.
                  var errorCode = error.code;
                  var errorMessage = error.message;
                  console.log(errorMessage);
                });
      });

    });

</script>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search