NextJS 13 - Auth Checking is not working as expected

[rgbskills]

I have a wrapper component that redirects unauthenticated users and renders the children (layout in my case) if the user is logged in. But sometimes it works and sometimes it wont load anything that it is wrapped around.

"use client"

import { useAuthUser } from "@react-query-firebase/auth";
import { redirect } from 'next/navigation';
import { auth } from "../firebase-config";

export function UserRedirectOnLoggedOut({children, href}) {
  const user = useAuthUser(["user"], auth);

  if (user.isLoading) {
    return <div />;
  }

  if (user.data) {
    return (
      <>
        {children}
      </>
    );
  }

  redirect(href);
}

Can anyone help me out ?

[kabtamu-degifie]

The issues regarding infinite loading and disabled functionality associated with the useFirestoreDocumentData hook have been resolved. Therefore, we can now utilize it with Next.js versions 13 or 14. https://github.com/invertase/react-query-firebase/pull/97