React Higher Order Component For Authentication And Authorization In Large Scale Applications

import React, { useState, useEffect, useContext } from 'react';
import { AuthContext } from './AuthContext';

const withAuth = (WrappedComponent, allowedRoles) => {
   const AuthComponent = () => {
       const { user, isAuthenticated } = useContext(AuthContext);
       const [isAuthorized, setIsAuthorized] = useState(false);
       const [error, setError] = useState(null);

       useEffect(() => {
           const checkAuthorization = async () => {
               try {
                   if (isAuthenticated && user.roles.some(role => allowedRoles.includes(role))) {
                       setIsAuthorized(true);
                   } else {
                       setIsAuthorized(false);
                   }
               } catch (error) {
                   setError(error.message);
               }
           };
           checkAuthorization();
       }, [isAuthenticated, user?.roles, allowedRoles]);

       if (!isAuthenticated) {
           return <div>You are not authenticated.</div>;
       }

       if (!isAuthorized) {
           return <div>You are not authorized to access this resource.</div>;
       }

       if (error) {
           return <div>Error: {error}</div>;
       }

       return <WrappedComponent />;
   };

   return AuthComponent;
};

export default withAuth;