@kreativwebdesign/react-authorizer

React Authorizer using the new Context API

Stats

stars 🌟issues ⚠️updated 🛠created 🐣size 🏋️‍♀️
@kreativwebdesign/react-authorizer
Minified + gzip package size for @kreativwebdesign/react-authorizer in KB

Readme

💂‍♂️ react-authorizer 💂‍♀️

Basic library for handling authorization in your React app.

WIP

This module is not finished yet, so it's not using semantic versioning Things to watch out for:

  • Better documentation
  • More examples

Out of Scope

  • Authentication

Usage

Wrap your React tree inside the AuthProvider Component and pass the roles of the active user as an Array.

<AuthProvider roles={[ 'user', 'admin' ]}>
  {/* your react tree */}
</AuthProvider>

And then somewhere inside this tree:

<Authorize neededRoles={[ 'user', 'admin' ]}>
  {
    ({ isAuthorized, missingRoles, lacksRole }) => {
      if (isAuthorized) {
        return 'Welcome buddy';
      } else if (lacksRole('admin')) {
        return 'Sorry you are not an admin';
      } else {
        return 'You are not authorized too see anything here'
      }
    }
  }
</Authorize>

API

AuthProvider

Props

Name type required default value
roles Array Yes -

Authorize

Props

Name type required default value
neededRoles Array Yes -
children
function({
isAuthorized: Boolean,
missingRoles: Array,
lacksRole: (role: String) => Boolean,
hasRole: (role: String) => Boolean
}) => propTypes.node
Yes -

Examples

See some examples in action on codesandbox here.

Development

You must use yarn to maintain the project.

Install

run yarn install

Test

run yarn run test

Build

run yarn run build

Publishing

Attention! Use with care.

run yarn run release

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.