React Higher Order Component For Role Based Authentication And Authorization

import React, { useContext } from 'react';
import { Redirect, Route } from 'react-router-dom';
import { AuthContext } from './AuthContext';

/**
 * Higher-order component for authentication and authorization.
 *
 * @param {React.Component} WrappedComponent The component to wrap with authentication checks.
 * @param {string[]} allowedRoles The roles allowed to access the wrapped component.
 * @return {React.Component} The wrapped component with authentication checks.
 */
const withAuth = (WrappedComponent, allowedRoles) => {
  const AuthenticatedComponent = ({ ...props }) => {
    const { user } = useContext(AuthContext);

    // Check if the user is authenticated
    if (!user) {
      // Redirect to the login page if the user is not authenticated
      return <Redirect to='/login' />;
    }

    // Check if the user has the required role
    if (!allowedRoles.includes(user.role)) {
      // Return an error message if the user does not have the required role
      return <div>Unauthorized: User {user.username} does not have the required role</div>;
    }

    // Render the wrapped component if the user is authenticated and has the required role
    return <WrappedComponent {...props} />;
  };

  return AuthenticatedComponent;
};

export default withAuth;