I am using Next.js and Firebase.

I want to allow users to sign up with Google, but I need to check at the app level whether the users status is "incomplete" or "active".

Here is my useEffect. I listen to userData here and if the status is "incomplete", I redirect the user to the place where I can finish their sign up process (e.g. ask for username).

useEffect(() => {
    if (currentUser && currentUser !== "unauthenticated") {
      const docRef = doc(db, "users", currentUser.uid);
      return onSnapshot(docRef, async (doc) => {
        let data = doc.data() as UserData;
        if (!data) {
          return;
        }
        if (data?.status === "incomplete") {
          router.push("/complete-user-data");
          return;
        }
        setData(doc.data() as UserData);
      });
    }
  }, [currentUser, router, setData]);

This would work however as the useEffect is constantly rerendering due to the router.push("/complete-user-data");, I am in a infinite loop.

Whats the best way of creating a top level listener that will basically block the user based on a certain condition and push them to a certain route?

Is there a way to only push to a route if the user isn't currently on that route (in my case, if they're not on /complete-user-data?)