ReactGate is a permission/authentication solution for React application built on top of React Router and Redux.

The Goal

ReactGate provides a backend-independent solution, you can even choose not to use a backend at all.

This library provides a React component called Gate, as the name suggest, you can use the component to deny the access to certain parts of your application according to provided configuration.

The package was thought to be frankly declarative and easy to set up.

Getting Started

    yarn add react-gate

Import the Initializer object and the Gate component

    import { Initializer, Gate } from 'react-gate';

Configure the Library giving an AuthConfig object to the Initializer constructor

const GateConfig = {
    roles: ['admin', 'basic'],
    roleSelector: state => state.user.role,
    loginSelector: state => state.user.id,
    redirectPath: '/noauth',
    permissions: [
        {
        name: 'canWrite',   predicates: [state => state.user.canWrite, state => state.user.canWrite2],
        },
        {
        name: 'canRead',
        predicates: [state => state.user.canRead, state => state.user.canRead2],
        },
    ],
};
const GateInstance = new Initializer(GateConfig);

Retrieve the ReactGate reducer and mount to your existing reducer with the key authProvider

    const { authReducer } = GateInstance.reduxConfig();
    const store = createStore(
        combineReducers({ user: userReducer, authProvider: authReducer }),
    );

Route locking

The Gate component protects the auth route, in this example is configured to consent access only to logged user.

    <Route
          exact
          path="/auth"
          render={props => (
            <Gate onlyLogin >
              <Protected {...props} />
            </Gate>
        )}
        />

See the Docs for futher details

Want to contribute?

See the Contribution section of the docs