Ben Liger Ben Liger - 1 month ago 32
Javascript Question

Firebase - Adding additional user data to separate DB

I'm new to Firebase and am using the email/password sign-in method. I have the method working fine however on my signup form I have additional fields I want to enter in the database. My understanding from the email/password signup method is that any additional fields will have to be stored separately to how the email/ password auth is stored when a user signs up.

I have created in my databases a sub-section to store additional user details called users. here's how it looks in firebase:

enter image description here

Here is the function i'm calling (in React) to create a new user:

signUp(e) {
e.preventDefault();
var firstName = $('.signup-first-name').val();
var lastName = $('.signup-last-name').val();
var userName = $('.signup-user-name').val();
var password = $('.signup-user-password').val();
var email = $('.signup-email').val();

var auth = firebase.auth();

const promise = auth.createUserWithEmailAndPassword(email,password).then(function(user) {

var user = firebase.auth().currentUser;
user.updateProfile({
displayName: userName,
}).then(function() {
// Update successful.

// new db code here
var ref = new firebase("https://music-app-7a4d3.firebaseio.com");

ref.onAuth(function(authData) {
ref.child("users").child(authData.uid).set({
firstName: firstName,
lastName: lastName
})
})
// end new db code here

}, function(error) {
// An error happened.
});

}, 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 {
console.error(error);
}
});

promise.catch(e => console.log(e.message));

firebase.auth().onAuthStateChanged(firebaseUser => {
if(firebaseUser) {
console.log(firebaseUser)
} else {
console.log("not logged in")
}
});

}


Have followed another example I found on here:

Add Extra Details on Firebase User Table

but not sure where i've gone wrong along the way. Documentation on this is fairly weak which doesn't help!

Answer
  1. Initialization of firebase object was done for the old version, see this https://firebase.google.com/docs/web/setup , it uses firebase.initializeApp(config) instead of new firebase()

  2. to update your database with user's additional fields use this code

    firebase.database().ref('users/' + user.uid).set({
        firstName: firstName,
        lastName: lastName
    })