Add Google & Auth0 authentication

client/app/HackdashApp.js

@@ -24,7 +24,7 @@ module.exports = function(){
       var providers = window.hackdash.providers;
 
       app.modals.show(new LoginView({
-        model: new Backbone.Model({ providers: providers.split(',') })
+        model: new Backbone.Model({ providers: providers })
       }));
     };
 

client/app/helpers/handlebars.js

@@ -14,10 +14,6 @@ Handlebars.registerHelper('embedCode', function() {
   });
 });
 
-Handlebars.registerHelper('firstUpper', function(text) {
-  return text.charAt(0).toUpperCase() + text.slice(1);
-});
-
 Handlebars.registerHelper('firstLetter', function(text) {
   if (text){
     return text.charAt(0);

client/app/views/Home/index.js

@@ -170,7 +170,7 @@ module.exports = Backbone.Marionette.LayoutView.extend({
     var app = window.hackdash.app;
 
     app.modals.show(new LoginView({
-      model: new Backbone.Model({ providers: providers.split(',') })
+      model: new Backbone.Model({ providers: providers })
     }));
 
     return false;

client/app/views/templates/login.hbs

@@ -10,8 +10,8 @@
       {{#each providers}}
 
       <div class="col-xs-12 col-md-8 col-md-offset-2">
-        <a href="/auth/{{.}}{{../redirectURL}}" class="btn btn-primary signup-btn signup-{{.}}" data-bypass>
-          <i class="fa fa-{{.}}"></i>{{__ "Access with"}} {{firstUpper .}}
+        <a href="/auth/{{key}}{{../redirectURL}}" class="btn btn-primary signup-btn signup-{{key}}" data-bypass>
+          <i class="fa {{icon}}"></i>{{__ "Access with"}} {{name}}
         </a>
       </div>
 

keys.json.sample

@@ -15,9 +15,22 @@
       , "callbackURL": "http://local.host:3000/auth/facebook/callback"
     }
   , "github": {
-        "clientID": ""
+        "name": "GitHub"
+      , "clientID": ""
       , "clientSecret": ""
       , "callbackURL": "http://local.host:3000/auth/github/callback"
     }
-
+  , "google": {
+      , "clientID": ""
+      , "clientSecret": ""
+      , "callbackURL": "http://local.host:3000/auth/google/callback"
+    }
+  , "auth0": {
+        "name": "Others"
+        "icon": "paper-plane"
+      , "domain": ""
+      , "clientID": ""
+      , "clientSecret": ""
+      , "callbackURL": "http://local.host:3000/auth/auth0/callback"
+    }
 }

lib/auth/index.js

@@ -71,15 +71,20 @@ const setPicture = (user, profile) => {
  */
 
 const generateStrategy = provider => {
-  // Geneate routes
-  app.get(`/auth/${provider}`, saveRedirect, passport.authenticate(provider));
-  app.get(`/auth/${provider}/callback`, passport.authenticate(provider, { failureRedirect: '/' }), redirectSubdomain);
-
   // Require provider own module
   // TODO: Figure out how to use ES2015 syntax instead of requires
-  const Strategy = require(`passport-${provider}`).Strategy;
+   const moduleName = provider === 'google' ? 'passport-google-oauth20' : `passport-${provider}`;
+   const Strategy = require(moduleName).Strategy;
+
+  // Generate routes
+  const authenticateOptions = provider === 'google' ? { scope: ['profile'] } : {};
+  app.get(`/auth/${provider}`, saveRedirect, passport.authenticate(provider, authenticateOptions));
+  app.get(`/auth/${provider}/callback`, passport.authenticate(provider, { failureRedirect: '/' }), redirectSubdomain);
 
-  passport.use(new Strategy(keys[provider], async (token, tokenSecret, profile, done) => {
+  const strategyOptions = Object.assign({}, keys[provider]);
+  delete strategyOptions.name;
+  delete strategyOptions.icon;
+  passport.use(new Strategy(strategyOptions, async (token, tokenSecret, profile, done) => {
     let user = await User.findOne({provider_id: profile.id, provider: provider}).exec();
     if(!user) {
       user = new User();

lib/models/user.js

@@ -5,7 +5,7 @@
 
 export default {
   'provider':     { type: String, required: true },
-  'provider_id':  { type: Number, required: true },
+  'provider_id':  { type: String, required: true },
   'username':     { type: String, required: true },
   'name':         { type: String, required: true },
   'email':        { type: String, validate: /.+@.+\..+/ }, // TODO: Improve this validation

lib/routes/helpers.js

@@ -50,6 +50,10 @@ export const setViewVar = (key, value) => ((req, res, next) => {
  */
 
 export const loadProviders = (req, res, next) => {
-  res.locals.providers = Object.keys(providers);
+  res.locals.providers = Object.entries(providers).map(([key, options]) => ({
+    key: key,
+    name: options.name || key.charAt(0).toUpperCase() + key.slice(1),
+    icon: `fa-${options.icon || key}`,
+  }));
   next();
 };

package.json

@@ -29,8 +29,10 @@
     "multer": "0.1.8",
     "nodemailer": "0.4.4",
     "passport": "0.2.2",
+    "passport-auth0": "^0.5.2",
     "passport-facebook": "2.0.0",
     "passport-github": "0.1.5",
+    "passport-google-oauth20": "^1.0.0",
     "passport-http": "^0.3.0",
     "passport-meetup": "0.1.2",
     "passport-twitter": "1.0.3",

views/layout.jade

@@ -56,7 +56,7 @@ html
         baseURL: "!{host}",
         disqus_shortname: "!{disqus_shortname}",
         statuses: "!{statuses}",
-        providers: "!{providers}",
+        providers: !{JSON.stringify(providers)},
         fbAppId: "!{fbAppId}"
       };