with-login

2.4.0-fix1 • Public • Published

with-login

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

CircleCI npm version

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: 'michel.momarx@youpi.fr' }, 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.

Package Sidebar

Install

npm i with-login

Weekly Downloads

0

Version

2.4.0-fix1

License

MIT

Unpacked Size

290 kB

Total Files

17

Last publish

Collaborators

  • ledoux