Session.jsx

import { createContext } from "react";

const SessionContext = createContext();

export function SessionProvider({ session, children }) {
  return (
    <SessionContext.Provider value={session}>
      {children}
    </SessionContext.Provider>
  );
}

export const SessionConsumer = SessionContext.Consumer;

export default SessionContext;

usePermission.js

import useSession from "./useSession";
import { useEffect } from "react";

/**
 * 
 * @param {string | string[]} permissions required permissions
 * @param {function} effect called on permission change
 * @returns {boolean}
 */
export default function usePermission(permissions = [], effect = noop) {
  const session = useSession();
  const sessionPermissions = (session && session.permissions) || [];

  const requiredPermissions = [permissions].flat().filter(i => i);
  const hasPermission = requiredPermissions.reduce(
    (res, permission) => res && sessionPermissions.includes(permission),
    true
  );

  useEffect(() => effect(hasPermission), [hasPermission]);

  return hasPermission;
}

function noop() {}

useSession.js

import { useContext } from "react";
import Session from "contexts/Session";

export default function useSession() {
  return useContext(Session);
}