React High Order Component to add authentication to Redux app
The authentication is a very common pattern in every app.
This is a High Order Component Read and this and this to add authentication features to whatever React Component you need
import { AuthContainer } from './containers/Auth'
const AuthComponent = AuthContainer()
ReactDOM.render(
<Provider store={store}>
<Router history={history}>
<Route path="/" component={App}>
<IndexRedirect to="/login" />
</Route>
<Route path="/login" component={Login} />
<Route path="/trips" component={AuthComponent(PrivateView)} />
</Router>
</Provider>,
document.getElementById('root')
)
The HOC add a checkAuth method based on the props. As default will review this.props.user.authenticated to get the authentication status, you can pass your own way to get the status using
const AuthComponent = AuthContainer({
authSelector: (authData) => { return true},
})
Also the HOC will redirect to /login as default if the user is not authenticated, you can change that using:
const AuthComponent = AuthContainer({
redirectOnFailure: '/whatever',
})
- Add an example app
- Add test suite