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

Question

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.

So, I'm using vuex for better management. Here is a piece of code for what I've done so far.

My Store.js

signUserUp ({commit}, payload) {
      commit('setLoading', true)
      commit('clearError')
      firebase.auth().createUserWithEmailAndPassword(payload.email, payload.password)
        .then(
          user => {
            commit('setLoading', false)
            const newUser = {
              id: user.uid
            }
            commit('setUser', newUser)
            // Add a new document in collection "cities"
            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 => {
            commit('setLoading', false)
            commit('setError', error)
            toastr.error('Oops' + error.message)
          }
        )
    }

My SignUp.vue

This is my text field to collect the user name first followed by the email and password of the user.

<form @submit.prevent="onSignup">
                             <v-layout row>
                                   <v-flex xs12>
                                       <v-text-field
                                       name="name"
                                       label="Name"
                                       id="name"
                                       v-model="name"
                                       type="text"
                                       required></v-text-field>
                                   </v-flex>
                               </v-layout>
                               <v-layout row>
                                   <v-flex xs12>
                                       <v-text-field
                                       name="email"
                                       label="Email"
                                       id="email"
                                       v-model="email"
                                       type="email"
                                       required></v-text-field>
                                   </v-flex>
                               </v-layout>
                               <v-layout row>
                                   <v-flex xs12>
                                       <v-text-field
                                           :append-icon="showPassword ? 'visibility' : 'visibility_off'"
                                           :type="showPassword ? 'text' : 'password'"
                                           name="password input-10-2"
                                           label="Password"
                                           id="password"
                                           value=""
                                           class="input-group--focused"
                                           v-model="password"
                                           @click:append="showPassword = !showPassword"
                                           required
                                       ></v-text-field>
                                   </v-flex>
                               </v-layout>
                               <v-layout row>
                                   <v-flex xs12>
                                       <v-text-field
                                           :append-icon="showPasswordConfirm ? 'visibility' : 'visibility_off'"
                                           :type="showPasswordConfirm ? 'text' : 'password'"
                                           name="confirmPassword input-10-2"
                                           label="Confirm Password"
                                           id="confirmPassword"
                                           value=""
                                           class="input-group--focused"
                                           v-model="confirmPassword"
                                           @click:append="showPasswordConfirm = !showPasswordConfirm"
                                           :rules="[comparePasswords]"
                                       ></v-text-field>
                                   </v-flex>
                               </v-layout>
                               <v-layout row wrap>
                                   <v-flex xs12 sm6 class="text-xs-center text-sm-left">
                                       <v-btn
                                         color="#4527a0"
                                         type="submit"
                                         class="btn__content"
                                         :loading="loading"
                                         :disabled="loading"
                                         @click="loader = 'loading'"
                                         >
                                           Sign up
                                           <span slot="loader" class="custom-loader">
                                               <v-icon light>cached</v-icon>
                                           </span>
                                       </v-btn>
                                   </v-flex>
                                   <v-flex xs12 sm6 class="mt-3 text-xs-center text-sm-right">
                                       <router-link to="/signin" tag="span" style="cursor: pointer;">Already have an Account? Sign in</router-link>
                                   </v-flex>
                               </v-layout>
                           </form>

The script for my SignUp.vue


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})
      }
    }

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

DocumentReference.set() called with invalid data. Unsupported field value: undefined (found in field name)

score 3 · Answer 1 · answered May 10 '19 at 04:20

In your code, you are using

firebase.auth().createUserWithEmailAndPassword(payload.email, payload.password).then(user=>{
  //getting your user details
});

But there is no any

then(user=>{//user details})

function in firebase to get user detail after sign up or log in.

There is a separate function to check the authentication state of a user where you can get your user detail and then store it is Firestore. You can use the following method:-

For Signup of a user:

firebase.auth().createUserWithEmailAndPassword(email, password).catch(function(error) {
  // Handle Errors here.
  var errorCode = error.code;
  var errorMessage = error.message;
  // ...
});

After signup you have to signIn your user to get user detail in authentication observer.

For SignIn of a user:

firebase.auth().signInWithEmailAndPassword(email, password).catch(function(error) {
  // Handle Errors here.
  var errorCode = error.code;
  var errorMessage = error.message;
  // ...
});

When a user successfully signs in, you can get information about the user in the observer.

firebase.auth().onAuthStateChanged(function(user) {
  if (user) {
    // User is signed in.
    var displayName = user.displayName;
    var email = user.email;
    var emailVerified = user.emailVerified;
    var photoURL = user.photoURL;
    var isAnonymous = user.isAnonymous;
    var uid = user.uid;
    var providerData = user.providerData;
    // ...
  } else {
    // User is signed out.
    // ...
  }
});

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

1 Answers1

Linked