From 276b27b99cd4f9924f9eb5a9f0e147ae40f1a3a4 Mon Sep 17 00:00:00 2001 From: Sean Quiambao <91030482+toastmeal@users.noreply.github.com> Date: Fri, 20 Sep 2024 02:52:17 -0700 Subject: [PATCH 1/3] converted protected page to RSC, may need to do some fixing with error page + redirecting --- src/app/admin/[type]/page.js | 1 - src/components/ProtectedPage.jsx | 143 +++++++++++------- src/components/admin/services/timer/Timer.tsx | 1 + src/middleware.ts | 13 ++ 4 files changed, 104 insertions(+), 54 deletions(-) create mode 100644 src/middleware.ts diff --git a/src/app/admin/[type]/page.js b/src/app/admin/[type]/page.js index 82dec4c2b..35f74757e 100644 --- a/src/app/admin/[type]/page.js +++ b/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"; diff --git a/src/components/ProtectedPage.jsx b/src/components/ProtectedPage.jsx index 0d9b51b19..45a92e971 100644 --- a/src/components/ProtectedPage.jsx +++ b/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" && } - {confirmed && ( - <> - {title} - {navigation && } -
-
{children}
-
- - )} + {title} + {navigation && } +
+
{children}
+
); }; 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" && } +// {confirmed && ( +// <> +// {title} +// {navigation && } +//
+//
{children}
+//
+// +// )} +// +// ); diff --git a/src/components/admin/services/timer/Timer.tsx b/src/components/admin/services/timer/Timer.tsx index 16106ef6c..6b3c59f74 100644 --- a/src/components/admin/services/timer/Timer.tsx +++ b/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"; diff --git a/src/middleware.ts b/src/middleware.ts new file mode 100644 index 000000000..919c75e6d --- /dev/null +++ b/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, + }, + }); +} From 2001e4e892e4ccf8f4ba61f019da714eeaaf3951 Mon Sep 17 00:00:00 2001 From: Sean Quiambao <91030482+toastmeal@users.noreply.github.com> Date: Sun, 29 Sep 2024 23:25:17 -0700 Subject: [PATCH 2/3] added signin component --- src/components/ProtectedPage.jsx | 4 ++-- src/components/SignIn.tsx | 11 +++++++++++ 2 files changed, 13 insertions(+), 2 deletions(-) create mode 100644 src/components/SignIn.tsx diff --git a/src/components/ProtectedPage.jsx b/src/components/ProtectedPage.jsx index 45a92e971..f19de00fa 100644 --- a/src/components/ProtectedPage.jsx +++ b/src/components/ProtectedPage.jsx @@ -2,8 +2,8 @@ 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"; +import SignIn from "./SignIn"; const ProtectedPage = async ({ children, restrictions, title }) => { const session = await getSession(); @@ -11,7 +11,7 @@ const ProtectedPage = async ({ children, restrictions, title }) => { const pathName = header.get("x-url") || ""; if (!session) { - redirect(`/api/auth/signin/google?callbackUrl=${pathName}`); + return ; } if (RELEASES[pathName] > new Date()) { diff --git a/src/components/SignIn.tsx b/src/components/SignIn.tsx new file mode 100644 index 000000000..f36a3632b --- /dev/null +++ b/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; From eadddeede5b24af8a3492a13eefae42f3b38c53e Mon Sep 17 00:00:00 2001 From: seanquiambao Date: Mon, 30 Sep 2024 17:30:33 -0700 Subject: [PATCH 3/3] removed comments and console logs --- src/components/ProtectedPage.jsx | 54 -------------------------------- 1 file changed, 54 deletions(-) diff --git a/src/components/ProtectedPage.jsx b/src/components/ProtectedPage.jsx index f19de00fa..7fcfefeb9 100644 --- a/src/components/ProtectedPage.jsx +++ b/src/components/ProtectedPage.jsx @@ -26,7 +26,6 @@ const ProtectedPage = async ({ children, restrictions, title }) => { throw new Fault(403, "Unauthorized", "You do not have any assigned roles"); } - console.log("session:", session.user.roles); const authorized = Object.entries(restrictions).some(([key, values]) => Array.isArray(values) ? values.includes(session.user.roles[key]) @@ -51,56 +50,3 @@ const ProtectedPage = async ({ children, restrictions, title }) => { }; 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" && } -// {confirmed && ( -// <> -// {title} -// {navigation && } -//
-//
{children}
-//
-// -// )} -// -// );