Github and Google Oauth

Author: Yoheze

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"

package.json

@@ -158,6 +158,7 @@
     "esbuild-wasm": "^0.14.51",
     "eslint-plugin-react-hooks": "^4.6.0",
     "express-graphql": "^0.12.0",
+    "express-session": "^1.17.3",
     "fs": "^0.0.1-security",
     "graphql": "^15.8.0",
     "identity-obj-proxy": "^3.0.0",
@@ -169,6 +170,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 = 'mongodb+srv://Yoheze:[email protected]/?retryWrites=true&w=majority';
 const URI =
-  process.env.NODE_ENV === 'production' ? mongoURI : process.env.MONGO_DB_DEV;
+  process.env.NODE_ENV === 'production' ? mongoURI : 'mongodb+srv://Yoheze:[email protected]/?retryWrites=true&w=majority';
 
 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: 'c8e71b09f18a095c4c1e',
+      clientSecret: '075c7b27061ccecd9258258e1d3749423309afa3',
+      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: '374131547814-d5umgbo4d5ftof4ctk2h1rfvn5v3jr10.apps.googleusercontent.com',
+      clientSecret: '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',
+      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.js

@@ -1,16 +1,18 @@
 const { ApolloServer } = require('apollo-server-express');
 const express = require('express');
 const cookieParser = require('cookie-parser');
-//const passport = require('passport');
-//const GitHubStrategy = require('passport-github2').Strategy;
+const passport = require('passport');
+const GitHubStrategy = require('passport-github2').Strategy;
 const { DEV_PORT } = require('../config');
+const passportSetup = require('./routers/passport-setup.js')
 
 const path = require('path');
 const cors = require('cors');
 const userController = require('./controllers/userController');
 const cookieController = require('./controllers/cookieController');
 const sessionController = require('./controllers/sessionController');
 const projectController = require('./controllers/projectController');
+const mongoose = require('mongoose')
 
 const app = express();
 
@@ -41,32 +43,23 @@ 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 session = require('express-session');
+const authRoutes = require('./routers/auth.js')
 
-// initializes passport and passport sessions
-// app.use(passport.initialize());
-// app.use(passport.session());
+app.use(session({
+  secret: 'asdsidfhbos',
+  resave: false,
+  saveUninitialized: true,
+  cookie: { maxAge: 24*60*60*1000 }
+}))
+
+app.use(passport.initialize());
+app.use(passport.session());
+
+app.use('/auth', authRoutes)
+// go to other files
 
-// app.get(
-//   '/auth/github',
-//   passport.authenticate('github', { session: false }),
-//   (req, res) => {
-//     res.send('github');
-//   }
-// );
 
 // for Oauth which is currently not working
 // app.get(
@@ -123,6 +116,7 @@ app.use('/user-styles', stylesRouter);
 // schemas used for graphQL
 const typeDefs = require('./graphQL/schema/typeDefs.js');
 const { dirname } = require('node:path');
+const { Mongoose } = require('mongoose');
 
 // instantiate Apollo server and attach to Express server, mounted at 'http://localhost:PORT/graphql'
 
@@ -183,6 +177,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/`
       }
     }
   },