Protected Pages RSC

src/app/admin/[type]/page.js

@@ -1,4 +1,3 @@
-"use client";
 import ProtectedPage from "@/components/ProtectedPage";
 import Admins from "@/components/admin/dashboards/Admins";
 import Events from "@/components/admin/services/calendar";

src/components/ProtectedPage.jsx

@@ -1,69 +1,106 @@
-"use client";
-import { useEffect, useState } from "react";
-import { signIn, useSession } from "next-auth/react";
-import Loading from "@/components/Loading";
-import { usePathname } from "next/navigation";
 import RELEASES from "@/data/Releases";
 import Fault from "@/utils/error";
 import Navigation from "@/components/Navigation";
+import { headers } from "next/headers";
+import { redirect } from "next/navigation";
+import { getSession } from "@/utils/auth";
 
-const ProtectedPage = ({ children, restrictions, title }) => {
-  const { data: session, status } = useSession();
-  const [confirmed, setConfirmed] = useState(false);
-
-  const pathName = usePathname();
-
-  useEffect(() => {
-    if (RELEASES[pathName] > new Date()) {
-      throw new Fault(
-        423,
-        "Locked Resource",
-        "This resource has not been released",
-      );
-    }
-
-    if (status === "loading") return;
-    if (status !== "authenticated") {
-      void signIn("google");
-      return;
-    }
-
-    if (!session.user.roles && Object.keys(restrictions).length > 0) {
-      throw new Fault(
-        403,
-        "Unauthorized",
-        "You do not have any assigned roles",
-      );
-    }
-
-    const authorized = Object.entries(restrictions).some(([key, values]) =>
-      Array.isArray(values)
-        ? values.includes(session.user.roles[key])
-        : session.user.roles[key] === values,
+const ProtectedPage = async ({ children, restrictions, title }) => {
+  const session = await getSession();
+  const header = headers();
+  const pathName = header.get("x-url") || "";
+
+  if (!session) {
+    redirect(`/api/auth/signin/google?callbackUrl=${pathName}`);
+  }
+
+  if (RELEASES[pathName] > new Date()) {
+    throw new Fault(
+      423,
+      "Locked Resource",
+      "This resource has not been released",
     );
+  }
+
+  if (!session.user.roles && Object.keys(restrictions).length > 0) {
+    throw new Fault(403, "Unauthorized", "You do not have any assigned roles");
+  }
 
-    if (!authorized && Object.keys(restrictions).length > 0) {
-      throw new Fault(403, "Unauthorized", "You do not have access this page");
-    }
-    setConfirmed(true);
-  }, [status]);
+  console.log("session:", session.user.roles);
+  const authorized = Object.entries(restrictions).some(([key, values]) =>
+    Array.isArray(values)
+      ? values.includes(session.user.roles[key])
+      : session.user.roles[key] === values,
+  );
+
+  if (!authorized && Object.keys(restrictions).length > 0) {
+    throw new Fault(403, "Unauthorized", "You do not have access this page");
+  }
 
   const navigation = RegExp(/user\/|admin\//).test(pathName);
 
   return (
     <>
-      {status === "loading" && <Loading />}
-      {confirmed && (
-        <>
-          <title>{title}</title>
-          {navigation && <Navigation />}
-          <div className="z-0 flex h-screen w-full items-start justify-center overflow-x-hidden bg-hackathon-page py-12 lg:py-0">
-            <div className="h-full w-11/12">{children}</div>
-          </div>
-        </>
-      )}
+      <title>{title}</title>
+      {navigation && <Navigation />}
+      <div className="z-0 flex h-screen w-full items-start justify-center overflow-x-hidden bg-hackathon-page py-12 lg:py-0">
+        <div className="h-full w-11/12">{children}</div>
+      </div>
     </>
   );
 };
 
 export default ProtectedPage;
+
+// delete later
+// useEffect(() => {
+//   if (RELEASES[pathName] > new Date()) {
+//     throw new Fault(
+//       423,
+//       "Locked Resource",
+//       "This resource has not been released",
+//     );
+//   }
+
+//   if (status === "loading") return;
+//   if (status !== "authenticated") {
+//     void signIn("google");
+//     return;
+//   }
+
+//   if (!session.user.roles && Object.keys(restrictions).length > 0) {
+//     throw new Fault(
+//       403,
+//       "Unauthorized",
+//       "You do not have any assigned roles",
+//     );
+//   }
+
+//   const authorized = Object.entries(restrictions).some(([key, values]) =>
+//     Array.isArray(values)
+//       ? values.includes(session.user.roles[key])
+//       : session.user.roles[key] === values,
+//   );
+
+//   if (!authorized && Object.keys(restrictions).length > 0) {
+//     throw new Fault(403, "Unauthorized", "You do not have access this page");
+//   }
+//   setConfirmed(true);
+// }, [status]);
+
+// const navigation = RegExp(/user\/|admin\//).test(pathName);
+
+// return (
+//   <>
+//     {status === "loading" && <Loading />}
+//     {confirmed && (
+//       <>
+//         <title>{title}</title>
+//         {navigation && <Navigation />}
+//         <div className="z-0 flex h-screen w-full items-start justify-center overflow-x-hidden bg-hackathon-page py-12 lg:py-0">
+//           <div className="h-full w-11/12">{children}</div>
+//         </div>
+//       </>
+//     )}
+//   </>
+// );

src/components/admin/services/timer/Timer.tsx

@@ -1,3 +1,4 @@
+"use client";
 import { useState } from "react";
 import Clock from "./Clock";
 import { v4 as uuidv4 } from "uuid";

src/middleware.ts

@@ -0,0 +1,13 @@
+import { NextResponse } from "next/server";
+import type { NextRequest } from "next/server";
+
+export function middleware(request: NextRequest) {
+  const requestHeaders = new Headers(request.headers);
+  requestHeaders.set("x-url", request.nextUrl.pathname);
+
+  return NextResponse.next({
+    request: {
+      headers: requestHeaders,
+    },
+  });
+}