berningb berningb - 29 days ago 17
Javascript Question

How do I add a user to my Fire base 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 Fire base db. I'm very new to fire base 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 fire base 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');
}
})
}

Answer

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) {
        ...
    }
}
Comments