Home » vue » Vuex and firebase: The user id is undefined in the firebase database

Vuex and firebase: The user id is undefined in the firebase database

Posted by: admin November 26, 2021 Leave a comment

Questions:

I am creating an e-commerce web site.

Now I finished creating the new account with email and password.

And I want to insert the user email, full name, and timestamp in the database.

As you can see in the picture below, I could see the USER data in the google chrome dev console.
enter image description here

But when I checked the firebase database in the browser, I cannot see the user id. And instead, I see undefined in the user id column.

enter image description here

Now I am on the step3 process.

  1. Add user data into database

I cannot figure out why it’s happening, so I hope you can help me out.

This is my store/index.js file.

import fireApp from '@/plugins/firebase'


export const state = () => ({
    
    user: null,
    error: null,
    busy: false,
    jobDone: false
})

export const mutations = {
   
    setUser (state, payload) {
        state.user = payload
    },
    setError (state, payload) {
        state.error = payload
    },
    clearError (state, payload) {
        state.error = null
    },
    setBusy (state, payload) {
        state.busy = payload
    },
    setJobDone (state, payload) {
        state.jobDone = payload
    },
}

export const actions = {
   
    signUpUser({commit}, payload) {
        commit('setBusy', true)
        commit('clearError')
        //1.Signup new user.
        //2.Update firebase user profile & set local user data.
        //3.Add user data into database
        //4.Attach user to consumer group
        let newUser = null
        fireApp.auth().createUserWithEmailAndPassword(payload.email, payload.password)
            .then(user => {
                newUser = user
                var user = fireApp.auth().currentUser;
                user.updateProfile({ displayName: payload.fullname })
                const currentUser = {
                    id: user.uid,
                    email: payload.email,
                    name: payload.fullname,
                    role: 'consumer'
                }
                console.log('USER', currentUser)
                commit('setUser', currentUser)
            })
            .then(() => {
                const userData = {
                    email: payload.email,
                    fullname: payload.fullname,
                    createdAt: new Date().toISOString()
                }
                
                fireApp.database().ref(`users/${newUser.uid}`).set(userData)
            })
            .then(() => {
                commit('setJobDone', true)
                commit('setBusy', false)
            })
            .catch(error => {
                commit('setBusy', false)
                commit('setError', error)
            })
    }
}

export const getters = {
    
    user (state) {
        return state.user
    },
    error (state) {
        return state.error
    },
    busy (state) {
        return state.busy
    },
    jobDone (state) {
        return state.jobDone
    }
}



  
Answers: