I came CASL JavaScript library, which restricts what resources a given client is allowed to access.

My question is whether it can be used for role based access in a React app in a secure way?

And whether user can temper with the permission and gain unauthorized access if used only in front end to display/hide components as shown in following react code?

import React, { useContext } from 'react';
import { AbilityContext } from './Can'

export default () => {
  const createTodo = () => { /* logic to show new todo form */ };
  const ability = useContext(AbilityContext);

  return (
    <div>
      {ability.can('create', 'Todo') &&
        <button onClick={createTodo}>Create Todo</button>}
    </div>
  );
}

Reference: https://casl.js.org/v5/en/package/casl-react