Firebase - Adding additional user data to separate DB

Question

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:

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

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

Answer 2

For updating your database with additional parameters use the below given code and make changes accordingly.

function writeUserData(userId, name, email, imageUrl) {
                firebase.database().ref('users/' + userId).set({
                username: name,
                email: email,
                profile_picture : imageUrl
                });
              }