react-auth-flow v1.0.6

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
});

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);