Firebase database is showing an undefined user id when interacting with Vuex

Question

Firebase database is showing an undefined user id when interacting with Vuex

I have recently developed an e-commerce website and completed the registration process with email and password.

Now, I am looking to store user information such as email, full name, and timestamp in the database.

The screenshot below shows that I can view the user data in the Google Chrome Dev Console. https://i.sstatic.net/PTL3h.png

However, upon checking the Firebase database via the browser, I noticed that the user ID appears as undefined instead of the actual user ID.

https://i.sstatic.net/GLMI7.png

Currently, I am at step 3 of the process:

Add user data into the database

I am facing difficulties understanding why this issue is occurring and would appreciate any assistance you can provide.

Here is a snippet from 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
    },
}

...
// Rest of the content remains unchanged
...

javascript firebase vue.js firebase-realtime-database firebase-authentication

Answer 1

Answer №1

The reason for this is that the createUserWithEmailAndPassword() method returns a promise that resolves with a UserCredential object, not just a User.

To access the user, you should use the user property of the UserCredential, like so:

    let newUser = null
    fireApp.auth().createUserWithEmailAndPassword(payload.email, payload.password)
        .then(userCredential => {
            newUser = userCredential.user;
            //...

It's worth noting that you don't have to call fireApp.auth().currentUser to get the user.

When using the createUserWithEmailAndPassword() method, after successfully creating the user account, the user will automatically be signed in to your application. Simply retrieve the user using userCredential.user as shown above.

Additionally, keep in mind that the updateProfile() method is asynchronous and returns a Promise, which should be integrated into your promises chain.

Here's an example implementation (not tested):

  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 user = null;
      fireApp.auth().createUserWithEmailAndPassword(payload.email, payload.password)
          .then(userCredential => {
              user = userCredential.user;
              return user.updateProfile({ displayName: payload.fullname });
          })
          .then(() => {
              const currentUser = {
                  id: user.uid,
                  email: payload.email,
                  name: payload.fullname,
                  role: 'consumer'
              }
              console.log('USER', currentUser)
              commit('setUser', currentUser)
              const userData = {
                  email: payload.email,
                  fullname: payload.fullname,
                  createdAt: new Date().toISOString()
              }

              return fireApp.database().ref(`users/${user.uid}`).set(userData)
          })
          .then(() => {
              commit('setJobDone', true)
              commit('setBusy', false)
          })
          .catch(error => {
              commit('setBusy', false)
              commit('setError', error)
          })
  }

Answer 2

The reason for this is that the createUserWithEmailAndPassword() method returns a promise that resolves with a UserCredential object, not just a User.

To access the user, you should use the user property of the UserCredential, like so:

    let newUser = null
    fireApp.auth().createUserWithEmailAndPassword(payload.email, payload.password)
        .then(userCredential => {
            newUser = userCredential.user;
            //...

It's worth noting that you don't have to call fireApp.auth().currentUser to get the user.

When using the createUserWithEmailAndPassword() method, after successfully creating the user account, the user will automatically be signed in to your application. Simply retrieve the user using userCredential.user as shown above.

Additionally, keep in mind that the updateProfile() method is asynchronous and returns a Promise, which should be integrated into your promises chain.

Here's an example implementation (not tested):

  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 user = null;
      fireApp.auth().createUserWithEmailAndPassword(payload.email, payload.password)
          .then(userCredential => {
              user = userCredential.user;
              return user.updateProfile({ displayName: payload.fullname });
          })
          .then(() => {
              const currentUser = {
                  id: user.uid,
                  email: payload.email,
                  name: payload.fullname,
                  role: 'consumer'
              }
              console.log('USER', currentUser)
              commit('setUser', currentUser)
              const userData = {
                  email: payload.email,
                  fullname: payload.fullname,
                  createdAt: new Date().toISOString()
              }

              return fireApp.database().ref(`users/${user.uid}`).set(userData)
          })
          .then(() => {
              commit('setJobDone', true)
              commit('setBusy', false)
          })
          .catch(error => {
              commit('setBusy', false)
              commit('setError', error)
          })
  }

Firebase database is showing an undefined user id when interacting with Vuex

Answer №1

Similar questions

Tips for Deactivating One Button While Allowing Others to Remain Active

Is the Angular $watch function able to track changes on an object's prototype members as well?

Dynamically Loading External JavaScript Files Depending on User Input

Vuetify's V-Layout and V-Flex components are essential for creating

I had a vision to create a blog using the power of React JS and NodeJS (Express, MongoDB). My goal was to have the ability to not only post text, but also code

Error with Expression Engine: PHP function cannot be executed

the integration of shapes in three.js is malfunctioning

Creating a customized style for a child styled-component within a parent component

Is it possible to refresh an iframe with PHP once a certain condition is satisfied?

Steps for accessing an ASP.NET control using getElementById

Setting up Vue/Vite configuration for a multi-page application with multiple entry and output files

Retrieve information on input type hidden using Vue.js

Refreshing is not necessary when submitting a form using Ajax to post data

Function that is asynchronous and returns an undefined variable

Using Vuex Namespaces to Manage State in a Store

Nativescript apps are unable to utilize Node modules

The onclick button in React is not triggering

ReactJS - When a click event is attached to a list of elements, it triggers the "click" event for each individual element in the list

Improving methods for handling AJAX requests in PHP

Is it possible to exchange meshes across different scenes in three.js?