2.4.0-fix1 • Published 5 years ago
with-login v2.4.0-fix1
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: '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. |
2.4.0-fix1
5 years ago
3.5.1
5 years ago
3.5.0
5 years ago
3.4.0
5 years ago
3.3.0
5 years ago
3.2.0
5 years ago
3.1.0
5 years ago
3.0.0
5 years ago
2.4.0
5 years ago
2.3.1
5 years ago
2.3.0
5 years ago
2.2.0
5 years ago
2.1.0
5 years ago
2.0.0
5 years ago
1.0.0
5 years ago
0.0.10
5 years ago
0.0.9
5 years ago
0.0.8
5 years ago
0.0.7
5 years ago
0.0.6
5 years ago
0.0.5
5 years ago
0.0.4
5 years ago
0.0.3
5 years ago