Auth Wrapper for `next-auth`

WithAuth.tsx

import { useSession } from "next-auth/react";
import { useRouter } from "next/router";

export default function WithAuth({ children }: { children: React.ReactNode }): JSX.Element {
  const router = useRouter();

  const { data, status } = useSession({
    required: true,
    onUnauthenticated() {
      router.push("/api/auth/signin");
    },
  });

  if (status === "loading") {
    return <div>Page Loading...</div>;
  }

  return <>{children}</>;
}