Protected Pages to 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,67 +1,50 @@
-"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 { getSession } from "@/utils/auth";
+import SignIn from "./SignIn";
+
+const ProtectedPage = async ({ children, restrictions, title }) => {
+  const session = await getSession();
+  const header = headers();
+  const pathName = header.get("x-url") || "";
+
+  if (!session) {
+    return <SignIn callback={pathName} />;
+  }
+
+  if (RELEASES[pathName] > new Date()) {
+    throw new Fault(
+      423,
+      "Locked Resource",
+      "This resource has not been released",
+    );
+  }
 
-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",
-      );
-    }
+  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 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]);
+  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>
     </>
   );
 };

src/components/SignIn.tsx

@@ -0,0 +1,11 @@
+"use client";
+import { signIn } from "next-auth/react";
+
+interface props {
+  callback: string;
+}
+
+const SignIn = ({ callback }: props) =>
+  void signIn("google", { callbackUrl: callback });
+
+export default SignIn;

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,
+    },
+  });
+}