[Vuejs]-User.displayName not accessible inside the script but available in template in VueJs?

Okay, the problem is that the returnUser will be called by vue regardless of the auth state of the current user. The auth state is changed after a split second or so by firebase, but by that time, you code inside returnUser has already executed. Naturally giving you undefined inside the script tag. But, as this property is reactive, it will always change when the auth state changes hence making the user details available in the template.

Solution is to just setup a watcher for the user property to call the returnUser function whenever the user’s auth state changes. Rest of the code in composable can remain as is, because it’s working correctly as you’re able to access the user object in template tag.

<template>
  <p>Process Payroll</p>
  <h1>{{ user.displayName }} </h1>
  <h1>{{ docs }} </h1>
</template>

<script>
import getUser from '@/composables/getUser'
import { ref, onMounted, watch } from 'vue'
import { projectFirestore, projectAuth } from '@/firebase/config'
import { useRouter, useRoute } from 'vue-router'

export default {
    setup() {
    const { user } = getUser();
    const lastName = ref("");
    const firstName = ref("");
    const docs = ref([]);

    const returnUser = async () => {
      const res = await projectFirestore
        .collection("users")
        .where("displayName", "==", user.displayName)
        .get();
      if (!error.value) {
        const doc = res.filter((userObj) => {
          if (user.displayName === userObj.data().displayName) {
            return user.lastName;
          }
        });
        docs.value = doc;
      }
    };

    onMounted(returnUser);
    watch(user, returnUser);

    return { user, docs, returnUser};
  },
}
</script>

EDIT: I just forgot to import the watch method from vue previously. Updated my answer to do just that.

@BilalHussain I would also say first try my answer above. Now, coming to your question on a better approach to get the firstName & lastName, I could explain you what I’ve implemented for one of my projects. So I have used firebase auth for authentication & signup process. When a user registers with firebase, you get a uid for user that doesn’t change. So I would store all the user data in a collection against the uid as a document id.

Example:

When a user logs in, in the front end I always have the uid, so I can just query that particular document and get the data instead searching the entire collection by using the following syntax:

const currentUser = await firebase.auth().currentUser;
const user = await firestore.collection("users").doc(currentUser.uid).get();
console.log(user.data())

So I believe, you could use a similar approach of creating a document against a unique hash in firestore. So when the user logs in, you have the hash and you can query it directly from firestore. Hope this helps!

References:

• Querying data
• Managing users