Added CSRF Token Feature (Resolved #53) and Deprecated mquery Depen…

…dency

client/src/components/edit.component.js

@@ -1,10 +1,11 @@
 import React, { useState, useEffect } from 'react';
 import { useParams } from 'react-router-dom';
-import axios from 'axios';
+import Axios from 'axios';
 
 import { labels, validateLabel } from '../libraries/validation';
 import { setNotification, NOTIFICATION_TYPES } from '../libraries/setNotification';
 
+const axios = Axios.create({ withCredentials: true });
 const SERVER_URL = process.env.REACT_APP_SERVER_URL;
 const DATE_VAL = /^(19|20|21)\d\d[- /.](0[1-9]|1[012])[- /.](0[1-9]|[12][0-9]|3[01])$/;
 const EMAIL_VAL = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;

client/src/components/home.component.js

@@ -2,13 +2,14 @@
 import React, { useEffect, useState } from 'react';
 import { labels, validateLabel } from '../libraries/validation';
 import { setNotification, NOTIFICATION_TYPES } from '../libraries/setNotification';
-import axios from 'axios';
+import Axios from 'axios';
 
 /* Icons */
 import { IconButton, Tooltip } from '@material-ui/core';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faPen, faTrash } from '@fortawesome/free-solid-svg-icons/';
 
+const axios = Axios.create({ withCredentials: true });
 const SERVER_URL = process.env.REACT_APP_SERVER_URL;
 const DATE_VAL = /^(19|20|21)\d\d[- /.](0[1-9]|1[012])[- /.](0[1-9]|[12][0-9]|3[01])$/;
 const EMAIL_VAL = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;

client/src/components/login.component.js

@@ -1,10 +1,11 @@
 import React, { useEffect, useState } from 'react';
 import { setNotification, NOTIFICATION_TYPES } from '../libraries/setNotification';
-import { createRequest, OAuthGitHub } from '../libraries/validation';
+import { createRequest, OAuthGitHub, getCookie } from '../libraries/validation';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faGithub } from '@fortawesome/free-brands-svg-icons';
-import axios from 'axios';
+import Axios from 'axios';
 
+const axios = Axios.create({ withCredentials: true });
 const SERVER_URL = process.env.REACT_APP_SERVER_URL;
 const EMAIL_VAL = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
 

client/src/components/navbar.component.js

@@ -5,11 +5,12 @@ import getUserToken from '../libraries/getUserToken';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faAdjust, faPlus, faSignOutAlt, faKey, faHome, faSignInAlt, faUsers } from '@fortawesome/free-solid-svg-icons/';
 import { setNotification, NOTIFICATION_TYPES, setWarning } from '../libraries/setNotification';
-import axios from 'axios';
+import Axios from 'axios';
 
 /* Icons */
 import { IconButton, Tooltip } from '@material-ui/core';
 
+const axios = Axios.create({ withCredentials: true });
 const SERVER_URL = process.env.REACT_APP_SERVER_URL;
 const redirectRoute = ['welcome', 'login', 'get-started'];
 const privateRoute = ['', 'edit'];

client/src/components/register-oauth.component.js

@@ -2,8 +2,9 @@ import React, { useState, useEffect } from 'react';
 import { useParams } from 'react-router-dom';
 import { setNotification, NOTIFICATION_TYPES } from '../libraries/setNotification';
 import { createRequest } from '../libraries/validation';
-import axios from 'axios';
+import Axios from 'axios';
 
+const axios = Axios.create({ withCredentials: true });
 const SERVER_URL = process.env.REACT_APP_SERVER_URL;
 const EMAIL_VAL = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
 

client/src/components/register.component.js

@@ -3,8 +3,9 @@ import { setNotification, NOTIFICATION_TYPES } from '../libraries/setNotificatio
 import { createRequest, OAuthGitHub } from '../libraries/validation';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faGithub } from '@fortawesome/free-brands-svg-icons';
-import axios from 'axios';
+import Axios from 'axios';
 
+const axios = Axios.create({ withCredentials: true });
 const SERVER_URL = process.env.REACT_APP_SERVER_URL;
 const EMAIL_VAL = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
 

client/src/components/req-oauth.component.js

@@ -1,7 +1,8 @@
 import React, { useEffect } from 'react';
 import { useParams, useLocation } from 'react-router-dom';
-import axios from 'axios';
+import Axios from 'axios';
 
+const axios = Axios.create({ withCredentials: true });
 const SERVER_URL = process.env.REACT_APP_SERVER_URL;
 
 const ReqOAuth = () => {

client/src/components/welcome.component.js

@@ -1,7 +1,8 @@
 import React, { useEffect, useState } from 'react';
 import { setNotification, NOTIFICATION_TYPES } from '../libraries/setNotification';
-import axios from 'axios';
+import Axios from 'axios';
 
+const axios = Axios.create({ withCredentials: true });
 const GITHUB_API = "https://api.github.com/repos/stanleyowen/todo-application";
 
 const Landing = () => {

client/src/libraries/getUserToken.js

@@ -1,4 +1,4 @@
-const axios = require('axios');
+const axios = require('axios').create({ withCredentials: true });
 const SERVER_URL = process.env.REACT_APP_SERVER_URL;
 
 const getUserToken = async token => {

client/src/libraries/validation.js

@@ -1,4 +1,4 @@
-const axios = require("axios");
+const axios = require("axios").create({ withCredentials: true });
 const SERVER_URL = process.env.REACT_APP_SERVER_URL;
 
 const labels = ["Priority", "Secondary", "Important", "Do Later"];
@@ -16,10 +16,14 @@ const OAuthGitHub = (e) => {
 }
 
 const createRequest = (e) => {
-    setInterval(function(){
-        axios.get(`${SERVER_URL}/status`)
-        .then().catch(err => console.log(err.response.data));
-    }, 5000);
+    axios.get(`${SERVER_URL}/status`)
+    .then().catch(err => console.log(err));
 }
 
-module.exports = {labels, validateLabel, OAuthGitHub, createRequest};
+const getCookie = (name) => {
+    const value = `; ${document.cookie}`;
+    const parts = value.split(`; ${name}=`);
+    if (parts.length === 2) return parts.pop().split(';').shift();
+}
+
+module.exports = {labels, validateLabel, OAuthGitHub, createRequest, getCookie};

server/index.js

@@ -19,17 +19,17 @@ app.use(express.urlencoded({ extended: true }));
 app.use(cookieParser());
 app.use(express.json());
 app.use(passport.initialize());
-
-// app.use(csrfProtection, (req, res, next) => {
-//     var token = req.csrfToken();
-//     res.cookie('XSRF-TOKEN', token);
-//     res.locals.csrfToken = token;
-//     next();
-// });
-
-// app.get('/csrf', csrfProtection, (req, res) => {
-//     res.json({'XSRF-TOKEN': req.csrfToken()});
-// });
+app.use(csrfProtection);
+
+app.use((req, res, next) => {
+    var token = req.csrfToken();
+    res.cookie('XSRF-TOKEN', token, {
+        maxAge: 24 * 60 * 60,
+        secure: process.env.NODE_ENV === 'production' ? true : false
+    });
+    res.locals.csrfToken = token;
+    next();
+});
 
 const usersRouter = require('./routes/users.route');
 const todoRouter = require('./routes/todo.route');

server/package.json

@@ -21,7 +21,6 @@
     "helmet": "^4.4.1",
     "jsonwebtoken": "^8.5.1",
     "mongoose": "^5.12.0",
-    "mquery": "^3.2.4",
     "passport": "^0.4.1",
     "passport-jwt": "^4.0.0",
     "passport-local": "^1.0.0"

server/routes/oauth.route.js

@@ -6,7 +6,6 @@ const jwtSecret = require('../config/jwtConfig');
 let User = require('../models/users.model');
 
 const CLIENT_ID = process.env.GITHUB_ID;
-const CLIENT_URL = process.env.CLIENT_URL;
 const CLIENT_SECRET = process.env.GITHUB_SECRET;
 
 const ERR_MSG = [