Index.vue

<template>
  <q-page class="row items-center justify-evenly">
    <q-btn color="primary" @click="signIn">Sign in</q-btn>

    <q-input v-model="status" label="Status" />
    <q-btn color="primary" @click="saveStatus(loggedInUserName, status, avatarUrl)">Save status</q-btn>

    <q-card v-for="(val, index) in statuses" :key="index">
      <q-card-section>
        <q-item-section avatar v-if="val.avatarUrl">
          <q-avatar>
            <img :src="val.avatarUrl">
          </q-avatar>
        </q-item-section>
        <q-item-section>
          <div class="text-h6">{{val.displayName}}</div>
        </q-item-section>
        {{val.status}}
      </q-card-section>
    </q-card>
  </q-page>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue';
import { getAuth, signInWithPopup, GoogleAuthProvider, onAuthStateChanged } from "firebase/auth";
import { getFirestore, doc, collection, query, onSnapshot, setDoc } from "firebase/firestore"; 


export default defineComponent({
  name: 'PageIndex',
  setup() {
    const status = ref('');
    const loggedInUserName = ref('');
    const avatarUrl = ref('');
    const provider = new GoogleAuthProvider();
    const db = getFirestore();
    const auth = getAuth();
    const statuses = ref<any[]>([]);

    const unsub = onSnapshot(query(collection(db, "statuses")), (querySnapshot) => {
        statuses.value = querySnapshot.docs.map(doc => doc.data());
    });

    async function signIn() {
      const result = await signInWithPopup(auth, provider);
    }

    onAuthStateChanged(auth, (user) => {
      loggedInUserName.value = user?.displayName || '';
      avatarUrl.value = user?.photoURL || '';
    });

    async function saveStatus(id: string, status: string, avatarUrl: string) {
      // Add a new document in collection "cities"
      await setDoc(doc(db, "statuses", id), {
        status, avatarUrl, displayName: id
      });
    }

    return { signIn, status, loggedInUserName, saveStatus, avatarUrl, statuses };
  }
});
</script>