with-react-login
v1.13.9
Published
React hoc component for rendering page only on user log success.
Downloads
42
Readme
with-react-login
React hoc component for rendering page only on user log success.
Basic Usage
Using redux-saga-data
See first the store install process in redux-thunk-data.
Then you can declare a login component like this:
import { connect } from 'react-redux'
import { withRouter } from 'react-router-dom'
import { compose } from 'redux'
import withLogin from 'with-react-login'
const withConnectedLogin = compose(
withRouter,
withLogin({
currentUserApiPath: '/users/current',
handleFail: (state, action, { history }) => history.push('/signin'),
withDispatcher: connect(),
})
)
const FooPage = () => {
// withLogin passes a currentUser props
const { currentUser } = this.props
const { email } = currentUser || {}
return (
<div>
I am connected with {email} !
</div>
)
}
export default withConnectedLogin(FooPage)
Depending on what returns GET 'https://myfoo.com/users/current':
- if it is a 200 with { email: '[email protected]' }, FooPage will be rendered,
- if it is a 400, app will redirect to '/signin' page.
Using redux-thunk-data
Like above, see the install process in redux-thunk-data.
Then you need just to slightly change setup:
import { connect } from 'react-redux'
import { requestData } from 'redux-thunk-data'
import { compose } from 'redux'
import withLogin from 'with-react-login'
const withConnectedLogin = compose(
withRouter,
withLogin({
currentUserApiPath: '/users/current',
handleFail: (state, action, { history }) => history.push('/signin'),
requestData,
withDispatcher: connect()
})
)
...
Using react-hook-data
See redux-hook-data, but this is the same principle.
import { DataContext } from 'react-hook-data'
import withLogin from 'with-react-login'
const withConnectedLogin = withLogin({
currentUserApiPath: '/users/current',
handleFail: (state, action, { history }) => history.push('/signin'),
withDispatcher: DataContext
})
Usage with config
withLogin
| name | type | example | isRequired | default | description |
| -- | -- | -- | -- | -- | -- |
| currentUserApiPath | string
| | 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. |
| currentUser | object
| | no | 'null' | object saying if withLogin needs to be rendered already with a currentUser. Useful when we want to do redux-persist login |
| requestData | function
| See test | yes | requestData from fetch-normalize-data | action creator which will trigger the action to request '/users/current' |
| 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. |