Posso

Crafted with ❤️ by Mobix Software Studio to React.js applications.

Posso it's a library to control permissions to routes, components and private routes.

Install

// with npm:
npm install --save @mobixsoftwarestudio/posso

// with yarn:
yarn add @mobixsoftwarestudio/posso

Dependencies

• react-router-dom

Usage

Provider

const permissionsOfApp = ['page/home'];
const isAuthenticated = () => localStorage.getItem('exampleToken') == null;

<PossoProvider
  permissions={permissionsOfApp}
  isAuthenticated={isAuthenticated()}
  notAuthenticatedRedirect={<Redirect to="/" />} authenticatedRedirect="/home"
>
  {...}
</PossoProvider>

Route

import React from 'react';
import { Switch } from 'react-router-dom';
import { PossoRoute } from '@mobixsoftwarestudio/posso';

import Home from './screens/Home';
import Login from './screens/Login';
import Admin from './screens/Admin';

const NotAllowedComponent = () => (
  <div>
    <h2>Not allowed page.</h2>
  </div>
);

export default Routes = () => (
  <Switch>
    <PossoRoute
      exact
      path='/'
      component={Login}
    />
    <PossoRoute
      path='/home'
      exact
      isPrivate
      permissions={['page/home']}
      render={() => <Home />}
    />
    <PossoRoute
      path='/admin'
      exact
      isPrivate
      permissions={['page/admin']}
      component={Admin}
      notAllowedComponent={<NotAllowedComponent />}
    />
  </Switch>
);

Component

const AlternateView = () => (
  <h2>Show to everyone.</h2>
);

<CheckPermission
  permissions={['page/home']}
  alternateView={<AlternateView />}
>
  <span>Authorized component</span>
</CheckPermission>

API

<PossoProvider />

The component accepts the following props:

Name	Type	Description
isAuthenticated	boolean	isAuthenticated used to control authenticated routes.
notAuthenticatedRedirect	JSX.Element	notAuthenticatedRedirect used to render/redirect a page when user is not authorized.
authenticatedRedirect	string	authenticatedRedirect used to redirect a page when user is logged and access not private page.
permissions	string[]	permissions used to wrap all project with all permissions of user.
authorizationStrategy	func	authorizationStrategy used to define your own rule to check permissions.

<PossoRoute />

The component accepts the following props:

Name	Type	Description
isPrivate	boolean	Is used to refer a route that needs authentication.
notAllowedComponent	JSX.Element	It is used to show a custom component when the user is not allowed to view a specific page.
permissions	string[]	It is used to say what permissions are required to view the page./
authorizationStrategy	func	authorizationStrategy used to define your own rule to check permissions.

<CheckPermission />

The component accepts the following props:

Name	Type	Description
permissions	string[]	It is used to say what permissions are required to view the component.
authorizationStrategy	func	authorizationStrategy used to define your own rule to check permissions.

Hooks

To manipulate the provider the following hooks are provided:

const { handleAuthentication, handleLogout, setPermissions} = usePosso();

Name	Type	Description
handleAuthentication	func	This hook is used to login the user.
handleLogout	func	This hook is used to log the user out.
setPermissions	func	This hook is used to modify user permissions.

License

Copyright (c) 2020 Mobix Software Studio.

Licensed under The MIT License (MIT).