add authentication through Github, using session

Author: katjad

auth/index.js

@@ -0,0 +1,45 @@
+module.exports = function(app){    
+    var passport = require('passport')
+    var GitHubStrategy = require('passport-github').Strategy;
+    var session = require('express-session');
+    var options = require('../appConfig');
+
+    // var User = require('../models/users');
+
+    app.use(session({secret:'tswift', resave: true, saveUninitialized: true}))
+
+    //Initialize passport and restore authentication state if available
+    app.use(passport.initialize());
+    app.use(passport.session());
+
+    passport.use(new GitHubStrategy({
+        clientID: options.GITHUB_CLIENT_ID || process.env.CLIENT_ID,
+        clientSecret: options.GITHUB_CLIENT_SECRET || process.env.CLIENT_SECRET,
+        callbackURL: '/auth/github/callback',
+      },
+      function(accessToken, refreshToken, user, cb) {
+          console.log("using GITHUB strategy")
+          return cb(null, user);
+      }
+    ));
+
+    // Check this re saving to a session, serialize and deserialize 
+    // https://stackoverflow.com/questions/27637609/understanding-passport-serialize-deserialize#27637668
+    passport.serializeUser(function(user, done) {
+      console.log("user", user);
+        done(null, user.id);
+      // done(null, user);
+    });
+
+    passport.deserializeUser(function(id, done) {
+      done(null, user);
+    });
+
+    //OAuth authentication route
+    app.get('/auth/github', passport.authenticate('github'));
+    app.get('/auth/github/callback', 
+      passport.authenticate('github', { failureRedirect: '/' }), 
+      function(req, res) {
+      res.redirect('/profile');
+    });
+}

dev.js

@@ -8,6 +8,7 @@ import webpackDevMiddleware from 'webpack-dev-middleware';
 import webpackHotMiddleware from 'webpack-hot-middleware';
 import config from './webpack.config';
 import routes from './routes';
+import auth from './auth';
 
 const app = express();
 const port = 3000;
@@ -20,6 +21,7 @@ app.use(webpackHotMiddleware(compiler));
 
 app.use(routes);
 
+
 app.listen(port, function(error) {
   if (error) {
     console.error(error)

package.json

@@ -34,10 +34,13 @@
     "bootstrap": "^3.3.6",
     "classnames": "^2.1.2",
     "cross-env": "^1.0.7",
-    "express": "^4.13.3",
     "enzyme": "^2.2.0",
+    "express": "^4.13.3",
+    "express-session": "^1.15.5",
     "jquery": "^2.2.3",
     "lokijs": "^1.3.16",
+    "passport": "^0.4.0",
+    "passport-github": "^1.1.0",
     "react": "^0.14.7",
     "react-dom": "^0.14.7",
     "react-redux": "^4.2.1",
@@ -49,7 +52,7 @@
     "whatwg-fetch": "^2.0.2"
   },
   "devDependencies": {
-    "chai": "^3.5.0",    
+    "chai": "^3.5.0",
     "css-loader": "^0.28.4",
     "deep-freeze": "0.0.1",
     "eslint": "^3.10.2",

routes.js

@@ -1,5 +1,6 @@
 import { express, Router } from 'express';
 import path from 'path';
+import auth from './auth';
 import bodyParser from 'body-parser';
 import api from './backend/api';
 import ItemPersist from './backend/stores/itemPersist.js';
@@ -10,6 +11,8 @@ const router = Router();
 var jsonParser = bodyParser.json()
 var urlencodedParser = bodyParser.urlencoded({ extended: false })
 
+auth(router)
+
 // return all resources
 router.get("/api/items", function(req, res){
       itempersist.all().then(
@@ -70,8 +73,22 @@ router.post("/api/items/", jsonParser, function(req,res){
     ).catch(console.log)
 });
 
-router.get("/", function(req, res) {
-  res.sendFile(__dirname + '/index.html')
+router.get('/logout', function(req, res){
+  req.logout();
+  res.redirect('/');
+})
+
+function ensureAuthenticated(req,res,next){
+  if(req.isAuthenticated())
+    return next();
+  res.redirect('/');
+}
+
+
+// need the wildcart so react-router can take over
+// see https://codedump.io/share/V9K5oTL502r4/1/issue-with-routing-in-react-app
+router.get("*", function(req, res) {
+  res.sendFile(__dirname + '/public/index.html')
 })
 
 export default router;

src/components/routes/profile/Profile.js

@@ -0,0 +1,17 @@
+import React, { Component } from 'react'
+import { Link } from 'react-router'
+
+class Profile extends Component {
+    constructor(){
+        super()
+    }
+    render() {
+       return (<div>
+          <p>This will be the profile.</p>
+
+          <li><Link to="/auth/github">Login with Github</Link></li>
+          </div>)
+    }
+}
+
+export default Profile

src/index.js

@@ -9,6 +9,7 @@ import { Router, Route, browserHistory } from 'react-router'
 import App from './components/routes/app/App'
 import Admin from './components/routes/admin/Admin'
 import ItemEdit from './components/routes/itemEdit/ItemEdit'
+import Profile from './components/routes/profile/Profile'
 import rootReducer from './reducers'
 import '../public/assets/sass/bootstrap.scss'
 import '../public/assets/sass/style.scss'
@@ -17,7 +18,8 @@ const routes = [
     { path: '/', component: App },
     { path: '/admin', component: Admin },
     { path: '/new', component: ItemEdit },
-    { path: '/edit/:id', component: ItemEdit }
+    { path: '/edit/:id', component: ItemEdit },
+    { path: '/profile', component: Profile }
 ]
 
 fetch('/api/items').then((response) => {