https://github.com/dias1c/casbin-react
🔐 Simple library that supports access control models like ACL, RBAC, ABAC for React Application
https://github.com/dias1c/casbin-react
abac acl auth authorization authorizer authz casbin casbin-frontend casbin-js casbin-react permissions rbac
Last synced: 4 months ago
JSON representation
🔐 Simple library that supports access control models like ACL, RBAC, ABAC for React Application
- Host: GitHub
- URL: https://github.com/dias1c/casbin-react
- Owner: Dias1c
- License: mit
- Created: 2025-03-07T06:25:23.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2025-03-14T06:15:02.000Z (over 1 year ago)
- Last Synced: 2025-10-24T19:41:23.120Z (8 months ago)
- Topics: abac, acl, auth, authorization, authorizer, authz, casbin, casbin-frontend, casbin-js, casbin-react, permissions, rbac
- Language: TypeScript
- Homepage: https://npmjs.com/package/@diaskappassov/casbin-react
- Size: 45.9 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOGS.md
- License: LICENSE
Awesome Lists containing this project
README
# casbin-react
🔐 Simple library that supports access control models like ACL, RBAC, ABAC for React Application.
> [!NOTE]
>
> - Changelogs [here](./CHANGELOGS.md).
> - Read more about casbin [here](https://casbin.org/docs/overview).
## Installation
```sh
npm i @diaskappassov/casbin-react
```
## Usage
You can see all usage examples bellow
### Generate hooks/components
```tsx
import { createPermissionsScope } from "@diaskappassov/casbin-react";
function getAuth() {
return {
m: `
# Request definition
[request_definition]
# Can subject, do_action, on_object
r = sub, act, obj
# Policy definition
[policy_definition]
p = sub, act, obj
# Role definition
[role_definition]
g = _, _
# Policy effect
[policy_effect]
e = some(where (p.eft == allow))
# Matchers
[matchers]
m = g(r.sub, p.sub) && r.obj == p.obj && r.act == p.act
`,
p: [
["p", "cat", "walk", "ground"],
["p", "cat", "run", "ground"],
["p", "cat", "swim", "water"],
["p", "cat", "breathe", "air"],
],
};
}
export const {
PermissionsCan,
PermissionsCanAll,
PermissionsCanAny,
authorizer,
loadPermissions,
useActionPermissionsInit,
useActionPermissionsReset,
usePermissionsCan,
usePermissionsCanAll,
usePermissionsCanAny,
} = createPermissionsScope({
get: getAuthzPermissions,
});
```
### PermissionsCan
Use wrapper component
```tsx
export function App() {
return (
<>
{/* Wrap children */}
{
console.error("PermissionsCan: something wen'Øt wrong", err);
}}
>
Yes cat can run on the ground
{/* Or */}
{/* Use render props pattern */}
{
if (loading) return "Loading...";
if (available === true) return "YES";
if (available === false) return "NO";
return "I DONT KNOW";
}}
onError={(err) => {
console.error("PermissionsCan: something went wrong", err);
}}
/>
>
);
}
```
Use hook
```tsx
export function App() {
const { available, loading } = usePermissionsCan({
rvals: ["cat", "run", "ground"],
});
if (loading) return "Loading...";
if (available === true) return "YES";
if (available === false) return "NO";
return "I DONT KNOW";
}
```
## TODO
- [ ] Examples
- [ ] Documentation
- [ ] Test
- [ ] Release v1.0.0