I'm trying to set user presence in my React app using Firebase. Everytime a user logs in the app I save it the a users collection and I display it as a list in my app.

I need to show the online status for each user, so I'm using Firebase Realtime db to update Firestore db, this is the whole AuthContext.js file :

import React, { useState, useEffect, useContext, createContext } from "react";
import { db, rtdb } from "../firebase/firebase-config";
import {
  getAuth,
  signInWithPopup,
  GoogleAuthProvider,
  onAuthStateChanged,
  signOut,
} from "firebase/auth";
import {
  addDoc,
  collection,
  serverTimestamp,
  getDocs,
  query,
  where,
  limit,
  updateDoc,
  doc,
} from "firebase/firestore";
import { Redirect } from "react-router-dom";
import { ref as rtdbRef, set, onValue } from "firebase/database";

const authContext = createContext();

export function ProvideAuth({ children }) {
  const auth = useProvideAuth();
  return <authContext.Provider value={auth}>{children}</authContext.Provider>;
}

export const useAuth = () => {
  return useContext(authContext);
};

function useProvideAuth() {
  const [user, setUser] = useState(null);
  const provider = new GoogleAuthProvider();
  const auth = getAuth();
  const [userLoading, setUserLoading] = useState(true);

  const getUserByUid = async (uid) => {
    let exists = false;
    const querySnapshot = await getDocs(
      query(collection(db, "users"), where("uid", "==", uid), limit(1))
    );
    querySnapshot.forEach(() => (exists = true));
    return exists;
  };

  const persistUser = async (user) => {
    const exists = await getUserByUid(user.uid);
    if (!exists) {
      await addDoc(collection(db, "users"), {
        uid: user.uid,
        displayName: user.displayName,
        email: user.email,
        photoURL: user.photoURL,
        createdAt: serverTimestamp(),
        updatedAt: null,
      });
    }
  };

  const logIn = () =>
    signInWithPopup(auth, provider)
      .then((result) => {
        setUser(result.user);
        persistUser(result.user);
      })
      .catch((err) => {
        console.log(err);
      });

  const updateFirestoreUser = (user, status) => {
    if (user) {
      getDocs(
        query(collection(db, "users"), where("uid", "==", user.uid), limit(1))
      ).then((querySnapshot) => {
        querySnapshot.forEach((u) => {
          updateDoc(doc(db, "users", u.id), {
            online: status,
            updatedAt: serverTimestamp(),
          });
        });
      });
    }
  };

  const logOut = () =>
    signOut(auth)
      .then(() => {
        console.log("SIGNOUT", user);
        updateFirestoreUser(user, false);
        setUser(false);
        return <Redirect to="/login" />;
      })
      .catch((err) => {
        console.log(err);
      });

  function checkAuthStatus() {
    return new Promise((resolve, reject) => {
      try {
        onAuthStateChanged(auth, async (user) => {
          resolve(user);
          setUser(user);

          const connectedRef = rtdbRef(rtdb, ".info/connected");
          const myConnectionsRef = rtdbRef(rtdb, `status`);
          onValue(connectedRef, (snap) => {
            if (snap.val() === true) {
              console.log("TRUE");
              if (user) {
                set(myConnectionsRef, "connected");
                updateFirestoreUser(user, true);
              }
            } else {
              console.log("FALSE");
              updateFirestoreUser(user, false);
            }
            //onDisconnect(myConnectionsRef)
              //.set("disconnected")
              //.then(() => {
              //   updateFirestoreUser(user, false);
              //});
          });
        });
      } catch {
        reject("api failed");
        setUser(false);
      }
    });
  }

  const getUser = async () => {
    setUserLoading(true);
    await checkAuthStatus();
    setUserLoading(false);
  };

  useEffect(() => {
    getUser();
  }, []);

  return {
    user,
    logIn,
    logOut,
    userLoading,
  };
}

The online field in users collection gets updated when I login & logout, but not when I close the browser tab, it kinda works when I uncomment this part :

onDisconnect(myConnectionsRef)
 .set("disconnected")
 .then(() => {
    updateFirestoreUser(user, false);
});

But the changes reflect only in the Realtime db with no changes in Firestore db users collection, the string "disconnected" is added to the Realtime database but nothing changed in the user's entry I'm tying to update in the then() method.

Been stuck here for 2 days, I don't know what I'm doing wrong, I just need the online field to be true when the app is opened and the user is logged in, and false when the user is signed out or the app is closed in the browser.

CodePudding user response：

By following the presence system in the documentation you linked, you will gets presence information in Realtime Database.

To get that information into Firestore, you'll need to implement a Cloud Function that triggers in the Realtime Database writes as shown in the section on updating presence information in Firestore in the documentation on implementing presence on Firestore. That's the only way to get the presence information in Firestore, as that database doesn't have any onDisconnect like functionality that is required to build a presence system.