Refactor for Passport Authentication

README.md

@@ -4,7 +4,7 @@
 1. npm install
 2. Here are the instructions for installing and running postgresql:
 **https://slack-files.com/T2SVC7RB3-F4HMU4URL-04fa832f88**
-**Warning**: these are instructions for installing postgresql on a **Mac**. If you have a windows computer, good luck?
+**Warning**: these are instructions for installing postgresql on a **Mac**.
 3. Once psql is running, create your database
  1. Navigate into the echoes directory in terminal
  2. Enter: ``` createdb echoes ```

client/components/Search.jsx

@@ -17,18 +17,14 @@ class Search extends React.Component {
 	}
   // gets and formats the current date
 	setDate () {
-		// generates current date
 		var todayDate = new Date();
-		// uses moment.js to format date
 		var formattedDate = moment(todayDate).format('YYYY-MM-DD');
-    // return the date
 		return formattedDate;
 	}
   // displays only the clicked album
 	setSelected (album) {
 		// date defaults to current date
 		var date = $('input').val() || this.state.selectedListenDate;
-    // sets state to display one album and sets state of listen date
 		this.setState({
 			results: [album],
 			selectedListenDate: date
@@ -85,7 +81,6 @@ class Search extends React.Component {
 					});
           // gets user entries from db and rerenders entry list
 					this.props.getUserEntries();
-					// clear the search bar
 					$('.search-bar').val('');
 				},
 				error: function (error) {

client/components/app.jsx

@@ -9,7 +9,8 @@ class App extends React.Component {
       currentUser: ''
     }
   }
-  // when the component loads successfully
+  // load user data on component mount
+  // TODO: put get entries in success function of checkAuth
   componentWillMount () {
     // load all of the user's data
     this.getUserEntries();
@@ -20,8 +21,6 @@ class App extends React.Component {
       url: '/querydb',
       type: 'GET',
       success: (response) => {
-        // sets state of all entries
-        // sets current user name
         if (response.length) {
           this.setState({
             allEntries: response,
@@ -37,15 +36,9 @@ class App extends React.Component {
   };
   // generates greeting in banner
   greetUser () {
-    // if current user is identified
-    if (this.state.currentUser) {
-      // greet them by name
-      return `Hello, ${this.state.currentUser}!`
-    } else {
-      // new users are greetedwith Hello
-      return `Hello!`
-    }
-  }
+    return this.state.currentUser ?
+      `Hello, ${this.state.currentUser}!` : `Hello!`
+  };
   // deletes a listening instance from the db
   deleteUserEntries (id, date, callback) {
     $.ajax({
@@ -63,8 +56,8 @@ class App extends React.Component {
         console.log(error);
         throw error;
       }
-    })
-  }
+    });
+  };
   // updates a user entry
   updateUserEntries (id, rating, impression, callback) {
     $.ajax({
@@ -85,16 +78,14 @@ class App extends React.Component {
     })
   }
 
-
-  // renders the app to the DOM
   render () {
     return (
 
       <div>
         <div className="container-fluid app">
           <header className="navbar">
             <div><h2 className="greeting">{this.greetUser()}</h2></div>
-            <a href="/signout" className='navbar-right signout'>
+            <a href="/auth/signout" className='navbar-right signout'>
               <button className="btn btn-default landing"><span>Sign Out</span></button>
             </a>
             <img className='navbar-center header logo' src="styles/logo.svg"></img>

client/landing.html

@@ -15,10 +15,10 @@
         <div class="col-md-6 text-center">
           <img src="styles/logo.svg" class="logo">
           <p class="blurb">Your living listening history.</p>
-          <a href="/signup" class="nav-button">
+          <a href="/auth/signup" class="nav-button">
             <button class="btn btn-default landing"><span>Sign Up</span></button>
           </a>
-          <a href="/signin" class="nav-button">
+          <a href="/auth/signin" class="nav-button">
             <button class="btn btn-default landing"><span>Sign In</span></button>
           </a>
         </div>

client/signin.html

@@ -4,15 +4,15 @@
 <head>
     <meta charset="UTF-8">
     <title>Sign In</title>
-    <img class="logo" src='styles/logo.svg'>
+    <img class="logo" src='../styles/logo.svg'>
     <link rel="stylesheet" href="/node_modules/bootstrap/dist/css/bootstrap.min.css">
-    <link rel="stylesheet" href="styles/stylesheet.css" type="text/css">
+    <link rel="stylesheet" href="../styles/stylesheet.css" type="text/css">
     <link href="https://fonts.googleapis.com/css?family=Raleway:300,400,500" rel="stylesheet">
 </head>
 
 <body>
     <div class="form-signin">
-    <form action="/signin" method="POST">
+    <form action="/auth/signin" method="POST">
     <br>
      <h1 class='signin'>Sign In</h1>
      <br>
@@ -28,7 +28,7 @@ <h1 class='signin'>Sign In</h1>
 			<input class="btn btn-default" type="submit" value="Sign In">
             <br>
             <br>
-            <a href="/signup">Create an account</a>
+            <a href="/auth/signup">Create an account</a>
         </fieldset>
     </form>
     </div>

client/signup.html

@@ -4,16 +4,16 @@
 <head>
     <meta charset="UTF-8">
     <title>Sign Up</title>
-    <img class="logo" src='styles/logo.svg'>
+    <img class="logo" src='../styles/logo.svg'>
     <link rel="stylesheet" href="/node_modules/bootstrap/dist/css/bootstrap.min.css">
-    <link rel="stylesheet" href="styles/stylesheet.css" type="text/css">
+    <link rel="stylesheet" href="../styles/stylesheet.css" type="text/css">
     <link href="https://fonts.googleapis.com/css?family=Raleway:300,400,500" rel="stylesheet">
 
 </head>
 
 <body>
 	<div class="form-signup">
-    <form action="/signup" method="post">
+    <form action="/auth/signup" method="post">
     <br>
      <h1 class='signup'>Create a new account</h1>
      <br>
@@ -31,7 +31,7 @@ <h1 class='signup'>Create a new account</h1>
         <input class="btn btn-default" type="submit" value="Sign Up">
         <br>
         <br>
-        <a href="/signin">I already have an account</a>
+        <a href="/auth/signin">I already have an account</a>
     	</fieldset>
     </form>
     </div>

db/controllers/users.js

@@ -0,0 +1,28 @@
+const util = require('../../server/utilities.js');
+const knex = require('../db.js');
+
+exports.findUser = (username) => {
+  return knex('users').where('username', username)
+    .then(result => {
+      return result[0];
+    });
+};
+
+exports.findUserById = (id) => {
+  return knex('users').where('id', id)
+    .then(result => {
+      return result[0];
+    });
+};
+
+exports.insertUser = (user, username, password) => {
+  return util.hashPassword(password)
+    .then(hash => {
+      return knex('users')
+        .returning(['id', 'user', 'username'])
+        .insert({ user: user, username: username, password: hash })
+        .then(result => {
+          return result[0];
+        });
+    });
+};

db/db.js

@@ -1,5 +1,5 @@
 var config      = require('../knexfile.js');
-var env         = 'production';
+var env         = 'development';
 var knex        = require('knex')(config[env]);
 
 module.exports = knex;

package.json

@@ -32,12 +32,15 @@
     "cookie-parser": "^1.4.3",
     "dotenv": "^4.0.0",
     "express": "^4.15.2",
+    "express-session": "^1.15.2",
     "jquery": "^3.1.1",
     "knex": "^0.12.7",
     "lodash": "^4.17.4",
     "moment": "^2.17.1",
     "morgan": "^1.8.1",
     "nodemon": "^1.11.0",
+    "passport": "^0.3.2",
+    "passport-local": "^1.0.0",
     "path": "^0.12.7",
     "pg": "^6.1.4",
     "react": "^15.4.2",

server/passport/init.js

@@ -0,0 +1,23 @@
+var signIn = require('./signin');
+var signUp = require('./signUp');
+
+var users = require('../../db/controllers/users.js');
+
+module.exports = function(passport) {
+
+  passport.serializeUser((user, done) => {
+    done(null, user.id);
+  });
+
+  passport.deserializeUser((id, done) => {
+    users.findUserById(id)
+      .then(user => {
+        done(null, user);
+      })
+      .catch(err => {
+        done(err, null);
+      });
+  });
+  signIn(passport);
+  signUp(passport);
+};

server/passport/signin.js

@@ -0,0 +1,30 @@
+var LocalStrategy = require('passport-local');
+var users = require('../../db/controllers/users.js');
+var util = require('../utilities');
+
+module.exports = function(passport) {
+
+  passport.use('signin', new LocalStrategy({
+    passReqToCallback: true
+  },
+  function(req, username, password, done) {
+    users.findUser(req.body.username)
+      .then(user => {
+        if (!user) {
+          return done(null, false);
+        }
+        return util.checkPassword(req.body.password, user.password)
+          .then(match => {
+            if (match) {
+              done(null, user);
+            } else {
+              done(null, false);
+            }
+          });
+      })
+      .catch(err => {
+        console.log('Signup Error: ', err);
+        done(err);
+      });
+  }));
+};

server/passport/signup.js

@@ -0,0 +1,28 @@
+var LocalStrategy = require('passport-local');
+var users = require('../../db/controllers/users.js');
+
+module.exports = function(passport) {
+
+  passport.use('signup', new LocalStrategy({
+    passReqToCallback: true
+  },
+  function(req, username, password, done) {
+    process.nextTick(function() {
+
+      users.findUser(req.body.username)
+        .then(user => {
+          if (user) {
+            return done(null, false);
+          }
+          return users.insertUser(req.body.user, req.body.username, req.body.password)
+            .then(newUser => {
+              done(null, newUser);
+            });
+        })
+        .catch(err => {
+          console.log('Signup Error: ', err);
+          done(err, null);
+        });
+    });
+  }));
+};

server/routes/appRoutes.js

@@ -6,7 +6,7 @@ var knex = require('../../db/db.js');
 
 router.get('/', function (req, res) {
   // if the user has a session
-  if (req.cookies.signedIn && req.cookies.username) {
+  if (req.user) {
     // serve the dashboard
     res.sendFile(path.join(__dirname, '/../../client/dashboard.html'));
     // if the user doesn't have a session