Merge pull request #28 from rpichioli/improvements

New actions, reducers, utilitaries, routes and jwt / bcrypt implementation - In development

Author: rpichioli

client/src/actions/authentication.js

@@ -1,30 +1,35 @@
 import axios from 'axios';
+import jwtDecode from 'jwt-decode';
+import setAuthorizationToken from '../utils/setAuthorizationToken';
 
-export const LOGGED_IN = 'LOGGED_IN';
-export const LOGGED_OUT = 'LOGGED_OUT';
+export const SET_CURRENT_USER = 'SET_CURRENT_USER';
 
-export function loggedIn(data) {
-	return { type: LOGGED_IN, data };
+export function setCurrentUser(user) {
+	return { type: SET_CURRENT_USER, user }
 }
 
-export function loggedOut(data) {
-	return { type: LOGGED_OUT, data };
-}
-
-export function logIn(data) {
+export function logout() {
 	return dispatch => {
-		const { identifier, password } = data;
-		axios.post('/api/auth/login', { identifier, password })
-			.then(response => dispatch(loggedIn(response.data)))
-			.catch(err => console.error(err));
-	};
-};
+		// Remove token from storage
+		localStorage.removeItem('jwtToken');
+		// Remove token from request headers
+		setAuthorizationToken(false);
+		// Send empty user to reducer
+		dispatch(setCurrentUser({}));
+	}
+}
 
-export function logOut(data) {
+export function login(data) {
 	return dispatch => {
-		const { identifier } = data;
-		axios.get('/api/auth/logout', { identifier })
-			.then(() => dispatch(loggedOut(identifier)))
-			.catch(err => console.error(err));
-	};
+		return axios.post('/api/auth', data).then(res => {
+			// Receive token
+			const token = res.data.token;
+			// Create token key in storage
+			localStorage.setItem('jwtToken', token);
+			// Add token in header requests for future actions
+			setAuthorizationToken(token);
+			// Promises data to reducer
+			dispatch(setCurrentUser(jwtDecode(token)));
+		});
+	}
 }

client/src/index.js

@@ -10,27 +10,39 @@ import { composeWithDevTools } from 'redux-devtools-extension';
 import thunk from 'redux-thunk';
 // Redux Provider for React
 import { Provider } from 'react-redux';
+// JSON Web Token
+import jwt from 'jsonwebtoken';
 
 // API that helps in caching assets and other files when the user is offline or on slow network
 import registerServiceWorker from './registerServiceWorker';
 // Root reducer to use in Redux Store
 import rootReducer from './reducers/rootReducer';
+// Actions
+import { setCurrentUser } from './actions/authActions';
 // The application, high order component
 import App from './components/App';
 // Application routes as external component
 import Routes from './routes/Routes';
 // Style
 import './style/index.css';
 
+// Browser history
 const history = createBrowserHistory();
 
+// Redux store
 const store = createStore(
 	rootReducer,
 	composeWithDevTools(
 		applyMiddleware(thunk)
 	)
 );
 
+// Verify if token exists and set it to request headers
+if (localStorage.jwtToken) {
+	setAuthorizationToken(localStorage.jwtToken);
+	store.dispatch(setCurrentUser(jwt.decode(localStorage.jwtToken)));
+}
+
 ReactDOM.render(
 	<Provider store={store}>
 		<Router history={history}>

client/src/reducers/authentication.js

@@ -1,11 +1,15 @@
-import { LOGGED_IN, LOGGED_OUT } from '../actions/authentication';
+import isEmpty from 'lodash/isEmpty';
+import { SET_CURRENT_USER } from '../actions/authentication';
 
-export default function authentication(state = []action = {}) {
+const initialState = { isAuthenticated: false, user: {} };
+
+export default function authentication(state = [], action = {}) {
 	switch(action.type) {
-		case 'LOGGED_IN':
-			return state;
-		case 'LOGGED_OUT':
-			return state;
+		case SET_CURRENT_USER:
+			return {
+				isAuthenticated: !isEmpty(action.user),
+				user: action.user
+			}
 		default: return state;
 	}
 }

client/src/utils/requireAuth.js

@@ -1,36 +1,18 @@
 import React from 'react';
-import { connect } from 'react-redux';
 import PropTypes from 'prop-types';
-import {} from 'react-router-dom';
-//import { addFlashMessage } from '../actions/flashMessages';
 
 /**
- * Protect Client-Side Routes with Higher Order Component
+ * Protect client-side Routes with HOC (Higher Order Component)
  * @return {[type]} [description]
  */
 export default (ComposedComponent) => {
 	class Authenticate extends React.Component {
-		/**
-		 * Função chamada antes de iniciar o componente
-		 * Este recurso é um dos vários "life cycle hook" que o React provê para componentes
-		 */
 		componentWillMount() {
-			// Se não está autenticado - Pega do state recebido do Redux mapeado para propriedade
 			if (!this.props.isAuthenticated) {
-				// Mensagem de acesso negado
-				// this.props.addFlashMessage({
-				// 	type: 'error',
-				// 	text: 'You need to login to access this page'
-				// });
-				// Redireciona
 				this.props.history.push('/login');
 			}
 		}
 
-		/**
-		 * Função chamada quando há alguma alteração nas propriedades do componente
-		 * Mais um "life cycle hook"
-		 */
 		componentWillUpdate(nextProps) {
 			if (!nextProps.isAuthenticated) {
 				this.props.history.push('/login');
@@ -45,16 +27,6 @@ export default (ComposedComponent) => {
 	}
 
 	Authenticate.propTypes = {
-		isAuthenticated: PropTypes.bool.isRequired //,
-		//addFlashMessage: PropTypes.func.isRequired,
-		//history: PropTypes.object.isRequired
+		isAuthenticated: PropTypes.bool.isRequired
 	}
-
-	// let mapStateToProps = (state) => {
-	// 	return {
-	// 		isAuthenticated: state.auth.isAuthenticated
-	// 	}
-	// }
-	//
-	// return connect(mapStateToProps, { addFlashMessage })(Authenticate);
 }

server/config/secret.js

@@ -0,0 +1,3 @@
+export default {
+	jwtSecret: 'node_and_more_node_please'
+}

server/index.js

@@ -5,10 +5,11 @@ import bodyParser from 'body-parser';
 import cookieParser from 'cookie-parser';
 import passport from 'passport';
 
+import secret from './config/secret';
+import models from './models';
+import strategies from './config/passport.js'
 import bands from './routes/bands';
 import albums from './routes/albums';
-import models from './models';
-import strategies from './config/passport.js';
 
 const app = express();
 
@@ -30,13 +31,14 @@ app.use(bodyParser.urlencoded({ extended: true }));
 // Passport
 // Initialize passport, express + passport session and add them both as middleware.
 // We do this by adding these lines some spaces after the bodyParser import line.
-app.use(session({ secret: 'node_and_more_node_please!', resave: true, saveUninitialized: true })); // session secret
+app.use(session({ secret: secret.jwtSecret, resave: true, saveUninitialized: true })); // session secret
 app.use(passport.initialize());
 app.use(passport.session()); // persistent login sessions
 
 // Routes
 app.use('/api/bands/', bands);
 app.use('/api/albums/', albums);
+app.use('/api/auth/', app, passport); // Authentication with Passport middleware
 
 // Load passport strategies
 strategies(passport, models.user);

server/routes/auth.js

@@ -1,12 +1,34 @@
 import express from 'express';
 import models from '../models';
+import bcrypt from 'bcrypt';
+import jwt from 'jsonwebtoken';
+import secret from '../config/secret';
 
 const router = express.Router();
 
-router.post('/login', (req, res) => {
-	res.json({ success: true, message: 'Logged in.' });
-});
+router.post('/', (req, res) => {
+	const {identifier, password } = req.body;
+
+	models.user.find({ username: identifier }).fetch().then((user) => {
+		if (user) {
+			if (bcrypt.compareSync(password, user.get('password_digest'))) {
+				const token = jwt.sign({
+					id: user.get('id'),
+					username: user.get('username')
+				}, secret.jwtSecret);
 
-router.post('/logout', (req, res) => {
-	res.json({ success: true, message: 'Logged out.' });
+				res.json({ token });
+			} else {
+				res.status(401).json({ errors: { form: 'Invalid credentials' } });
+			}
+		} else {
+			res.status(401).json({ errors: { form: 'Invalid credentials' } });
+		}
+	});
+
+	router.get('/logout', (req, res) => {
+		req.session.destroy(() => res.json({ success: true, message: "Successful logout!" }));
+	});
 });
+
+export default router;