Getting Started

Install React Guardian

First, we should install the react-guardian package:

npm install react-guardian

yarn add react-guardian

pnpm add react-guardian

Define A Policy

Policies are function that determines how users can access pages or components. To create a new policy, define a function that returns a PolicyResult object.

import { PolicyResult } from 'react-guardian'

const adminsOnly = (): PolicyResult => ({
  // Does the user has access to the page/component?
  authorized: false,
})

You can learn more about policies in Defining Policies.

Protect Components

Now we can wrap our components in a Guard and use the adminsOnly policy to protect them.

import { Guard } from 'react-guardian'

function VeryImportantComponent() {
  return <div>Only admins are allowed to see this.</div>
}

function App() {
  return (
    <Guard policies={[adminsOnly]}>
      <VeryImportantComponent />
    </Guard>
  )
}