Continuing Passport implementation in server and client-side

Author: rpichioli

client/src/utils/requireAuth.js

@@ -0,0 +1,60 @@
+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
+ * @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');
+			}
+		}
+
+		render() {
+			return (
+				<ComposedComponent {...this.props} />
+			);
+		}
+	}
+
+	Authenticate.propTypes = {
+		isAuthenticated: PropTypes.bool.isRequired //,
+		//addFlashMessage: PropTypes.func.isRequired,
+		//history: PropTypes.object.isRequired
+	}
+
+	// let mapStateToProps = (state) => {
+	// 	return {
+	// 		isAuthenticated: state.auth.isAuthenticated
+	// 	}
+	// }
+	//
+	// return connect(mapStateToProps, { addFlashMessage })(Authenticate);
+}

client/src/utils/setAuthorizationToken.js

@@ -0,0 +1,11 @@
+import axios from 'axios';
+
+export default function setAuthorizationToken(token) {
+	if (token) {
+		// Write "Bearer" token in requests header
+		axios.defaults.headers.common['Authorization'] = `Bearer ${token}`;
+	} else {
+		// Remove authorization from header
+		delete axios.defaults.headers.common['Authorization'];
+	}
+}

server/middleware/passport.js server/config/passport.jsserver/middleware/passport.js renamed to server/config/passport.js

@@ -8,7 +8,7 @@ import passport from 'passport';
 import bands from './routes/bands';
 import albums from './routes/albums';
 import models from './models';
-import strategies from './middleware/passport.js';
+import strategies from './config/passport.js';
 
 const app = express();
 
@@ -30,7 +30,7 @@ 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: 'node_and_more_node_please!', resave: true, saveUninitialized: true })); // session secret
 app.use(passport.initialize());
 app.use(passport.session()); // persistent login sessions
 
@@ -62,12 +62,13 @@ else
 
 module.exports = app;
 
-// ------------------------------------------------------------------------------
-// NodeJS Environment > process.env.NODE_ENV
-// ------------------------------------------------------------------------------
-// To set an environment variable in Windows normally:
-//		SET NODE_ENV=development
-// Through PowerShell terminal:
-//		$env:NODE_ENV="development"
+// ------------------------------------------------------------------------------ //
+// Set NodeJS Environment ---> process.env.NODE_ENV
+// ------------------------------------------------------------------------------ //
+// Windows normally
+// > SET NODE_ENV=development
+// PowerShell terminal:
+// > $env:NODE_ENV="development"
 // If you are in OSX or Linux terminals:
-//		export NODE_ENV=development
+// > export NODE_ENV=development
+// ------------------------------------------------------------------------------ //

server/index.js

@@ -0,0 +1,38 @@
+import jwt from 'jsonwebtoken';
+import models from '../models';
+
+/**
+ * Verifica se o usuário está autorizado (válido e logado)
+ * @function
+ * @param  {Object}   req  Request (Requisição)
+ * @param  {Object}   res  Response (Resposta)
+ * @param  {Function} next Chama a próxima função da cadeia de execução
+ */
+export default (req, res, next) => {
+	// Autorização presente no cabeçalho
+	const authorizationHeader = req.headers['authorization'];
+	// Variável reservada para armazenar o token "bruto"
+	let token;
+
+	if (authorizationHeader)
+		token = authorizationHeader.split(' ')[1]; // Parte após o "Bearer"
+
+	if (token) {
+		// Verifica se o token é um dado válido
+		jwt.verify(token, "node_and_more_node_please!", (err, decoded) => {
+			if (err) {
+				res.status(401).json({ error: 'Failed to authenticate' });
+			} else {
+				models.User
+					.findById(decoded.id)
+					.then(user => {
+						req.currentUser = user;
+						next();
+					})
+					.catch(err => res.status(404).json({ error: 'No such user' }));
+			}
+		});
+	} else {
+		res.status(403).json({ error: 'No token provided' });
+	}
+}

server/middlewares/authenticate.js

@@ -23,6 +23,7 @@
 		"dotenv": "^5.0.1",
 		"express": "^4.16.3",
 		"express-session": "^1.15.6",
+		"jsonwebtoken": "^8.2.2",
 		"lodash": "^4.17.10",
 		"mocha": "^5.2.0",
 		"morgan": "^1.9.0",