Using vuex, firestore, and createUserWithEmailAndPassword, how do I create a user profile collection when a user registers?

Question

For the app I'm building, I want my users to have a profile created for them when they register; the profile would contain the user's username, email, and the uid created by firebase authentication. I've got the authentication portion using createUserWithEmailAndPassword to work on its own. I'm also able to create a "users" collection, capturing a username and the user's email, on its own as well. However, I'm running into trouble grabbing and saving the uid to the user's profile in the user's collection.

Here is the code I have at the moment:

import * as firebase from "firebase/app";
import db from "../../components/firebase/firebaseInit";

  actions: {
    registerUser({ commit }, payload) {
      commit("setLoading", true);
      commit("clearError");

      firebase
        .auth()
        .createUserWithEmailAndPassword(payload.email, payload.password)
        .then(user => {
          commit("setLoading", false);
          const newUser = {
            email: user.email,
            id: user.uid,
            courses: []
          };
          commit("setUser", newUser);

          db.collection("users")
            .add({
              username: payload.username,
              email: user.email,
              userId: user.uid
            })
            .then(() => {
              console.log("New user added!");
            })
            .catch(err => {
              console.log(err);
            });
        })
        .catch(err => {
          commit("setLoading", false);
          commit("setError", err);
        });
    },

In the research I've done, I've found these suggested solutions:

Get Current User Login User Information in Profile Page - Firebase and Vuejs

Cloud Firestore saving additional user data

And this video:

https://www.youtube.com/watch?v=qWy9ylc3f9U

And I have tried using the set() method instead of add(), as well.

But none of them seem to work, for me at least.

Thank you in advance for your help. And if you need to see any more code, just let me know.

score 1 · Accepted Answer · answered Dec 18 '19 at 09:14

You haven't shared the error message you get, but most probably the error comes from the fact that the createUserWithEmailAndPassword() method returns a UserCredential and not a User.

So you have to do as follows:

import * as firebase from "firebase/app";
import db from "../../components/firebase/firebaseInit";

  actions: {
    registerUser({ commit }, payload) {
      commit("setLoading", true);
      commit("clearError");

      firebase
        .auth()
        .createUserWithEmailAndPassword(payload.email, payload.password)
        .then(userCredential=> {
          commit("setLoading", false);

          const user = userCredential.user;  // <-- Here is the main change 

          const newUser = {
            email: user.email,
            id: user.uid,
            courses: []
          };
          commit("setUser", newUser);

          return db.collection("users")  
            .add({
              username: payload.username,
              email: user.email,
              userId: user.uid
            });

        })
        .then(() => {
              console.log("New user added!");
        })
        .catch(err => {
          commit("setLoading", false);
          commit("setError", err);
        });
    },

Using vuex, firestore, and createUserWithEmailAndPassword, how do I create a user profile collection when a user registers?

1 Answers1