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


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)
        //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()
            .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