Merge branch 'garrett/statecontexttest', remote-tracking branch 'origin' into mike/statecontexttest

Author: mdunnmon

app/src/components/App.tsx

@@ -68,7 +68,7 @@ export const App = (): JSX.Element => {
         }
       });
     }
-  }, [state.isLoggedIn]);
+  }, []);
   useEffect(() => {
     // provide config properties to legacy projects so new edits can be auto saved
     // if (state.config === undefined) {

app/src/components/login/SignIn.tsx

@@ -172,8 +172,8 @@ const SignIn: React.FC<LoginInt & RouteComponentProps> = props => {
     e: React.MouseEvent<HTMLButtonElement, MouseEvent>
     ) => {
       e.preventDefault();
-        window.api.github();
-        props.history.push('/');
+        // window.api.github();
+        window.location.assign('http://localhost:5656/auth/github');
     }
   const responseFacebook = response => {
     if (response.accessToken) {
@@ -284,6 +284,18 @@ const SignIn: React.FC<LoginInt & RouteComponentProps> = props => {
             >
               Sign In With Github
             </Button>
+            <Button
+              fullWidth
+              variant="contained"
+              color="primary"
+              id="SignInWithGoogle"
+              onClick={(e)=>{
+                e.preventDefault();
+                window.location.assign('http://localhost:5656/auth/google');
+              }}
+            >
+              Sign in With Google
+            </Button>
             <Button
               fullWidth
               variant="contained"

app/src/components/right/LoginButton.tsx

@@ -32,7 +32,10 @@ export default function LoginButton() {
       window.location.href = '/index-prod.html'
     } else {
     window.location.href = 'http://localhost:8080/#/login';
-    dispatch(toggleLoggedIn())
+    if(state.isLoggedIn){
+      dispatch(toggleLoggedIn())
+    }
+   
     }
   }
   if (state.isLoggedIn) {

package.json

@@ -156,6 +156,7 @@
     "electron-window-manager": "^1.0.6",
     "esbuild-wasm": "^0.14.51",
     "eslint-plugin-react-hooks": "^4.6.0",
+    "express-session": "^1.17.3",
     "fs": "^0.0.1-security",
     "graphql": "^16.6.0",
     "identity-obj-proxy": "^3.0.0",
@@ -166,6 +167,7 @@
     "node-fetch": "^2.6.1",
     "passport": "^0.6.0",
     "passport-github2": "^0.1.12",
+    "passport-google-oauth20": "^2.0.0",
     "prettier": "^2.7.1",
     "prop-types": "^15.8.1",
     "radium": "^0.26.2",

server/controllers/sessionController.js

@@ -140,7 +140,7 @@ sessionController.gitHubSendToken = (req, res, next) => {
 // creates a session when logging in with github
 sessionController.githubSession = (req, res, next) => {
   // req.user is passed in from passport js -> serializeuser/deserializeuser
-  const cookieId = req.user._id;
+  const cookieId = req.user.id;
   Sessions.findOne({ cookieId }, (err, session) => {
     if (err) {
       return next({

server/models/Oauth-model.js

@@ -0,0 +1,12 @@
+const mongoose = require('mongoose');
+const Schema = mongoose.Schema
+
+const userSchema = new Schema({
+    username: { type: String },
+    githubId: { type: String, unique: true },
+    googleId: { type: String, unique: true }
+})
+
+const User = mongoose.model('user', userSchema)
+
+module.exports = User;

server/models/reactypeModels.js

@@ -11,9 +11,9 @@
 const mongoose = require('mongoose');
 const bcrypt = require('bcryptjs');
 require('dotenv').config();
-const mongoURI = process.env.MONGO_DB_DEV;
+const mongoURI = process.env.MONGO_DB
 const URI =
-  process.env.NODE_ENV === 'production' ? mongoURI : process.env.MONGO_DB_DEV;
+  process.env.NODE_ENV === 'production' ? mongoURI : process.env.MONGO_DB;
 
 const SALT_WORK_FACTOR = 10;
 // connect to mongo db

server/routers/auth.js

@@ -0,0 +1,31 @@
+const router = require('express').Router();
+const passport = require('passport');
+
+router.get(
+    '/github',
+    passport.authenticate('github', { 
+      scope: ['profile']
+     })
+  );
+  
+router.get(
+    '/github/callback',
+    passport.authenticate('github'),
+    (req, res) => {
+      console.log('this authenticate function is being run')
+      console.log(req.user.id)
+      res.cookie('ssid', req.user.id)
+      return res.redirect('http://localhost:8080')
+  })
+
+router.get('/google', passport.authenticate('google', {
+    scope: ['profile']
+}))
+
+router.get('/google/callback', passport.authenticate('google'), (req, res) => {
+    console.log('google authenicate function being run')
+    res.cookie('ssid', req.user.id)
+    return res.redirect('http://localhost:8080')
+})
+
+module.exports = router;

server/routers/passport-setup.js

@@ -0,0 +1,79 @@
+const passport = require('passport');
+const GitHubStrategy = require('passport-github2').Strategy
+const user = require('../models/Oauth-model');
+const GoogleStrategy = require('passport-google-oauth20')
+
+passport.serializeUser((user, done) => {
+  done(null, user.id)
+})
+
+passport.deserializeUser((id, done) => {
+  user.findById(id)
+  .then(user=>{
+    done(null, user)
+  })
+})
+
+passport.use(
+  new GitHubStrategy(
+    {
+      clientID: process.env.GITHUB_CLIENT,
+      clientSecret: process.env.GITHUB_SECRET,
+      callbackURL: `http://localhost:5656/auth/github/callback`
+    },
+    function(accessToken, refreshToken, profile, done) {
+      console.log(profile);
+      user.findOne({
+        githubId: profile.id
+      })
+      .then(currentUser => {
+        if (currentUser) {
+          console.log('user is: ', currentUser)
+          return done(null, currentUser)
+        } else {
+          user.create({
+            username: profile.displayName+'(Github)',
+            githubId: profile.id
+          })
+          .then(data=>{
+            console.log('user added successfully: ', data);
+            return done(null, data)
+          })
+          .catch(data=>console.log('issue with adding user to database', data))
+        }
+      })
+    }
+  )
+);
+
+passport.use(
+  new GoogleStrategy(
+    {
+      clientID: process.env.GOOGLE_CLIENT,
+      clientSecret: process.env.GOOGLE_SECRET,
+      callbackURL: `http://localhost:5656/auth/google/callback`
+    },
+    function(accessToken, refreshToken, profile, done) {
+      console.log(profile);
+      user.findOne({
+        googleId: profile.id
+      })
+      .then(currentUser => {
+        if (currentUser) {
+          console.log('user is: ', currentUser)
+          return done(null, currentUser)
+        } else {
+          user.create({
+            username: profile.displayName+'(Google)',
+            googleId: profile.id
+          })
+          .then(data=>{
+            console.log('user added successfully: ', data);
+            return done(null, data)
+          })
+          .catch(data=>console.log('issue with adding user to database', data))
+        }
+      })
+    }
+  )
+);

server/server.mjs

@@ -65,32 +65,29 @@ app.use(
 
 // NOTE from v13.0 team: GitHub OAuth works fine in Electron production app and the backend for Electron production app is deployed on Heroku at https://reactype-caret.herokuapp.com/ (get credentials from instructor )
 
-// passport.use(
-//   new GitHubStrategy(
-//     {
-//       clientID: process.env.GITHUB_ID,
-//       clientSecret: process.env.GITHUB_SECRET,
-//       callbackURL: isDev
-//         ? `http://localhost:${DEV_PORT}/github/callback`
-//         : `https://reactype-caret.herokuapp.com/github/callback`
-//     },
-//     function(accessToken, refreshToken, profile, done) {
-//       console.log(profile);
-//     }
-//   )
-// );
+// V.15 Team: Github Oauth and Google Oauth works! (starts here)
+// const passport = require('passport');
+import passport from 'passport';
+// const passportSetup = require('./routers/passport-setup.js')
+import passportSetup from './routers/passport-setup.js'
+// const session = require('express-session');
+import session from 'express-session'
+// const authRoutes = require('./routers/auth.js')
+import authRoutes from './routers/auth.js'
+
+app.use(session({
+  secret: process.env.SESSION_SECRET,
+  resave: false,
+  saveUninitialized: true,
+  cookie: { maxAge: 24*60*60*1000 }
+}))
+
+app.use(passport.initialize());
+app.use(passport.session());
+
+// go to other files
+app.use('/auth', authRoutes)
 
-// initializes passport and passport sessions
-// app.use(passport.initialize());
-// app.use(passport.session());
-
-// app.get(
-//   '/auth/github',
-//   passport.authenticate('github', { session: false }),
-//   (req, res) => {
-//     res.send('github');
-//   }
-// );
 
 // for Oauth which is currently not working
 // app.get(
@@ -230,6 +227,10 @@ if (process.env.NODE_ENV == 'production'){
 });
 }
 
+app.get('/test', (req, res) => {
+  res.send('test request is working');
+})
+
 app.get('/', function(req, res) {
   res.send('Houston, Caret is in orbit!');
 });

webpack.development.js

@@ -12,6 +12,8 @@ module.exports = merge(base, {
   mode: 'development',
   devtool: 'inline-source-map',
   devServer: {
+    headers: { 'Access-Control-Allow-Origin': '*' },
+    historyApiFallback: true,
     host: 'localhost',
     port: '8080',
     hot: true, // Hot-reload this server if changes are detected
@@ -27,6 +29,9 @@ module.exports = merge(base, {
       },
       '/user-styles': {
         target: `http://localhost:${DEV_PORT}/`
+      },
+      '/auth/**': {
+        target: `http://localhost:5656/`
       }
     }
   },