ReactGate is a permission/authentication solution for React application built on top of React Router and Redux.
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.
yarn add react-gateImport 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 }),
);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
See the Contribution section of the docs
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent