CODEWITHSUNDEEP
javascriptjqueryhtmlfirebasefirebase-authentication
Kevin Gardenhire
Kevin Gardenhire

Reputation: 656

Firebase Authentication setup in Java Script

I am having a problem with my current firebase html and javascript setup that is leading to not getting users registered to my firebase database of users. I am not receiving any error alerts in the browser when I run the below code. I have also tried running the site by running 'firebase serve' and I am not getting any errors logged to the console.

The html source includes and javascript file are below. I have tested to make sure that I am able to access the username and password fields from the Document and that is working fine. Let me know if you need to see any additional information. Thank you!

Right after the Body tag in my html I include the following scripts:

<script src="https://www.gstatic.com/firebasejs/5.0.3/firebase.js"></script>
<script src="https://www.gstatic.com/firebasejs/5.0.3/firebase-auth.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="register.js"></script>

Then in my register.js file:

    // Initialize Firebase
      var config = {
        apiKey: "mykey",
        authDomain: "mydomain",
        databaseURL: "myurl",
        projectId: "myid",
        storageBucket: "mybucket",
        messagingSenderId: "mysenderid"
      };
      firebase.initializeApp(config);


    $(document).ready(function(){


    $("form").submit(function(){

      var email = $('user').val();
      var password = $('#password').val();
      firebase.auth().createUserWithEmailAndPassword(email, password)
      .then(function(val) {
            alert("Success!!");
            console.log(val);
        })
      .catch(function(error) {
        // Handle Errors here.
        alert("ERROR");
        var errorCode = error.code;
        var errorMessage = error.message;
        // [START_EXCLUDE]
        if (errorCode == 'auth/weak-password') {
          alert('The password is too weak.');
        } else {
          alert(errorMessage);
        }
        console.log(error);
        // [END_EXCLUDE]
      }).success(function(json) {
        console.log(json);
            alert("TESTER");
      })
          // [END createwithemail]
        });
});

Upvotes: 1

Views: 2827

Answers (2)

Renaud Tarnec
Renaud Tarnec

Reputation: 83191

A couple of remarks:

1/ For initialization you just need to do 

<script src="https://www.gstatic.com/firebasejs/5.0.3/firebase.js"></script>

OR

<script src="https://www.gstatic.com/firebasejs/5.0.3/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/5.0.3/firebase-auth.js"></script>

See https://firebase.google.com/docs/web/setup

2/ Don't call the submit method of your form. Just get the values of the email and password fields (e.g. var email = $('user').val();) and call the Firebase createUserWithEmailAndPassword(email, password) function as you do, without submitting the form.

Note that if you want to handle a succesful registration you should add a then(), as follows, since the function returns a promise (see doc here) 

firebase.auth().createUserWithEmailAndPassword(email, password)
        .then(function(val) {
            //Success!!
            console.log(val);
        })
        .catch(function(error) {
        // Handle Errors here.
        var errorCode = error.code;
        var errorMessage = error.message;
        if (errorCode == 'auth/weak-password') {
            alert('The password is too weak.');
        } else {
            alert(errorMessage);
        }
        console.log(error);
    });

Upvotes: 1

Fisherman
Fisherman

Reputation: 6131

Add a success function callback and see the response

$("form").submit(function(){

  var email = $('user').val();
  var password = $('#password').val();
  firebase.auth().createUserWithEmailAndPassword(email, password).catch(function(error) {
    // Handle Errors here.
    alert("ERROR");
    var errorCode = error.code;
    var errorMessage = error.message;
    // [START_EXCLUDE]
    if (errorCode == 'auth/weak-password') {
      alert('The password is too weak.');
    } else {
      alert(errorMessage);
    }
    console.log(error);
    // [END_EXCLUDE]
  }).success(function(json) { 
        console.log(json); 
  });
  // [END createwithemail]
});

Upvotes: 0

Related Questions