acl for pages in next js

accessKeys.ts

export const accesKeys = {
    guest: {
        home: true,
        users: true,
        user: true,
    },
};

injectAuthConfig.tsx

import { ComponentType } from "react";
import { accesKeys } from "constants/accesKeys";
import { useRouter } from "next/router";
import { useLayoutEffectOnce } from "helpers/useEffectOnce";
import get from "lodash/get";

export const injectAuthConfig = (accessKey: string) => {
    return function <T>(Component: ComponentType<T>) {
        return function (props: T): JSX.Element {
            console.log(accessKey);
            const hasAccess = get(accesKeys.guest, accessKey);
            if (hasAccess === undefined) {
                throw new Error(
                    "that access key shit must be correctly provided"
                );
            }
            const router = useRouter();

            useLayoutEffectOnce(() => {
                if (!hasAccess) {
                    router.push("/");
                }
            });
            return <Component {...props} />;
        };
    };
};

usage.tsx

export default compose(
    injectAuthConfig("home"),
)(Index);