Add frontend, backend and CLI

frontend/components/RouteGuard.js

@@ -0,0 +1,82 @@
+import { useState, useEffect } from "react";
+import { useRouter } from "next/router";
+import checkAuth from "../pages/api/auth/CheckAuth";
+import Image from "next/image";
+import { publicPaths } from "../const";
+
+// #TODO: finish spinner only when the data loads fully
+// #TODO: Redirect somewhere if the page does not exist
+
+export default function RouteGuard({ children }) {
+	const router = useRouter();
+	const [authorized, setAuthorized] = useState(false);
+
+	useEffect(async () => {
+		// on initial load - run auth check
+		await authCheck(router.asPath);
+
+		// on route change start - hide page content by setting authorized to false
+		// #TODO: add the loading page when not yet authorized.
+		const hideContent = () => setAuthorized(false);
+		// const onError = () => setAuthorized(true)
+		router.events.on("routeChangeStart", hideContent);
+		// router.events.on("routeChangeError", onError);
+
+		// on route change complete - run auth check
+		router.events.on("routeChangeComplete", authCheck);
+
+		// unsubscribe from events in useEffect return function
+		return () => {
+			router.events.off("routeChangeStart", hideContent);
+			router.events.off("routeChangeComplete", authCheck);
+			// router.events.off("routeChangeError", onError);
+		};
+
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, []);
+
+	/**
+	 * redirect to login page if accessing a private page and not logged in
+	 * @param {*} url - the url of the page we are trying to go to
+	 */
+	async function authCheck(url) {
+		// Make sure that we don't redirect when the user is on the following pages.
+		const path = "/" + url.split("?")[0].split("/")[1];
+
+		// Check if the user is authenticated
+		const response = await checkAuth();
+		// #TODO: figure our why sometimes it doesn't output a response
+		if (!publicPaths.includes(path)) {
+			try {
+				if (response.status !== 200) {
+					router.push("/login");
+					console.log("Unauthorized to access.");
+					setAuthorized(false);
+				} else {
+					setAuthorized(true);
+					console.log("Authorized to access.");
+				}
+			} catch (error) {
+				console.log(
+					"Error (probably the authCheck route is stuck again...):",
+					error
+				);
+			}
+		}
+	}
+
+	if (authorized) {
+		return children;
+	} else {
+		return (
+			<div className="w-screen h-screen bg-bunker-800 flex items-center justify-center">
+				<Image
+					src="/images/loading/loading.gif"
+					height={70}
+					width={120}
+					alt="google logo"
+				></Image>
+			</div>
+		);
+	}
+}