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 and Warrant ExpressJS middleware to control access to the API and data passed to the frontend. The React frontend uses the Warrant React SDK to show/hide components in the UI based on each user's permitted access.

Get Started

After creating a Warrant account here, follow the steps below to get the demo app running locally.

Create object types

curl "https://api.warrant.dev/v1/object-types" \
    -X POST \
    -H "Authorization: ApiKey YOUR_KEY" \
    --data-raw \
    '{
        "type": "group",
        "relations": {
            "member": {}
        }
    }'

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"
                    }
                ]
            }
        }
    }'

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 <replace_with_your_api_key> in /api/src/index.ts and /api/src/scripts/initializeData.js with your API Key.

Replace occurence of <replace_with_your_client_key> in /client/src/App.jsx with your Client Key.

Server (Express)

cd api
npm install
npm run init # only required the first time you setup the app
npm run start

Client (React)

cd client/react
npm install
npm run dev

Client (Vue)

cd client/vue
npm install
npm run serve