authenticate with Google; authentication forms appearance adjusted

NordicSoft · Apr 8, 2020 · fafa0cc · fafa0cc
1 parent 224ded6
commit fafa0cc
Show file tree

Hide file tree

Showing 9 changed files with 76 additions and 137 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,9 @@
 # Changelog
 
+## **2.2.0** - *2020-04-08*
+* authenticate with Google;
+* authentication forms appearance adjusted;
+
 ## **2.1.1** - *2020-04-08*
 * `Dashboard` - browsers list adjusted (IE support dropped);
 * `Facade`:

diff --git a/api/lib/auth.js b/api/lib/auth.js
@@ -115,6 +115,13 @@ var security = require("./security"),
                     let user;
                     try {
                         user = await store.users.findOne({ "google.id" : profile.id });
+
+                        // if not found by google.id
+                        if (!user) {
+                            // try to find by google email
+                            user = await store.users.getByEmail(profile.emails[0].value);
+                        }
+
                         logger.dir(user);
                     } catch (err) {
                         logger.error(err);
@@ -123,6 +130,24 @@ var security = require("./security"),
 
                     // if a user is found, log in
                     if (user) {
+
+                        try {
+                        // update user info
+                            user.name = user.name || profile.displayName;
+                            user.email = user.email || profile.emails[0].value;
+                            if (!user.photo && profile.photos && profile.photos.length) {
+                                user.photo = profile.photos[0].value;
+                            }
+                            user.google = user.google || {};
+                            user.google.id = profile.id;
+                            user.google.token = token;
+                            user.google.name = profile.displayName;
+                            user.google.email = profile.emails[0].value;
+
+                            await store.users.save(user);
+                        } catch (err) {
+                            // silent
+                        }
                         logger.info("Google signin successful");
                         return done(null, user);
                     }
@@ -131,16 +156,22 @@ var security = require("./security"),
                     user = {
                         name: profile.displayName,
                         email: profile.emails[0].value,
+                        photo: profile.photos && profile.photos.length > 0 ? profile.photos[0].value : undefined,
                         google: {
                             id: profile.id,
                             token,
                             name: profile.displayName,
-                            emails: profile.emails
+                            email: profile.emails[0].value
                         }
                     };
 
+                    let usersCount = await store.users.count();
+                    if (usersCount === 0) {
+                        user.roles = ["owner"];
+                    }
+
                     try {
-                        user = await store.users.insert(user);
+                        await store.users.save(user);
                         logger.info("New user registered with google");
                         return done(null, user);
                     } catch (err) {
@@ -149,117 +180,6 @@ var security = require("./security"),
                     }
                 });
             })
-        /*
-        required configuration:
-        "configAuth": {
-            "facebookAuth": {
-                "clientID": "your-secret-clientID-here",
-                "clientSecret": "your-client-secret-here",
-                "callbackURL": "http://localhost:8080/auth/facebook/callback"
-            },
-            "twitterAuth": {
-                "consumerKey": "your-consumer-key-here",
-                "consumerSecret": "your-client-secret-here",
-                "callbackURL": "http://localhost:8080/auth/twitter/callback"
-            },
-            "googleAuth": {
-                "clientID": "your-secret-clientID-here",
-                "clientSecret": "your-client-secret-here",
-                "callbackURL": "http://localhost:8080/auth/google/callback"
-            }
-        }
-        
-        facebook: new FacebookStrategy({
-                // pull in our app id and secret from our auth.js file
-                clientID: configAuth.facebookAuth.clientID,
-                clientSecret: configAuth.facebookAuth.clientSecret,
-                callbackURL: configAuth.facebookAuth.callbackURL
-            },
-            // facebook will send back the token and profile
-            function(token, refreshToken, profile, done) {
-
-                // asynchronous
-                process.nextTick(function() {
-
-                    // find the user in the database based on their facebook id
-                    store.getUser({ 'facebook.id': profile.id }, function(err, user) {
-
-                        // if there is an error, stop everything and return that
-                        // ie an error connecting to the database
-                        if (err)
-                            return done(err);
-
-                        // if the user is found, then log them in
-                        if (user) {
-                            return done(null, user); // user found, return that user
-                        } else {
-                            // if there is no user found with that facebook id, create them
-                            var newUser = new User();
-
-                            // set all of the facebook information in our user model
-                            newUser.facebook.id = profile.id; // set the users facebook id	                
-                            newUser.facebook.token = token; // we will save the token that facebook provides to the user	                
-                            newUser.facebook.name = profile.name.givenName + ' ' + profile.name.familyName; // look at the passport user profile to see how names are returned
-                            newUser.facebook.email = profile.emails[0].value; // facebook can return multiple emails so we'll take the first
-
-                            // save our user to the database
-                            newUser.save(function(err) {
-                                if (err)
-                                    throw err;
-
-                                // if successful, return the new user
-                                return done(null, newUser);
-                            });
-                        }
-
-                    });
-                });
-
-            }),
-        twitter: new TwitterStrategy({
-                consumerKey: configAuth.twitterAuth.consumerKey,
-                consumerSecret: configAuth.twitterAuth.consumerSecret,
-                callbackURL: configAuth.twitterAuth.callbackURL
-            },
-            function(token, tokenSecret, profile, done) {
-
-                // make the code asynchronous
-                // store.getUser won't fire until we have all our data back from Twitter
-                process.nextTick(function() {
-
-                    store.getUser({ 'twitter.id': profile.id }, function(err, user) {
-
-                        // if there is an error, stop everything and return that
-                        // ie an error connecting to the database
-                        if (err)
-                            return done(err);
-
-                        // if the user is found then log them in
-                        if (user) {
-                            return done(null, user); // user found, return that user
-                        } else {
-                            // if there is no user, create them
-                            var newUser = new User();
-
-                            // set all of the user data that we need
-                            newUser.twitter.id = profile.id;
-                            newUser.twitter.token = token;
-                            newUser.twitter.username = profile.username;
-                            newUser.twitter.displayName = profile.displayName;
-
-                            // save our user into the database
-                            newUser.save(function(err) {
-                                if (err)
-                                    throw err;
-                                return done(null, newUser);
-                            });
-                        }
-                    });
-
-                });
-
-            }),
-            */
     };
 
 module.exports = function (express) {

diff --git a/api/package.json b/api/package.json
@@ -1,6 +1,6 @@
 {
   "name": "express-template-api",
-  "version": "2.1.1",
+  "version": "2.2.0",
   "description": "Website template (skeleton) based on Express.js 4, Vue.js and Vuetify 2",
   "author": "NordicSoft",
   "license": "MIT",

diff --git a/dashboard/package.json b/dashboard/package.json
@@ -1,6 +1,6 @@
 {
   "name": "express-template-dashboard",
-  "version": "2.1.1",
+  "version": "2.2.0",
   "private": true,
   "main": "server.js",
   "scripts": {

diff --git a/dashboard/src/auth/App.vue b/dashboard/src/auth/App.vue
@@ -5,10 +5,22 @@
                 <v-row align="center" justify="center">
                     <v-col cols="12" sm="8" md="7" lg="5">
                         <v-card class="elevation-3">
-                            <v-card-text class="pa-10">
+                            <v-card-text class="pa-10 pb-5">
                                 <router-view></router-view>
-                                <div class="text-center pt-7">
-                                    <v-btn depressed small :href="facadeUrl">
+                                <div class="text-center py-5 mx-n10 social">
+                                    <v-btn
+                                        outlined
+                                        color="orange"
+                                        @click="google"
+                                    >
+                                        <v-icon left>
+                                            mdi-google
+                                        </v-icon>
+                                        Google
+                                    </v-btn>
+                                </div>
+                                <div class="text-center pt-5">
+                                    <v-btn text small :href="facadeUrl">
                                         <v-icon left>
                                             mdi-feature-search-outline
                                         </v-icon>
@@ -31,6 +43,11 @@ export default {
         return {
             facadeUrl: process.env.VUE_APP_FACADE_URL
         };
+    },
+    methods: {
+        async google() {
+            window.location = process.env.VUE_APP_API_BASE_URL + "/auth/google";
+        }
     }
 };
 </script>
@@ -47,5 +64,14 @@ export default {
 .v-card {
     max-width: 500px !important;
     margin: 0 auto;
+    background: linear-gradient(
+        35deg,
+        rgba($color: #1cd8d2, $alpha: 0.2),
+        rgba($color: #93edc7, $alpha: 0.1)
+    );
+}
+
+.social {
+    background: rgba($color: #fff, $alpha: 0.5);
 }
 </style>
diff --git a/dashboard/src/auth/Register.vue b/dashboard/src/auth/Register.vue
@@ -63,17 +63,17 @@
             maxlength="254"
             outlined
             required
-            class="mb-3"
+            class="mb-1"
         />
-        <div class="text-center mb-7">
+        <div class="text-center">
             <v-btn color="success" depressed x-large type="submit">
                 <v-icon left>
                     mdi-account-plus-outline
                 </v-icon>
                 Register
             </v-btn>
         </div>
-        <div class="text-center">
+        <div class="text-center py-5">
             Already have an account?
             <router-link to="/">Sign In</router-link>
         </div>

diff --git a/dashboard/src/auth/SignIn.vue b/dashboard/src/auth/SignIn.vue
@@ -23,25 +23,17 @@
             maxlength="254"
             outlined
             required
-            class="mb-3"
+            class="mb-1"
         />
-        <div class="text-center mb-7">
+        <div class="text-center">
             <v-btn color="success" depressed x-large type="submit">
                 <v-icon left>
                     mdi-account-check-outline
                 </v-icon>
                 Sign In
             </v-btn>
         </div>
-        <div class="text-center mb-7">
-            <v-btn text @click="google">
-                <v-icon left>
-                    mdi-google
-                </v-icon>
-                Sign in with Google
-            </v-btn>
-        </div>
-        <div class="text-center">
+        <div class="text-center py-5">
             Don't have an account?
             <router-link to="/register">Register</router-link>
         </div>
@@ -75,9 +67,6 @@ export default {
             });
             // TODO: consider `return` query param
             window.location = process.env.BASE_URL.slice(0, -1);
-        },
-        async google() {
-            window.location = process.env.VUE_APP_API_BASE_URL + "/auth/google";
         }
     }
 };

diff --git a/facade/package.json b/facade/package.json
@@ -1,6 +1,6 @@
 {
   "name": "express-template-facade",
-  "version": "2.1.1",
+  "version": "2.2.0",
   "description": "Website template (skeleton) based on Express.js 4, Vue.js and Vuetify 2",
   "author": "NordicSoft",
   "license": "MIT",

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "express-template",
-  "version": "2.1.1",
+  "version": "2.2.0",
   "description": "Website template (skeleton) based on Express.js 4, Vue.js and Vuetify 2",
   "author": "NordicSoft",
   "license": "MIT",