diff --git a/frontend/components/RouteGuard.js b/frontend/components/RouteGuard.js index 71bfd2562..3a7b89ec6 100644 --- a/frontend/components/RouteGuard.js +++ b/frontend/components/RouteGuard.js @@ -1,85 +1,85 @@ -import { useEffect,useState } from "react"; +import { useEffect, useState } from "react"; import Image from "next/image"; import { useRouter } from "next/router"; import checkAuth from "~/pages/api/auth/CheckAuth"; -import { publicPaths } from "../const"; +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); + const router = useRouter(); + const [authorized, setAuthorized] = useState(false); - useEffect(() => { - // on initial load - run auth check - (async () => { - await authCheck(router.asPath); - })(); + useEffect(() => { + // on initial load - run auth check + (async () => { + 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 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); + // 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 - }, []); + // 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]; + /** + * 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 - ); - } - } - } + // 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 ( -
- google logo -
- ); - } + if (authorized) { + return children; + } else { + return ( +
+ google logo +
+ ); + } } diff --git a/frontend/components/utilities/SecurityClient.js b/frontend/components/utilities/SecurityClient.js index 783b44633..587b43517 100644 --- a/frontend/components/utilities/SecurityClient.js +++ b/frontend/components/utilities/SecurityClient.js @@ -1,28 +1,28 @@ import token from "~/pages/api/auth/Token"; -import { PATH } from "../../const"; +import { PATH } from "~/const"; export default class SecurityClient { - static authOrigins = [PATH]; - static #token = ""; + static authOrigins = [PATH]; + static #token = ""; - contructor() {} + contructor() {} - static setToken(token) { - this.#token = token; - } + static setToken(token) { + this.#token = token; + } - static async fetchCall(resource, options) { - let req = new Request(resource, options); - const destOrigin = new URL(req.url).origin; + static async fetchCall(resource, options) { + let req = new Request(resource, options); + const destOrigin = new URL(req.url).origin; - if (this.#token == "") { - this.setToken(await token()); - } + if (this.#token == "") { + this.setToken(await token()); + } - if (this.#token && this.authOrigins.includes(destOrigin)) { - req.headers.set("Authorization", "Bearer " + this.#token); - return fetch(req); - } - } + if (this.#token && this.authOrigins.includes(destOrigin)) { + req.headers.set("Authorization", "Bearer " + this.#token); + return fetch(req); + } + } } diff --git a/frontend/jsconfig.json b/frontend/jsconfig.json index 6f859d11a..19a4b9b7a 100644 --- a/frontend/jsconfig.json +++ b/frontend/jsconfig.json @@ -8,6 +8,9 @@ "~/utilities/*": [ "components/utilities/*" ], + "~/*": [ + "const" + ], "~/pages/*": [ "pages/*" ], diff --git a/frontend/pages/_app.js b/frontend/pages/_app.js index 838d407b9..ff8c2b7e3 100644 --- a/frontend/pages/_app.js +++ b/frontend/pages/_app.js @@ -7,7 +7,7 @@ import Layout from "~/components/basic/layout"; import RouteGuard from "~/components/RouteGuard"; import { ENV } from "~/utilities/config"; -import { publicPaths } from "../const.js"; +import { publicPaths } from "~/const"; import "@fortawesome/fontawesome-svg-core/styles.css"; import "../styles/globals.css"; @@ -15,49 +15,49 @@ import "../styles/globals.css"; config.autoAddCss = false; const App = ({ Component, pageProps, ...appProps }) => { - const router = useRouter(); - const posthog = initPostHog(); + const router = useRouter(); + const posthog = initPostHog(); - useEffect(() => { - // Init for auto capturing - const posthog = initPostHog(); + useEffect(() => { + // Init for auto capturing + const posthog = initPostHog(); - const handleRouteChange = () => { - if (typeof window !== "undefined") { - if (ENV == "production") { - posthog.capture("$pageview"); - } - } - }; + const handleRouteChange = () => { + if (typeof window !== "undefined") { + if (ENV == "production") { + posthog.capture("$pageview"); + } + } + }; - router.events.on("routeChangeComplete", handleRouteChange); + router.events.on("routeChangeComplete", handleRouteChange); - return () => { - router.events.off("routeChangeComplete", handleRouteChange); - }; - }, [router.events]); + return () => { + router.events.off("routeChangeComplete", handleRouteChange); + }; + }, [router.events]); - // If it's one of these routes, don't add the layout (e.g., these routes are external) - if ( - publicPaths.includes("/" + appProps.router.pathname.split("/")[1]) || - !Component.requireAuth - ) { - return ; - } + // If it's one of these routes, don't add the layout (e.g., these routes are external) + if ( + publicPaths.includes("/" + appProps.router.pathname.split("/")[1]) || + !Component.requireAuth + ) { + return ; + } - return ( - - - - - - ); + return ( + + + + + + ); }; export default App; { - /*