Tanstack Start + Firebase Auth

function RootComponent() {
  const { user } = useAuthContext();
  return (
    <AuthContextProvider>
      <RootDocument>
        <Outlet />
      </RootDocument>
    </AuthContextProvider>
  );
}

export const AuthContextProvider = ({ children }: any) => {
  const [user, setUser] = React.useState<any>(null);
  const [loading, setLoading] = React.useState(false);

  React.useEffect(() => {
    const unsubscribe = onAuthStateChanged(auth, (user) => {
      if (user) {
        console.log("USER FOUND!", user);
        setUser(user);
      } else {
        console.log("NO USER FOUND!");
        setUser(null);
      }
      setLoading(false);
    });

    return () => unsubscribe();
  }, []);

  return (
    <AuthContext.Provider value={{..user }}>
      {loading ? <div>Loading...</div> : children}
    </AuthContext.Provider>
  );
};

export const Route = createRootRouteWithContext<{
  user: any;
  queryClient: QueryClient;
}>()({

export const Route = createFileRoute("/_authed")({
  beforeLoad: ({ context }) => {
    console.log("Checking if user is authenticated...");
    if (!context.user) {
      console.log("User is not authenticated!");
      throw redirect({ to: "/login" });
    }
    console.log("User is authenticated!", context.user);
  },
  errorComponent: ({ error }) => {
    throw error;
  },
});