Note: This example is very out-of-date. It might point you in the right direction, but I plan to re-write it from scratch. I won't be accepting any PRs in the meantime. Sorry about that!
This project is an example of one possible authentication flow using react, redux, react-router, redux-router, and JSON web tokens (JWT). It is based on the implementation of a higher-order component to wrap protected views and perform authentication logic prior to rendering them.
Note: The focus here is on the client-side flow. The server included in this example is for demonstration purposes only. It contains some hard-coded API endpoints and is obviously not intended for any kind of production environment.
1. git clone https://github.com/joshgeller/react-redux-jwt-auth-example.git
2. npm install
3. export NODE_ENV=development
4. node server.js
Then visit localhost:3000
in your browser.
The overall flow goes something like this:
Taking a look at the code should make this more clear!
The higher-order component that does the heavy lifting is in components/AuthenticatedComponent
. Notice that we are exporting a function which returns the higher-order component. The function takes a single argument: a child component it will wrap.
import React from 'react';
import {connect} from 'react-redux';
import {pushState} from 'redux-router';
export function requireAuthentication(Component) {
class AuthenticatedComponent extends React.Component {
componentWillMount() {
this.checkAuth();
}
componentWillReceiveProps(nextProps) {
this.checkAuth();
}
checkAuth() {
if (!this.props.isAuthenticated) {
let redirectAfterLogin = this.props.location.pathname;
this.props.dispatch(pushState(null, `/login?next=${redirectAfterLogin}`));
}
}
render() {
return (
<div>
{this.props.isAuthenticated === true
? <Component {...this.props}/>
: null
}
</div>
)
}
}
const mapStateToProps = (state) => ({
token: state.auth.token,
userName: state.auth.userName,
isAuthenticated: state.auth.isAuthenticated
});
return connect(mapStateToProps)(AuthenticatedComponent);
}
A glance at routes/index.js
shows you how to wrap a view or component using this function:
import {HomeView, LoginView, ProtectedView} from '../views';
import {requireAuthentication} from '../components/AuthenticatedComponent';
export default(
<Route path='/' component={App}>
<IndexRoute component={HomeView}/>
<Route path="login" component={LoginView}/>
<Route path="protected" component={requireAuthentication(ProtectedView)}/>
</Route>
);
When we call requireAuthentication(ProtectedView)
, we create an instance of AuthenticatedComponent
and pass along our ProtectedView
as an argument. AuthenticatedComponent
connects to the Redux store, subscribing to the appropriate authentication state variables. It then handles authentication logic in its lifecycle methods to ensure that the protected component is not rendered if the store does not indicate successful authentication.
The redux-auth-wrapper library uses this higher-order component approach to deliver a comprehensive authentication/authorization solution for those looking for something a bit more polished than this demonstration.