Role Based Authorization in Reactjs

Question

I am trying to secure checkbox in Reactjs to only authorized users with following method but problem is that if someone want can change state from false to true in dev tool and bypass security. the checkbox is in table having more than 100s of rows, for every row there is a checkbox. at the moment I check against the state of isAuthorized, if false I disable checkbox and it is working fine but can be changed in Dev tool. I also tried by calling a function for every table row to check API if authorized but problem is there is 100s of calls to API for every row grateful for any suggestion to help me with this problem. much appreciated. PS. I checked google and all information is about route security and couldn't find anything relate to my problem.

import React, { useEffect, useState } from "react";
import { useParams } from "react-router-dom";
import { Link } from "react-router-dom";
import { useLocation } from "react-router-dom";

const WorkList = (props) => {

  const [isAuthorized, setIsAuthorized] = useState(false);

  useEffect(() => {
    const requestOptions = {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({
        EMPID: "2514",
      }),
    };
    fetch(
      `https://api......`,
      requestOptions
    )
      .then((response) => response.json())
      .then((responseJSON) => {
        setIsAuthorized(responseJSON);
      });
  }, []);


  ///////////////////////////////////////////////////////////Map Data In Table//////////////////////////////////////////////////////////

    return (
          <table>
            <thead>
              <tr>
                <th>Name</th>
                <th>Done </th>
              </tr>
            </thead>
            <tbody>
              {items.map((item) => (
                <tr key={item.Name}>
                  <td>{item.IsDone}</td>
                  <td>
                    {isAuthorized ? (<input type="checkbox" />) :
                     (<input type="checkbox" disabled />)}
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
    );
};

export default WorkList;

Answer 1

+1 what SamiElk commented, but outside of the fact that you should validate this input on both the client and server side, a cleaner way to do it would be to retrieve the authorization status of the user in a parent component, and pass it down to this component here as a prop, instead of initializing it as state. Furthermore, if you're running a production build of React on your application (as you should be, since it trims out the irrelevant developer and debugging functionality), then they can't use the React devtools directly to change the state's value.