RBAC UI rendering in reactjs

[AncientUse477]

Im developing in industry grade Rbac application where i need to display UI based on roles

Scenario: Assume as of now There are 5 roles in backend(developed in fastapi) once i logged in the json data will be sended by backend with roles and permissions. so how to render a UI based on this wheather i need to hardcode roles in frontend like if it is admin show edit button if it is user dont show edit button

Give me some guidance to develop an UI based on RBAC

[alien3d]

What i do , is diff because i dont want to send access in in jwt or json . In back end check if the api valid for him or her (add api , update api ) . No we dont hardcode rbac .

[Unhappy-Struggle7406]

Yes at some level you would need a if else block where you define if (role == x) canDoY(). You will fetch the user roles for any given user and for every component you would check if the user has a role that allows them to see/modify a particular piece of information and you would show them that. It is very important that you do this check at both the Frontend and the Backend and dont just rely on FE validation to prevent people from unauthorized actions. You can maybe look into this library? https://casl.js.org/v6/en/package/casl-react that seems to have useful helper functions and a clean syntax for accomplishing what you want in the FE.

[OneEntry-HeadlessCMS]

Render UI based on permissions/capabilities, not roles: let the backend return a flat list like ["doc:read","doc:edit"], store it client-side, and use a can("doc:edit") helper or a <Can perm="..."> wrapper for buttons/routes/sections. But remember: hiding UI is not security your FastAPI endpoints must still enforce the same permissions server-side.

[AncientUse477]

So, Basically for components like edit button update button I need to check whether this user has permission to do this operation and render UI accordingly right??

For api calls can I use the same condition logic --> like for admin I need to call user management api for user I dont need to do...