Adding document to a collection within .then of firebase auth.createUserWithEmailAndPassword

Question

With VueJS and Firebase, I want to create a user and then if it succeed add more info to a users collection.

Problem is my variable usersCollection is undefined when I get in the .then. I know I can take that exact code out of the .then and it works. Also, the auth function works as it is supposed to. It would seem that the problem is that I'm trying to access the collection inside the .then. But then again, I need to do this only if I successfully create a new user for authentication to avoid having users info from unregistered users. I don't enter the .catch either and I don't get an error of any kind in the chrome console. Any idea how to get this logic to work?

I initialize everything about firebase with this :

import * as firebase from 'firebase/app'
import 'firebase/auth'
import 'firebase/firestore'
import 'firebase/analytics'

const firebaseConfig = {
  //configs
};
firebase.initializeApp(firebaseConfig);
firebase.analytics();

const db = firebase.firestore();
const auth = firebase.auth();
const usersCollection = db.collection('users');

export {
  db,
  auth,
  usersCollection
}

The code is located in the main store of the app :

import * as types from './types';
import {
  auth,
  usersCollection,
} from '../../../../config/firebase';

//...

[types.ADD]: ({commit}, user) => {
    auth.createUserWithEmailAndPassword(user.email, user.password)
      .then((e) => {
        usersCollection.add(user)
          .then((docRef) => {
            commit(types.MUTATE_ADD, user);
            console.log("Document written with ID: ", docRef.id);
          })
          .catch((error) => {
            console.error("Error adding document: ", error);
          });
      })
      .catch((e) => {
        //...
        alert('An error occured while creating employee.\n' + e.code + '\n' + e.message);
        return false;
      });
  }

Above, the the user I use for authentication is created, but when I get to the .then usersCollection is undefined, yet I get no error in the Chrome console and the user is not created.

As explained earlier, if I take the block where I add the user to the collection out of the .then I get to add the user to the collection :

[types.ADD]: ({commit}, user) => {
    auth.createUserWithEmailAndPassword(user.email, employeeHelper.makePassword(user))
      .then((e) => {

      })
      .catch((e) => {
        var errorCode = e.code;
        var errorMessage = e.message;
        alert('An error occured while creating employee.\n' + e.code + '\n' + e.message);
        return false;
      });
    usersCollection.add(user)
      .catch((error) => {
        console.error("Error adding document: ", error);
      });
  }

Answer 1

Using another method made it work exactly as I intended :

[types.ADD]: ({commit}, user) => {
    commit(types.MUTATE_ADD, user);
    auth.createUserWithEmailAndPassword(user.email, employeeHelper.makePassword(user))
      .then((e) => {
        usersCollection.doc(user.email).get().then((querySnapshot) => {
          querySnapshot.ref.set(user).then(() => {
            //log success
          })
        }).catch((e) => {
          console.log(e);
          //log error
        })
      })
      .catch((e) => {
        //log error
        return false;
      });
  }

The difference is that instead of using .add() method on my usersCollection, I used .doc(user.email).get().then(...) and I set data afterwards instead of using .add(...). For some reason, the Chrome console still shows usersCollection as if it is undefined if I put a breakpoint there :

usersCollection.doc(user.email).get().then((querySnapshot) => {

But the data is properly pushed to firestore nonetheless. So I'm not completely comfortable with the fact that I don't know why it works this way but not the other, but the result is exactly what I needed even though I suspect it creates some overhead.