Best way to handle authenticated routes with http-only cookie

export const Route = new FileRoute("/app").createRoute({
  beforeLoad: async ({ context: { queryClient } }) => {
    try {
      const user = await queryClient.ensureQueryData(currentUserQueryOptions());
      return { user };
    } catch (error) {
      console.log(error);
    }
  },
  component: App,
});

export const queryClient = new QueryClient({
  //....
  queryCache: new QueryCache({
    onError: (error) => {
      if (error?.response?.status === 401) {
        getToggleIsLoggedInAction()(false);
      }
    },
  }),
});

function App() {//component of Route /app
  const isLoggedIn = useIsLoggedIn();
  const { logout } = useLoginActions();
  const location = useRouterState({ select: (s) => s.location });
  const user = Route.useRouteContext({
    select: (s) => s.user,
  });
  const navigate = Route.useNavigate();

  useEffect(() => {
    if (!isLoggedIn && !location.href.includes("login")) {//feels a bit odd
      navigate({
        to: "/login",
        search: { redirect: location.href },
      });
    }
  }, [isLoggedIn, navigate, location.href]);

  const logoutUser = () => {
    logout({ app: "vouchers" });
  };

  return (
    <div>
      <NavBar user={user} onLogout={logoutUser} />
      <div>
        <Outlet />
      </div>
    </div>
  );
}