title: Get Current User Login User Information in Profile Page - Firebase and Vuejs
body: <p>I'm trying to create a user profile for signed up users in my application.
  I created a collection named profiles and field name in my cloud firestore to store the user's name when they register for an account.</p>
  <p>So, I'm using vuex for better management. Here is a piece of code for what I've done so far.</p>
  <p>My Store.js</p>
  <pre><code>signUserUp ({commit}, payload) {
        commit('setLoading', true)
        commit('clearError')
        firebase.auth().createUserWithEmailAndPassword(payload.email, payload.password)
          .then(
            user =&gt; {
              commit('setLoading', false)
              const newUser = {
                id: user.uid
              }
              commit('setUser', newUser)
              // Add a new document in collection &quot;cities&quot;
              db.collection('profiles').doc(user.user.uid).set({
                name: payload.name
              })
              .then(function () {
                console.log('Document successfully written!')
              })
              .catch(function (error) {
                console.error('Error writing document: ', error)
              })
              toastr.success('Your Account was created successfully')
            }
          )
          .catch(
            error =&gt; {
              commit('setLoading', false)
              commit('setError', error)
              toastr.error('Oops' + error.message)
            }
          )
      }
  </code></pre>
  <p>My SignUp.vue</p>
  <p>This is my text field to collect the user name first followed by the email and password of the user.</p>
  <pre><code>&lt;form @submit.prevent=&quot;onSignup&quot;&gt;
                               &lt;v-layout row&gt;
                                     &lt;v-flex xs12&gt;
                                         &lt;v-text-field
                                         name=&quot;name&quot;
                                         label=&quot;Name&quot;
                                         id=&quot;name&quot;
                                         v-model=&quot;name&quot;
                                         type=&quot;text&quot;
                                         required&gt;&lt;/v-text-field&gt;
                                     &lt;/v-flex&gt;
                                 &lt;/v-layout&gt;
                                 &lt;v-layout row&gt;
                                     &lt;v-flex xs12&gt;
                                         &lt;v-text-field
                                         name=&quot;email&quot;
                                         label=&quot;Email&quot;
                                         id=&quot;email&quot;
                                         v-model=&quot;email&quot;
                                         type=&quot;email&quot;
                                         required&gt;&lt;/v-text-field&gt;
                                     &lt;/v-flex&gt;
                                 &lt;/v-layout&gt;
                                 &lt;v-layout row&gt;
                                     &lt;v-flex xs12&gt;
                                         &lt;v-text-field
                                             :append-icon=&quot;showPassword ? 'visibility' : 'visibility_off'&quot;
                                             :type=&quot;showPassword ? 'text' : 'password'&quot;
                                             name=&quot;password input-10-2&quot;
                                             label=&quot;Password&quot;
                                             id=&quot;password&quot;
                                             value=&quot;&quot;
                                             class=&quot;input-group--focused&quot;
                                             v-model=&quot;password&quot;
                                             @click:append=&quot;showPassword = !showPassword&quot;
                                             required
                                         &gt;&lt;/v-text-field&gt;
                                     &lt;/v-flex&gt;
                                 &lt;/v-layout&gt;
                                 &lt;v-layout row&gt;
                                     &lt;v-flex xs12&gt;
                                         &lt;v-text-field
                                             :append-icon=&quot;showPasswordConfirm ? 'visibility' : 'visibility_off'&quot;
                                             :type=&quot;showPasswordConfirm ? 'text' : 'password'&quot;
                                             name=&quot;confirmPassword input-10-2&quot;
                                             label=&quot;Confirm Password&quot;
                                             id=&quot;confirmPassword&quot;
                                             value=&quot;&quot;
                                             class=&quot;input-group--focused&quot;
                                             v-model=&quot;confirmPassword&quot;
                                             @click:append=&quot;showPasswordConfirm = !showPasswordConfirm&quot;
                                             :rules=&quot;[comparePasswords]&quot;
                                         &gt;&lt;/v-text-field&gt;
                                     &lt;/v-flex&gt;
                                 &lt;/v-layout&gt;
                                 &lt;v-layout row wrap&gt;
                                     &lt;v-flex xs12 sm6 class=&quot;text-xs-center text-sm-left&quot;&gt;
                                         &lt;v-btn
                                           color=&quot;#4527a0&quot;
                                           type=&quot;submit&quot;
                                           class=&quot;btn__content&quot;
                                           :loading=&quot;loading&quot;
                                           :disabled=&quot;loading&quot;
                                           @click=&quot;loader = 'loading'&quot;
                                           &gt;
                                             Sign up
                                             &lt;span slot=&quot;loader&quot; class=&quot;custom-loader&quot;&gt;
                                                 &lt;v-icon light&gt;cached&lt;/v-icon&gt;
                                             &lt;/span&gt;
                                         &lt;/v-btn&gt;
                                     &lt;/v-flex&gt;
                                     &lt;v-flex xs12 sm6 class=&quot;mt-3 text-xs-center text-sm-right&quot;&gt;
                                         &lt;router-link to=&quot;/signin&quot; tag=&quot;span&quot; style=&quot;cursor: pointer;&quot;&gt;Already have an Account? Sign in&lt;/router-link&gt;
                                     &lt;/v-flex&gt;
                                 &lt;/v-layout&gt;
                             &lt;/form&gt;
  
  
  </code></pre>
  <p>The script for my SignUp.vue</p>
  <pre><code>
  export default {
      data () {
        return {
          name: null,
          email: null,
          password: '',
          confirmPassword: '',
          showPassword: false,
          showPasswordConfirm: false,
          loader: null
        }
      },
      methods: {
        onSignup () {
          this.$store.dispatch('signUserUp', {email: this.email, password: this.password})
        }
      }
  </code></pre>
  <p>I want the name the user enters during signing up for an account being pushed to the field I've in the profiles collection. But I'm getting this error</p>
  <p>DocumentReference.set() called with invalid data. Unsupported field value: undefined (found in field name)</p>