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
– madalinivascu, Commented May 24, 2018 at 5:04

Renaud Tarnec · Accepted Answer · 2018-05-24 05:18:40Z

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, 2018 at 5:18

answered May 24, 2018 at 5:12

Renaud Tarnec

83.4k10 gold badges99 silver badges130 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Kevin Gardenhire Over a year ago

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 Over a year ago

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?

Renaud Tarnec Over a year ago

@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 stackoverflow.com/questions/38860900/…. So I would say that you should totally remove your form tag which does not bring anything, but just errors! :-)

Kevin Gardenhire Over a year ago

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?

Renaud Tarnec Over a year ago

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 <script> tag in the <head> tag) you should be able to use it across your page. If this short answer doesn't help you, you should ask a new question and add all the code of your page.

|

Fisherman · Accepted Answer · 2018-05-24 05:05:46Z

0

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

answered May 24, 2018 at 5:05

Fisherman

6,1311 gold badge33 silver badges37 bronze badges

Collectives™ on Stack Overflow

Firebase Authentication setup in Java Script

2 Answers 2

6 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related