Integrate passport GoogleStrategy login successfully

Author: hurricanemark

config/passport-setup.js

@@ -1,15 +1,18 @@
-const passport = require('passport');
-const GoogleStrategy = require('passport-google-oauth20');
-const User = require('../models/user-models');
+import passport  from 'passport';
+import GoogleStrategy  from 'passport-google-oauth20';
+import { User } from '../models/user-models.js';
+
+import { keys } from './keys.js';
+
 // const keys = require ('./keys');
 import { GoogleclientID, GoogleclientSecret } from './../index.js';
 
 // serialize user structure in the mongodb
-passport.serializeUser((user, done) => {
+const serialize = passport.serializeUser((user, done) => {
     done(null, user.id);
 });
 
-passport.deserializeUser((id, done) => {
+const deserialize = passport.deserializeUser((id, done) => {
 try {
     User.findById(id).then((user) => {
         done(null, user);
@@ -28,11 +31,11 @@ try {
  * 
  * Go to https://console.cloud.google.com/ to create your own clientID and clientSecret.
  */
-passport.use(new GoogleStrategy({
+const googleStrategy = passport.use(new GoogleStrategy({
     // options for google strategy
     callbackURL: '/auth/google/redirect',
-    clientID: GoogleclientID,
-    clientSecret: GoogleclientSecret
+    clientID: keys.google.clientID, //GoogleclientID,
+    clientSecret: keys.google.clientSecret  //GoogleclientSecret
 }, (accessToken, refreshToken, profile, done) => {
     // passport callback function
     // console.log('accessToken: ' + accessToken);
@@ -60,4 +63,6 @@ passport.use(new GoogleStrategy({
         }
     })
 
-}));
+}));
+
+export { serialize, deserialize, googleStrategy };

index.js

@@ -2,6 +2,11 @@ import * as dotenv from 'dotenv';
 import request from 'request';
 import express from 'express';
 import bodyParser from 'body-parser';
+import cookieSession from 'cookie-session';
+import passport from 'passport';
+import mongoose from 'mongoose';
+import { compile } from 'ejs';
+import { serialize, deserialize, googleStrategy } from './config/passport-setup.js';
 import {encryptAES, decryptAES} from './crypto.js';
 
 // dev env
@@ -16,25 +21,27 @@ let WEATHERBIT_KEY;
 let WEATHERBIT_URI='https://api.weatherbit.io/v2.0/';
 let GoogleclientID;
 let GoogleclientSecret;
+let MongoDBConString;
+let CookieKey = 'c93da061ab7f984267e36c8431645035d611bc892c58f0e64614c68a4384a179126e7ed0b5829e460f292f72e9ef4facb68a0894cb2425ba046b82a3bae0b529';
+
 if (process.env.NODE_ENV === "production") {
     EXCHANGE_RATE_APIKEY = process.env.EXCHANGE_RATE_APIKEY;
     WEATHERBIT_KEY = process.env.WEATHERBIT_KEY;
     GoogleclientID = process.env.GoogleclientID;
     GoogleclientSecret = process.env.GoogleclientSecret;    
-
+    MongoDBConString = process.env.MONGODB_URI;
 } else {
     // dynamically importing keys.js using promise:
     import('./config/keys.js').then((secrets) => {
       EXCHANGE_RATE_APIKEY = secrets.keys.exchangerateapi.EXCHANGE_APIKEY;
       WEATHERBIT_KEY = secrets.keys.weatherbitapi.WEATHERBIT_APIKEY;
       GoogleclientID = secrets.keys.google.clientID;
       GoogleclientSecret = secrets.keys.google.clientSecret;
+      MongoDBConString = secrets.keys.mongodb.connectionString;
     });
-
 }
 
 
-
 // Create network routing
 const app = express();
 
@@ -48,6 +55,8 @@ import { router as weatherbitRoutes } from './routes/weatherbit-routes.js';
 // routes handler for OAuth20 methods
 import { router as oauth20Routes } from './routes/auth-routes.js';
 
+// routes handler for profile
+import { router as profileRoutes } from './routes/profile-routes.js';
 
 // EJS is accessed by default in the views directory.
 app.set('view engine', 'ejs');
@@ -58,6 +67,29 @@ app.use(express.static('public'));
 // Parse incoming request bodies in a middleware before your handlers, available under the `req.body` property.
 app.use(bodyParser.urlencoded({ extended: true }));
 
+
+
+// cookie!
+app.use(cookieSession({
+  maxAge: 24 * 60 * 60 * 1000,
+  keys: [CookieKey]
+}));
+
+
+// Initialize passport
+app.use(passport.initialize());
+app.use(passport.session());
+
+
+// connect to mongodb
+mongoose.connect(MongoDBConString, () => {
+        console.log('Connected to MongoDB.');
+    });
+
+
+
+
+
 // Set up all routes related to currency exchange rate methods
 app.use('/exchange', currencyExchangeRoutes);
 
@@ -67,14 +99,17 @@ app.use('/weatherbit', weatherbitRoutes);
 // Set up all routes related to oauth2 methods
 app.use('/auth', oauth20Routes);
 
+// set up routes for user info after logged in
+app.use('/profile', profileRoutes);
+
 // Homepage: get the locale from the client-side via the ejs form
 app.get('/', (req, res) => {
-  res.render('index', {xkey: 'hey'});
+  res.render('index', {user: req.user, xkey: 'hey'});
 })
 
 // about page
 app.get('/about', function(req, res) {
-  res.render('pages/about');
+  res.render('pages/about', {user: req.user});
 });
 
 

package-lock.json

@@ -23,7 +23,7 @@
     "ejs": "^3.1.8",
     "express": "^4.18.1",
     "mongoose": "^6.7.2",
-    "passport": "^0.6.0",
+    "passport": "^0.5.3",
     "passport-google-oauth20": "^2.0.0",
     "request": "^2.88.2"
   },

package.json

@@ -1,12 +1,13 @@
 import express from 'express';
 import passport from 'passport';
+import { User }  from '../models/user-models.js';
 
 
 const router = express.Router();
 
 // auth login
 router.get('/login', (req, res) => {
-    res.render('login', {user: req.user});
+    res.render('pages/login', {user: req.user});
 });
 
 // auth logout

routes/auth-routes.js

@@ -10,7 +10,7 @@ const router = express.Router();
 router.get('/', (req, res) => {
     // console.log(currencyCodes);
     let cdat = JSON.stringify(currencyCodes);
-    res.render('pages/exchangeRate', { Cdata: cdat });
+    res.render('pages/exchangeRate', { user: req.user, Cdata: cdat });
   });
 
 router.post('/', (req, res) => {
@@ -27,7 +27,7 @@ router.post('/', (req, res) => {
 
     promiseData.then ( (data) => {
         // console.log("Exchange data: " + data.conversion_result);
-        res.render('pages/exchangeRate', {  Cdata: cdat, amount: amnt, frC: Fc, toC: Tc, exchange: data});
+        res.render('pages/exchangeRate', {  user: req.user, Cdata: cdat, amount: amnt, frC: Fc, toC: Tc, exchange: data});
     });
 });
 

routes/currency-exchange-routes.js

@@ -1,4 +1,7 @@
-const router = require('express').Router();
+import express from 'express';
+
+const router = express.Router();
+
 
 // make sure the user has not already logged in.
 const authCheck = (req, res, next) => {
@@ -7,15 +10,17 @@ const authCheck = (req, res, next) => {
         res.redirect('/auth/login');
     } else {
         // if logged in
+        console.log("You are already logged in.");
         next();
     }
 }
 
 // final check with middleware authCheck.
 router.get('/', authCheck, (req, res) => {
     // Okay, user is legit.  Let display views/profile.ejs
-    res.render('profile', {user: req.user});
+    console.log(req.user);
+    res.render('pages/profile', {user: req.user});
 
 });
 
-module.exports = router;
+export { router };

routes/profile-routes.js

@@ -17,7 +17,7 @@ const router = express.Router();
 // }
 
 router.get('/', (req, res) => {
-    res.render('pages/weatherbit');
+    res.render('pages/weatherbit', {user: req.user});
 });
 
 // Posting data to the client-side requires multiple API calls.
@@ -36,7 +36,11 @@ router.post('/', (req, res) => {
     }
 
     promisedData.then( (data) => {
-        res.render('pages/weatherbit', data);
+      // const data2 = {user: req.user};
+      Object.assign(data, {user: req.user});
+      
+      console.log(data);
+      res.render('pages/weatherbit', data);
     })
 });
 
@@ -250,7 +254,7 @@ function getWeatherAlerts(city){
         aData = null;
       }
       // combine 3 promises into a huge rendering passing paramters: 
-      let combinedData = { locale: city, alertStatus: aStatus, alertData: aData, curStatus: 200, curData: currentConditions,  foreStatus: 200, foreData: dailyForecast, airqStatus: 200, airqData: airQuality.data[currentHour], error: null };
+      let combinedData = { locale: city, alertStatus: aStatus, alertData: aData, curStatus: 200, curData: currentConditions,  foreStatus: 200, foreData: dailyForecast, airqStatus: 200, airqData: airQuality.data[currentHour], error: null};
       return combinedData;
     } else {
       return { locale: city, alertStatus: 400, alertData: null, curStatus: 400, curData: null, foreStatus: 400, foreData: null, airqStatus: 400, airqData: null, error: null };

routes/weatherbit-routes.js

@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <%- include('../partials/head'); %>
+</head>
+
+
+<body class="container">
+    <header>
+        <%- include('../partials/header'); %>
+    </header>
+
+    <main >
+        <div class="row">
+            <div class="col-sm-10">
+                <div class="jumbotron jumbotron-fluid">
+                    <header>
+                        <h3>Log in to your account with:</h3>
+                    </header>
+                    <main>
+                        <li><a class="btn btn-sm btn-outline-success ghost-button" href="/auth/google">Google+</a></li>
+                    </main>
+                </div>
+            </div>
+
+            <div class="col-sm-2">
+                <div class="well">
+                    <h3>Reserved Ad space</h3>
+                </div>
+            </div>
+        </div>
+    </main>
+
+    <footer>
+        <%- include('../partials/footer'); %>
+    </footer>
+
+</body>
+
+</html>

views/pages/login.ejs

@@ -0,0 +1,51 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <%- include('../partials/head'); %>
+</head>
+
+
+<body class="container">
+    <header>
+        <%- include('../partials/header'); %>
+    </header>
+
+    <main >
+        <div class="row">
+            <div class="col-sm-10">
+                <div class="jumbotron jumbotron-fluid">
+                    <header>
+                        <h3>Welcome <strong style="color:goldenrod"><%= user.username %></strong></h3>
+                    </header>
+                    <main>
+                        <img src="<%= user.thumbnail %>" />
+                        <p>What do you want to do today?</p>
+                        <ul>
+                            <li>Raise an ant farm and sneak it in captain Underpant.</li>
+                            <li>Pondering where the darkness comes from.  (We know the physical source of light, but we donot know the source of darkness).</li>
+                            <li>Write a mobile app to detect liyng politicians and enrourage everyone to point the app at political rallies.</li>
+                            <li>Discover why Mars cannot have water in liquid form.</li>
+                            <li>Invent ways to collect all plastic wastes and use it to pave roads.</li>
+                            <li>Send a message to the aliens on the Betelgeuse star system.  We can supply them with earth's oligarchs as food source.</li>
+                        </ul>
+                    </main>
+
+                </div>
+            </div>
+
+            <div class="col-sm-2">
+                <div class="well">
+                    <h3>Reserved Ad space</h3>
+                </div>
+            </div>
+        </div>
+    </main>
+
+    <footer>
+        <%- include('../partials/footer'); %>
+    </footer>
+
+</body>
+
+</html>