This is the process I have used in my current project. When a user logs in, I take the token and store in localStorage. Then every time a user goes to any route, I wrap the component that the route serves in a hoc. Here is the code for the HOC that checks for token.
export function requireAuthentication(Component) {
class AuthenticatedComponent extends React.Component {
componentWillMount () {
this.checkAuth(this.props.user.isAuthenticated);
}
componentWillReceiveProps (nextProps) {
this.checkAuth(nextProps.user.isAuthenticated);
}
checkAuth (isAuthenticated) {
if (!isAuthenticated) {
let redirectAfterLogin = this.props.location.pathname;
browserHistory.push(`/login?next=${redirectAfterLogin}`);
}
}
render () {
return (
<div>
{this.props.user.isAuthenticated === true
? <Component {...this.props}/>
: null
}
</div>
)
}
}
const mapStateToProps = (state) => ({
user: state.user
});
return connect(mapStateToProps)(AuthenticatedComponent);
}
Then in my index.js I wrap each protected route with this HOC like so:
<Route path='/protected' component={requireAuthentication(ProtectedComponent)} />
This is how the user reducer looks.
export default function userReducer(state = {}, action) {
switch(action.type) {
case types.USER_LOGIN_SUCCESS:
return {...action.user, isAuthenticated: true};
default:
return state;
}
}
action.user contains the token. The token can either come from the api when a user first logs in, or from localstorage if this user is already a logged in user.
