Zengenti Login Package 🔒

A package to provide login functionality to a react project using redux for state management

Built on top of zen-base for development and testing and then published to npm as zengenti-login-package.

How to use

The optimum usage of this package would be to import the reducer into your store creation script, import the sagas into your rootSaga and then wrap a dumb component export with the withLogin higher order component (HoC).

Reducer

Importing the reducer is required to create the "user" object in the state and to persist any changes to the state

import { reducer as UserReducer } from 'zengenti-login-package';

...

const store = createStore({ ...otherReducers, user: UserReducer }, initialState, middleware);

Saga

The saga is required so the user sagas are tracked and executed in the application when actions are triggered

import { sagas as userSagas } from 'zengenti-login-package';

...

yield all([...appSagas, ...userSagas]);

withLogin HoC

Use the higher order component to provide props to your own dumb login controls. Your controls will have access to the props provided in the snippet below. It is up to you how you use these functions to build and present your components in your app.

import { withLogin } from 'zengenti-login-package';

const MyLoginControl = ({user, loginUser, logoutUser}) => {
  return (<SomeComponents />);
};

MyLoginControl.propTypes = {
  loginUser: PropTypes.func,
  logoutUser: PropTypes.func,
  user: PropTypes.object,
};

export default withLogin(MyLoginControl);

Actions

If you need to you can call user authentication actions from backend code

import { actions as user } from 'zengenti-login-package';

store.dispatch(user.validateUser()); // read any auth cookies and log the user in if valid

store.dispatch(user.loginUser('testuser', 'password')); // authenticate the user with the provided credentials

Types

Only import redux types if you need to use them in your app, for example for firing an unrelated saga based on subscribing to a specific action type triggered by the package

import { types as USER } from 'zengenti-login-package';

export const otherSaga = [takeEvery(USER.LOGOUT_USER, resetSearch)]

Global Variable dependency

Your application must provide a global variable called SERVERS which contains an entry called cms, which will provide the full CMS uri to the package's backend code so it can call the appropriate authentication API

Example

A working example can be found in a branch of the zen-base repo: https://gitlab.zengenti.com/ps-projects/zengenti-base/zen-base/tree/login-package-example