with-login

React hoc component for rendering page only on user log success. It uses redux-saga-data as implicit helper.

Basic Usage

You need to add first the data reducer in your root reducer:

You need to install a redux-saga setup with the watchDataActions and the data reducer, don't forget to specify the url of your api here:

import {
  applyMiddleware,
  combineReducers,
  createStore
} from 'redux'
import createSagaMiddleware from 'redux-saga'
import { all } from 'redux-saga/effects'
import { createData, watchDataActions } from 'redux-saga-data'
 
const sagaMiddleware = createSagaMiddleware()
const storeEnhancer = applyMiddleware(sagaMiddleware)
 
function* rootSaga() {
  yield all([
    watchDataActions({
      rootUrl: "https://myfoo.com",
    }),
  ])
}
 
const rootReducer = combineReducers({
  data: createData({ users: [] }),
})
 
const store = createStore(rootReducer, storeEnhancer)
 
sagaMiddleware.run(rootSaga)

Then you can use withLogin in your component:

 
import withLogin from 'with-login'
 
const FooPage = () => {
  // withLogin passes a currentUser props
  const { currentUser } = this.props
  const { email } = currentUser || {}
  return (
    <div>
      I am connected with {email} !
    </div>
  )
}
 
export default withLogin({
  currentUserApiPath: '/users/current',
  failRedirect: '/signin'
})(FooPage)

Depending on what returns GET 'https://myfoo.com/users/current':

• if it is a 200 with { email: '[e-mail]' }, FooPage will be rendered,
• if it is a 400, app will redirect to '/signin' page.

Usage with config

withLogin

name	type	example	isRequired	default	description
currentUserApiPath	string	See test	no	'/users/current'	apiPath that will be joined with your rootUrl to get the authenticated user from your auth server
failRedirect	function	See test	no	'undefined'	function triggered after fail of your auth currentUserApiPath request saying. It should return a redirect path towards which react-router will history push.
successRedirect	function	See test	no	'undefined'	function triggered after success of your auth currentUserApiPath request saying. It should return a redirect path towards which react-router will history push.
isRequired	boolean	See test	no	'true'	Boolean saying if the React WrappedComponent will need to wait a success from the currentUserApiPath to be rendered.