Unable to use collection.set after createUserWithEmailAndPassword

Question

I've a signup user page in which half of it works and half doesn't.

What works: I'm able to successfully run the createUserWithEamilAndPassword call via firebase firestore.

What doesn't work: Inside of the promise for that call, I am trying to take the user object, pull out the uid, and then create a matching user in the firestore db. The problem is that whenever I run the collection("users").set I'm receiving an error that the default collection is not a function. (See 'Console error" below.)

I'm reading that error as vue or firebase not recognizing the fb.collection('users').doc(res.user.uid).set... as a valid function. I'm used to getting that error when I've forgotten to include a component, but (as you see below) I've already used the fb.auth... in the call before.

Any help is greatly appreciated!

Console Error:

LOGIN ERRORs TypeError: _components_firebase_firebaseInit__WEBPACK_IMPORTED_MODULE_2__.default.collection is not a function
    at index.js:193
    at e.g (vendors.app.js:440)
    at Fb (vendors.app.js:443)
    at Bb (vendors.app.js:443)
    at A.push../node_modules/@firebase/auth/dist/auth.esm.js.g.Xb (vendors.app.js:442)
    at kb (vendors.app.js:436)

Template:

<template>

  <v-layout>

          <v-text-field
            v-model="first_name"
            :rules="[rules.required]"
            label="First Name"
            required/>


          <v-text-field
            v-model="last_name"
            :rules="[rules.required]"
            label="Last Name"
            required/>
          <br>

          <v-text-field
            v-model="email"
            :rules="[rules.required]"
            label="Email Address"
            required/>
          <br>

          <v-text-field
            v-model="password"
            :append-icon="showPass ? 'visibility_off' : 'visibility'"
            :rules="[rules.required]"
            :type="showPass ? 'text' : 'password'"
            label="Password"
            hint="At least 8 characters"
            min="8"
            counter
            @click:append="showPass = !showPass" />
          <br>

          <v-text-field
            v-model="confirmation"
            :append-icon="showConf ? 'visibility_off' : 'visibility'"
            :rules="[rules.required, rules.emailMatch]"
            :type="showConf ? 'text' : 'password'"
            name="input-10-2"
            label="Password (again)"
            hint="At least 8 characters"
            value="Pa"
            @click:append="showConf = !showConf" />
          <br>

          <v-spacer/>
          <v-btn
            color="pink"
            class="color: #FFFFFF"
            dark
            flat
            round
            @click="goLogin()">Return to Login Page</v-btn>
          <v-btn
            color="primary"
            class="color: #FFFFFF"
            dark
            @click="signup()">Register</v-btn>


  </v-layout>
</template>

Script

<script>
import fb from '../../components/firebase/firebaseInit'

export default {
  layout: 'auth',
  data () {
    return {
      email: faker.internet.email(),
      password: '11112222',
      confirmation: '11112222',
      showPass: false,
      showConf: false,
      rules: {
          required: value => !!value || 'Required.',
          // min: v => v.length >= 8 || 'Min 8 characters',
          emailMatch: this.password == this.confirmation || ('The password and confirmation you entered don\'t match')
        }
    }
  },

  // methods: mapActions('auth', ['login']),
  methods: {

    signup: function(email,password) {
      let _this = this
      console.log("STORE", this.$store);

      fb.auth.createUserWithEmailAndPassword(this.email, this.password)
      .then(function (res) {

        _this.$store.commit('setCurrentUser', res.user)
        console.log("INSIDE with user",res.user.uid);
        console.log("INSIDE with this.email",_this.email);

        // **********************************
        // *** THIS IS WHAT"S NOT WORKING ***
        // FYI, I even tried to simply hard code in a number                                                
        //  for the uid (e.g., .doc()) and still received the
        //  error. Also, res.user and res.user.uid are valid.
        // **********************************
        fb.collection('users').doc(res.user.uid).set({
          email: _this.email
        })
        .then(() => {
          // SETTING PROFILE
          _this.$store.dispatch('fetchUserProfile')
          _this.$router.push('/')
        }).catch(err => {
          console.log(err)
        })

      }).catch(err => {
          console.log("LOGIN ERRORs", err)
      })
    },

}
</script>

firebaseConfig

import firebase from 'firebase/app'
import 'firebase/firestore'
import 'firebase/auth'

const config = {
  // REMOVED THE VALUES FOR SECURITY, but they are correct in the app
  apiKey: "",
  authDomain: "",
  databaseURL: "",
  projectId: "",
  storageBucket: "",
  messagingSenderId: ""
}

firebase.initializeApp(config)

// firebase utils
const db = firebase.firestore()
const auth = firebase.auth()
const currentUser = auth.currentUser

// date issue fix according to firebase
const settings = {
    timestampsInSnapshots: true
}
db.settings(settings)

export default {
  db,
  auth,
  currentUser
}

Answer 1

When creating the user, the code uses fb.auth :

  fb.auth.createUserWithEmailAndPassword(this.email, this.password)

To access Cloud Firestore, use the Firestore parameter set up in the config file, just like the code does for Auth.

    fb.db.collection('users').doc(res.user.uid).set({
      email: _this.email
    })