CODEWITHSUNDEEP
javascriptfirebasefirebase-realtime-databasefirebase-authentication
berningb
berningb

Reputation: 13

How do I add a user to my Firebase DB with it's unique id when I first create a user for authentication

This may seem like an obvious question, but i'm having trouble creating a user inside of my Firebase db. I'm very new to firebase and coding for that matter.

How I understand it to be is when a user clicks the sign up button, a user with the newly authenticated uid will be created under 'object/users". However the user is always null. In the google documentation it says that sometimes the user is null because it hasn't finished initializing the user. And to put it inside of onAuthStateChanged. This works, however, if I did this a user would be created/overwritten every time they log in or log out.

I suppose what I'm looking for is some solution to create a user inside of my firebase db when a user first signs up with valid information.

Here is my code:

  function LoginCtrl($scope) {
    $scope.txtEmail = document.getElementById('txtEmail');
    $scope.txtPassword = document.getElementById('txtPassword');
    $scope.btnLogin = document.getElementById('btnLogin');
    $scope.btnSignUp = document.getElementById('btnSignUp');
    $scope.btnLogout = document.getElementById('btnLogout');


    btnLogin.addEventListener('click', e => {
        const email = txtEmail.value;
        const pass = txtPassword.value;
        const auth = firebase.auth();

        const promise = auth.signInWithEmailAndPassword(email, pass);
        promise.catch(e => console.log(e.message));

    });

    btnSignUp.addEventListener('click', e => {
        const email = txtEmail.value;
        const pass = txtPassword.value;
        const auth = firebase.auth();
        const promise = auth.createUserWithEmailAndPassword(email, pass);
        promise.catch(e => console.log(e.message));

        createUser();
    });

    function createUser() {
        var user = firebase.auth().currentUser;

        if (user != null) {
            const dbRefObject = firebase.database().ref().child('object');
            const dbRefList = dbRefObject.child("users/" + user.uid);
            dbRefList.set({
                name: "jim",
            });
        } 
    }

    btnLogout.addEventListener('click', e => {
        firebase.auth().signOut();
    });

    firebase.auth().onAuthStateChanged(firebaseUser => {
        if (firebaseUser) {
            console.log(firebaseUser);
            btnLogout.classList.remove('hide');
            btnLogin.classList.add('hide');
        } else {
            console.log('not logged in');
            btnLogout.classList.add('hide');
            btnLogin.classList.remove('hide');
        }
    })
}

Upvotes: 1

Views: 447

Answers (1)

vzsg
vzsg

Reputation: 2896

The culprit is in these three lines:

const promise = auth.createUserWithEmailAndPassword(email, pass);
promise.catch(e => console.log(e.message));
createUser();

You are firing off createUser() too soon. In the above code fragment, this happens right after starting the (asynchronous) registration process – the SDK never had a chance to actually create the user in the auth database!

The createUserWithEmailAndPassword returns a promise, as reflected in your local variable. What you need to do here is chaining the two calls, i.e. start the database manipulation after the promise is fulfilled.

Try this:

// inside the click handler
btnSignUp.addEventListener('click', e => {
    const email = txtEmail.value;
    const pass = txtPassword.value;
    const auth = firebase.auth();

    auth.createUserWithEmailAndPassword(email, pass)
        .then(user => createUser(user)) // <-- important!
        .catch(e => console.log(e.message));
});

function createUser(user) {
    // no need for currentUser if you pass it in as an argument
    if (user) {
        ...
    }
}

Upvotes: 1

Related Questions