LL-332

client/src/components/Login.tsx

@@ -11,7 +11,7 @@ export const Login: FC<Users> = (props: Users) => {
       <h1>Login</h1>
       {/* Start of third party login buttons */}
       <div className="third-party-btns">
-        <GoogleOAuthProvider clientId="281168454695-kvsbsq9sp4gtap61erk0mhe53bgddgfl.apps.googleusercontent.com">
+        <GoogleOAuthProvider clientId="337166284035-e9g7u5rcp0fam8o2bbrcj2o8nct3tabb.apps.googleusercontent.com">
           <GoogleLogin />
         </GoogleOAuthProvider>
       </div>

client/src/components/ThirdParty.tsx

@@ -7,6 +7,7 @@ import { useGoogleLogin } from "@react-oauth/google"
 import { PublicClientApplication } from "@azure/msal-browser"
 import axios from "axios"
 import queryString from "querystring"
+// import { userInfo } from "os";
 
 // Microsoft config
 export const MicrosoftConfig = {
@@ -24,48 +25,18 @@ const msalInstance = new PublicClientApplication(MicrosoftConfig)
 
 // Github Client ID
 const CLIENT_ID = process.env.REACT_APP_GH_ID;
+// Google Login Variables
+const GOOGLE_CLIENT_ID = process.env.REACT_APP_GOOGLE_OAUTH_CLIENT_ID;
+const GOOGLE_REDIRECT_URI = process.env.REACT_APP_GOOGLE_OAUTH_REDIRECT_URL;
+const SCOPE = 'https://www.googleapis.com/auth/userinfo.profile https://www.googleapis.com/auth/userinfo.email';
+const RESPONSE_TYPE = 'code';
 
 // Login components
 export const GoogleLogin = () => {
-  const login = useGoogleLogin({
-    onSuccess: async response => {
-      try {
-        const google_response = await axios.get("https://www.googleapis.com/oauth2/v3/userinfo", 
-        {
-          headers: {
-            "Authorization": `Bearer ${response.access_token}` 
-          }
-        })
-
-        const google_data = {
-          email: google_response.data.email,
-          name: google_response.data.name
-        }
-
-        const login_response = axios.post('http://localhost:4000/app/account',
-        google_data
-        ).then(response => {
-          if (response.data.success === true) {
-            // Set that the user is now logged in
-            window.localStorage.setItem("isLoggedIn", "true")
-            window.localStorage.setItem("userName", google_data.name)
-
-            // Go back to the homepage
-            window.location.href = "/"
-          }
-
-          else if (response.data.success === false) {
-            // Go to the registration page
-            window.location.href = "/register"
-          }
-        });
-      }
-      catch (err) {
-        console.log(err);
-      }
-    }
-  });
-
+  function login() {
+    const authUrl = `https://accounts.google.com/o/oauth2/v2/auth?response_type=${RESPONSE_TYPE}&client_id=${GOOGLE_CLIENT_ID}&redirect_uri=${GOOGLE_REDIRECT_URI}&scope=${encodeURIComponent(SCOPE)}`;
+    window.location.href = authUrl;
+  } 
   return (
   <div>
     <button className="third-party-btn" onClick={() => login()}>

docker-compose.yaml

@@ -13,7 +13,16 @@ services:
   models:
     build: "src/models/"
     command: "echo Models Container Working"
-  routes:
+  google:
+    build: "src/routes/"
+    command: "npx ts-node google.ts"
+    ports:
+      - "5000:5000"
+      - "8081:8081"
+    env_file: "src/routes/.env"
+    depends_on:
+      - "models"
+  github:
     build: "src/routes/"
     command: "npx ts-node github.ts"
     ports:
@@ -31,4 +40,5 @@ services:
 # Requires server services to run before running client servers
     depends_on:
       # - "account"
-      - "routes"
+      - "google"
+      - "github"

src/routes/Dockerfile

@@ -3,13 +3,13 @@ FROM node:latest
 WORKDIR /routes
 
 # Copies files from the routes directory
-COPY ["github.ts", "routes.ts", "/routes"]
+COPY ["github.ts", "google.ts", "routes.ts", "/routes"]
 COPY ["package.json", "/routes"]
 
 # Runs npm install using bash shell
 RUN ["/bin/bash", "-c", "npm install"]
 
 # Port 4000 is the server port, 8080 is the cors-anywhere port
-EXPOSE 4000 8080
+EXPOSE 4000 5000 8080
 
-CMD ["npx", "ts-node", "github.ts"]
+CMD ["npx", "ts-node", "github.ts", "google.ts"]

src/routes/google.ts

@@ -0,0 +1,62 @@
+const express = require("express");
+const cors = require("cors");
+const axios = require("axios");
+const cors_proxy = require("cors-anywhere");
+const app = express();
+const router = require('./routes')
+
+const PORT = process.env.PORT || 5000;
+const PROXY_PORT = process.env.PROXY_PORT || 8081;
+const CLIENT_ID = process.env.GOOGLE_OAUTH_CLIENT_ID;
+const CLIENT_SECRET = process.env.GOOGLE_OAUTH_CLIENT_SECRET;
+const REDIRECT_URI = process.env.GOOGLE_OAUTH_REDIRECT_URL;
+
+app.use(cors());
+
+cors_proxy.createServer({
+  originWhitelist: [],            
+  requireHeader: [],
+  removeHeaders: ["cookie", "cookie2"]
+}).listen(PROXY_PORT, function() {
+  console.log(`For google: Running CORS Anywhere on port ${PROXY_PORT}`);
+});
+
+router.get("/auth/google/callback", async (req: any, res: any) => {
+  const code = req.query.code;
+
+  try {
+    const { data } = await axios({
+      url: `https://oauth2.googleapis.com/token`,
+      method: "post",
+      data: {
+        client_id: CLIENT_ID,
+        client_secret: CLIENT_SECRET,
+        redirect_uri: REDIRECT_URI,
+        grant_type: "authorization_code",
+        code,
+      },
+    });
+
+    const { access_token } = data;
+
+    const userInfo = await axios({
+      url: `https://www.googleapis.com/oauth2/v1/userinfo?alt=json`,
+      method: "get",
+      headers: {
+        Authorization: `Bearer ${access_token}`,
+      },
+    });
+
+    res.json(userInfo.data);
+  } catch (error) {
+    res.status(500).json({ error: "Failed to fetch user data" });
+  }
+});
+
+app.use("/", router);
+
+app.listen(PORT, () => {
+  console.log(`For google: Server is running on port ${PORT}`);
+});
+
+export {};

src/routes/package.json

@@ -5,7 +5,7 @@
   "main": "routes.ts",
   "scripts": {
     "test": "npx ts-node routes.ts",
-    "account": "npx ts-node github.ts"
+    "account": "npx ts-node github.ts google.ts"
   },
   "keywords": [],
   "author": "",