infisical/frontend/components/RouteGuard.js

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";

// #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(() => {
		// 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 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>
		);
	}
}