Firebase Authentication setup in Java Script

Question

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

what is the result of the xhr request you do, look into network tab of your developer tool — madalinivascu, May 24 '18 at 05:04

Renaud Tarnec · Accepted Answer · 2018-05-24T05:18:40.873

1

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

edited May 24 '18 at 05:18

answered May 24 '18 at 05:12

Renaud Tarnec

79,263
10
95
121

With your help I have successfully added the user to the user list, but I am receiving this error: " {code: "auth/network-request-failed", message: "A network error (such as timeout, interrupted connection or unreachable host) has occurred."} – Kevin Gardenhire May 24 '18 at 18:59
also, can I leave the submit button where it is, but not have the submit button create a get request, just trigger the function call in the script? – Kevin Gardenhire May 24 '18 at 19:00
@KevinGardenhire For your second comment, yes you can (and in this case you should) do that: the button should just call the JavaScript function. For your first comment, a rapid search on the internet shows that it probably comes from the form tag, see https://stackoverflow.com/questions/38860900/firebase-project-results-in-auth-network-request-failed-error-on-login?utm_medium=organic&utm_source=google_rich_qa&utm_campaign=google_rich_qa. So I would say that you should totally remove your form tag which does not bring anything, but just errors! :-) – Renaud Tarnec May 24 '18 at 19:07
one more question...I believe I should be able to place the firebase config setup in a separate script so that I can call it across multiple scripts correct? Whenever I do that, placing the script call above the rest in the html...it seems to not work. missing something obvious? – Kevin Gardenhire May 24 '18 at 19:23
It is difficult to answer without seeing how you organise your page (or pageS). If you initialize and configure Firebase at the top of your HTML page (in a – Renaud Tarnec May 24 '18 at 20:47
By the way, if my answer helped you, you may upvote and accept it. Thanks! – Renaud Tarnec May 24 '18 at 20:51

score 0 · Answer 2 · answered May 24 '18 at 05:05

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

Firebase Authentication setup in Java Script

2 Answers2