https://github.com/warrant-dev/warrant-demo-app-ts
Example demonstrating how to add end-to-end authorization & access control to an ExpressJS + React app using Warrant
https://github.com/warrant-dev/warrant-demo-app-ts
abac access-control acl attribute-based-access-control authorization authz expressjs permissions rbac react role-based-access-control
Last synced: 8 months ago
JSON representation
Example demonstrating how to add end-to-end authorization & access control to an ExpressJS + React app using Warrant
- Host: GitHub
- URL: https://github.com/warrant-dev/warrant-demo-app-ts
- Owner: warrant-dev
- Created: 2021-06-16T21:34:50.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2024-06-03T19:06:26.000Z (over 1 year ago)
- Last Synced: 2024-06-03T22:06:07.408Z (over 1 year ago)
- Topics: abac, access-control, acl, attribute-based-access-control, authorization, authz, expressjs, permissions, rbac, react, role-based-access-control
- Language: JavaScript
- Homepage:
- Size: 1.01 MB
- Stars: 4
- Watchers: 2
- Forks: 2
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Warrant Demo Application
This demo application demonstrates how to add full-stack access control (specifically Role Based Access Control) to an ExpressJS + React application. The app uses the [Warrant NodeJS SDK](https://www.npmjs.com/package/@warrantdev/warrant-node) and [Warrant ExpressJS middleware](https://www.npmjs.com/package/@warrantdev/warrant-express-middleware) to control access to the API and data passed to the frontend. The React frontend uses the [Warrant React SDK](https://www.npmjs.com/package/@warrantdev/react-warrant-js) to show/hide components in the UI based on each user's permitted access.
## Get Started
After creating a Warrant account [here](https://app.warrant.dev/signup), follow the steps below to get the demo app running locally.
### Create object types
```bash
curl "https://api.warrant.dev/v1/object-types" \
-X POST \
-H "Authorization: ApiKey YOUR_KEY" \
--data-raw \
'{
"type": "group",
"relations": {
"member": {}
}
}'
```
```bash
curl "https://api.warrant.dev/v1/object-types" \
-X POST \
-H "Authorization: ApiKey YOUR_KEY" \
--data-raw \
'{
"type": "store",
"relations": {
"owner": {},
"creator": {},
"editor": {
"type": "anyOf",
"rules": [
{
"type": "userset",
"relation": "owner"
}
]
},
"viewer": {
"type": "anyOf",
"rules": [
{
"type": "userset",
"relation": "editor"
}
]
}
}
}'
```
```bash
curl "https://api.warrant.dev/v1/object-types" \
-X POST \
-H "Authorization: ApiKey YOUR_KEY" \
--data-raw \
'{
"type": "item",
"relations": {
"parent_store": {},
"creator": {},
"editor": {
"type": "anyOf",
"rules": [
{
"type": "objectUserset",
"relation": "parent_store",
"userset": {
"type": "userset",
"relation": "editor"
}
}
]
},
"viewer": {
"type": "anyOf",
"rules": [
{
"type": "userset",
"relation": "editor"
}
]
}
}
}'
```
### API Key
Replace occurences of `` in `/api/src/index.ts` and `/api/src/scripts/initializeData.js` with your API Key.
Replace occurence of `` in `/client/src/App.jsx` with your Client Key.
### Server (Express)
```bash
cd api
npm install
npm run init # only required the first time you setup the app
npm run start
```
### Client (React)
```bash
cd client/react
npm install
npm run dev
```
### Client (Vue)
```bash
cd client/vue
npm install
npm run serve
```