CODEWITHSUNDEEP
javascripthtmlfirebasefirebase-realtime-databasefirebase-authentication
Noah
Noah

Reputation: 43

Html Javascript Firebase Creating User

I'm trying to create a user in firebase for my website using javascript and HTML like this:

My HTML code:

<head>
    <script src="https://www.gstatic.com/firebasejs/4.13.0/firebase.js"></script>
    <script>
      // Initialize Firebase
      var config =
      {
        apiKey: "myKey",
        authDomain: "myDomain",
        databaseURL: "myDatabaseUrl",
        projectId: "myProjectId",
        storageBucket: "myStorageBucket",
        messagingSenderId: "myMessagingSenderId"
      };
      firebase.initializeApp(config);
    </script>

    <script src = "signUpScript.js"></script>
  </head>

  <body>
   <input type="button" value="SignUp" onclick = "signUpButton_TouchUpInside()">
  </body>

And this is my javascript:

function signUpButton_TouchUpInside()
{

  var userEmail = document.getElementById("emailTextFieldSignUp").value;
  var userPassword = document.getElementById("passwordTextFieldSignUp").value;
  var userName = document.getElementById("nameTextFieldSignUp").value;

  window.alert("test1"); // does get called

  firebase.auth().createUserWithEmailAndPassword(userEmail, userPassword).catch(function(error)
  {
    window.alert("test2"); // doesnt get called
    if (error)
    {
      // Handle Errors here.
      var errorCode = error.code;
      var errorMessage = error.message;

      window.alert("There went something wrong : " + errorMessage);
      // ...
    }
    else
    {
      window.alert("test3"); // doesnt get called
      setUserInfo("", "", userName, userEmail, "1"); // How do I get the uid of the user which was just created?
    }
  });
}

function setUserInfo(profileImageUrl, profileBannerUrl, username, email, uid)
{
  var userId = firebase.auth().currentUser.uid;
  var ref = firebase.database().ref();
  var userRef = ref.child("users").child(userId);

  userRef.set({
    username: username,
    username_lowercase: username.toLowerCase().replace(" ", ""),
    email: email,
    profileImageUrl: profileImageUrl,
    profileBannerUrl: profileBannerUrl
  }, function(error)
  {
    if (error)
    {
      var errorMessage = error.message;

      window.alert("There went something wrong : " + errorMessage);
    }
    else
    {
      window.alert("Account successfully created");
    }
  });
}

For some reason, it doesn't even call the createUserWithEmailAndPassword function.

So I've got two questions:

  1. Why doesn't the function get called?

  2. If it did get called how would I access the uid of the just created user?

Upvotes: 0

Views: 1020

Answers (1)

Frank van Puffelen
Frank van Puffelen

Reputation: 600061

Your current code only catches errors from createUserWithEmailAndPassword. The reason most example only use catch is that it's typically best to handle the "account creation successful" flow in an onAuthStateChanged handler.

The smallest change from your current code is that add a then():

firebase.auth().createUserWithEmailAndPassword(userEmail, userPassword)
  .then(function(user) {
    var user = firebase.auth().currentUser;
    setUserInfo("", "", userName, userEmail, user.uid)
  })
  .catch(function(error) {
    // no `if (error)` is needed here: if `catch` is called, there was an error
    var errorCode = error.code;
    var errorMessage = error.message;

    window.alert("There went something wrong : " + errorMessage);
  });

The better change though, as said, is to use an onAuthStateChanged, which then automatically also ensures your user info is updated whenever the user reloads the app:

firebase.auth().onAuthStateChanged(function(user) {
  if (user) {
    // User is signed in, call setUserInfo here
  } else {
    // No user is signed in.
  }
});

Upvotes: 2

Related Questions