redirect on unauthenticated

apps/web/components/layout.tsx

@@ -1,4 +1,4 @@
-import { Fragment } from "react";
+import { Fragment, useEffect } from "react";
 import { Disclosure, Menu, Transition } from "@headlessui/react";
 import Link from "next/link";
 import { useRouter } from "next/router";
@@ -42,13 +42,37 @@ function classNames(...classes: any) {
   return classes.filter(Boolean).join(" ");
 }
 
+function useRedirectToLoginIfUnauthenticated() {
+  const { data: session, status } = useSession();
+  const loading = status === "loading";
+  const router = useRouter();
+
+  useEffect(() => {
+    if (!loading && !session) {
+      router.replace({
+        pathname: "/login",
+        query: {
+          callbackUrl: `http://localhost:3000${location.pathname}${location.search}`,
+        },
+      });
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [loading, session]);
+
+  return {
+    loading: loading && !session,
+    session,
+  };
+}
+
 export default function Layout({ children }: any) {
+  useRedirectToLoginIfUnauthenticated();
   const router = useRouter();
   navigation.forEach((element) => {
     element.current = router.route.startsWith("/" + element.href.split("/")[1]);
   });
 
-  const session = useSession();
+  const { status } = useSession();
 
   return (
     <>

apps/web/pages/index.tsx

@@ -1,13 +1,18 @@
-import type { ReactElement } from "react";
-import Layout from "../components/layout";
-import type { NextPageWithLayout } from "./_app";
+import { NextPageContext } from "next";
+import { getSession } from "next-auth/react";
 
-const Page: NextPageWithLayout = () => {
-  return <p className="text-red-900">This is the index page</p>;
-};
+function RedirectPage() {
+  return;
+}
 
-Page.getLayout = function getLayout(page: ReactElement) {
-  return <Layout>{page}</Layout>;
-};
+export async function getServerSideProps(context: NextPageContext) {
+  const session = await getSession(context);
 
-export default Page;
+  if (!session?.user?.email) {
+    return { redirect: { permanent: false, destination: "/login" } };
+  }
+
+  return { redirect: { permanent: false, destination: "/dashboard" } };
+}
+
+export default RedirectPage;