Add auth-guard

Author: UnwilledTangent

apps/frontend/src/app/page.tsx

@@ -48,6 +48,7 @@ import {
   ValidateUser,
   VerifyTokenResponseType,
 } from "./services/user";
+import { useRouter } from 'next/navigation';
 
 /**
  * defines the State of the page whe a user is deleing an object. Has 3 general states:
@@ -123,27 +124,31 @@ export default function Home() {
   // State for refreshing data
   const [refresh, setRefresh] = useState(false);
 
-  // used to check if user jwt is verified
+  // used to check if user JWT is verified
 
   const [userId, setUserId] = useState<string | undefined>(undefined);
   const [email, setEmail] = useState<string | undefined>(undefined);
   const [username, setUsername] = useState<string | undefined>(undefined);
   const [isAdmin, setIsAdmin] = useState<boolean | undefined>(undefined);
-  // useLayoutEffect(() => {
-  //   var isAuth = false;
-
-  //   ValidateUser().then((data: VerifyTokenResponseType) => {
-  //     setUserId(data.data.id);
-  //     setEmail(data.data.email);
-  //     setUsername(data.data.username);
-  //     setIsAdmin(data.data.isAdmin);
-  //     isAuth = true;
-  //   }).finally(() => {
-  //     if(!isAuth){
-  //       redirect("/login")
-  //     }
-  //   });
-  // }, [])
+
+  const router = useRouter();
+  
+  useLayoutEffect(() => {
+    var isAuth = false;
+
+    ValidateUser().then((data: VerifyTokenResponseType) => {
+      setUserId(data.data.id);
+      setEmail(data.data.email);
+      setUsername(data.data.username);
+      setIsAdmin(data.data.isAdmin);
+      isAuth = true;
+    }).finally(() => {
+      if(!isAuth){
+        // cannot verify
+        router.push('/login'); // Client-side redirect using router.push
+      }
+    });
+  }, [router])
 
   const handleEditClick = (index: number, question: Question) => {
     // Open the modal for the specific question

apps/frontend/src/app/profile/page.tsx

@@ -14,12 +14,13 @@ import {
 import { Content } from "antd/es/layout/layout";
 import "./styles.scss";
 import { EditOutlined, SaveOutlined } from "@ant-design/icons";
-import { useEffect, useState } from "react";
+import { useEffect, useState, useLayoutEffect } from "react";
 import {
   UpdateUser,
   ValidateUser,
   VerifyTokenResponseType,
 } from "../services/user";
+import { useRouter } from 'next/navigation';
 
 interface ProfilePageProps {}
 
@@ -32,6 +33,30 @@ const ProfilePage = (props: ProfilePageProps): JSX.Element => {
   const [refresh, setRefresh] = useState<boolean>(false);
   const [messageApi, contextHolder] = message.useMessage();
 
+  // used to check if user JWT is verified
+
+  const [userId, setUserId] = useState<string | undefined>(undefined);
+  const [isAdmin, setIsAdmin] = useState<boolean | undefined>(undefined);
+
+  const router = useRouter();
+  
+  useLayoutEffect(() => {
+    var isAuth = false;
+
+    ValidateUser().then((data: VerifyTokenResponseType) => {
+      setUserId(data.data.id);
+      setEmail(data.data.email);
+      setUsername(data.data.username);
+      setIsAdmin(data.data.isAdmin);
+      isAuth = true;
+    }).finally(() => {
+      if(!isAuth){
+        // cannot verify
+        router.push('/login'); // Client-side redirect using router.push
+      }
+    });
+  }, [router])
+
   useEffect(() => {
     ValidateUser().then((data: VerifyTokenResponseType) => {
       form.setFieldsValue({

apps/frontend/src/app/question/[id]/page.tsx

@@ -32,7 +32,11 @@ import TextArea from "antd/es/input/TextArea";
 import { useSearchParams } from "next/navigation";
 import { ProgrammingLanguageOptions } from "@/utils/SelectOptions";
 import { isAuthenticated } from "@/utils/Auth";
-import { redirect } from 'next/navigation';
+import {
+  ValidateUser,
+  VerifyTokenResponseType,
+} from "../../services/user";
+import { useRouter } from 'next/navigation';
 
 export default function Home() {
   const [isLoading, setIsLoading] = useState<boolean>(true); // Store the states related to table's loading
@@ -60,12 +64,31 @@ export default function Home() {
   const [description, setDescription] = useState<string | undefined>(undefined);
   const [selectedItem, setSelectedItem] = useState("python"); // State to hold the selected language item
 
+  // used to check if user JWT is verified
+
+  const [userId, setUserId] = useState<string | undefined>(undefined);
+  const [email, setEmail] = useState<string | undefined>(undefined);
+  const [username, setUsername] = useState<string | undefined>(undefined);
+  const [isAdmin, setIsAdmin] = useState<boolean | undefined>(undefined);
+
+  const router = useRouter();
+  
   useLayoutEffect(() => {
-    const isAuth = isAuthenticated;
-    if(!isAuth){
-      redirect("/login")
-    }
-  }, [])
+    var isAuth = false;
+
+    ValidateUser().then((data: VerifyTokenResponseType) => {
+      setUserId(data.data.id);
+      setEmail(data.data.email);
+      setUsername(data.data.username);
+      setIsAdmin(data.data.isAdmin);
+      isAuth = true;
+    }).finally(() => {
+      if(!isAuth){
+        // cannot verify
+        router.push('/login'); // Client-side redirect using router.push
+      }
+    });
+  }, [router])
 
   // When code editor page is initialised, fetch the particular question, and display in code editor
   useEffect(() => {