react-auth-flow

Library to handle authentication flow for react-redux application, it exports a singleton reference of AuthService class.

Installation

npm install react-auth-flow --save

Steps to setup -

Import AuthService

import AuthService from 'react-auth-flow';

Initialize the service by passing some initial setup arguments

The init method of AuthService class returns a reducer which is needed to be registered in store

AuthService.init({
  'store': store,
  'loginPath': loginPath,
  'defaultRedirectPath': defaultRedirectPath,
  'redirectAction': redirectAction,
  'localStorageKey': localStorageKey
});

Key	Description
store	redux store
loginPath	login route of the configured UI router (will be redirected to this path if the user is not authenticated)
defaultRedirectPath	user will be redirected to this path if login is successful, in case user requested some authenticated route then it will be redirected to that route after successful login
redirectAction	action method which will redirect to the path evalued by the library, in case of react-router-redux it should be 'push'
localStorageKey	key name by which the user context is saved in local storage

Authenticating routes using react router and react-auth-flow

You can authenticate your component using requireAuth method of the library

AuthService.requireAuth(YourComponent);

Example-

import AuthService from 'react-auth-flow';

<Router history={history}>
	<Route path="/" component={AuthService.requireAuth(YourComponent)}/>
</Router>

Basic Example-

import {createStore, combineReducers} from 'redux';
import {routerReducer, push} from 'react-router-redux';
import AuthService from 'react-auth-flow';

const store = createStore(combineReducers({
  router: routerReducer,
}));

let authReducer = AuthService.init({
  store: store,
	loginPath: '/login',
	defaultRedirectPath: '/',
	redirectAction: push,
	localStorageKey: 'sampleKey'
});

Live Example-

import {createStore, combineReducers} from 'redux';
import {routerReducer, push} from 'react-router-redux';
import AuthService from 'react-auth-flow';

const makeRootReducer = (asyncReducers) => {
	return combineReducers({
    router: routerReducer,
	});
}

const injectReducer = (store, reducerList) => {
	for(let key in reducerList) {
		store.asyncReducers[key] = reducerList[key];
	}
	store.replaceReducer(makeRootReducer(store.asyncReducers));
}

const store = createStore(combineReducers({
  makeRootReducer()
}));
store.asyncReducers = {};

let authReducer = AuthService.init({
  store: store,
	loginPath: '/login',
	defaultRedirectPath: '/',
	redirectAction: push,
	localStorageKey: 'sampleKey'
});
injectReducer(store, authReducer);