From d8dea371fcbec882b09098f0f5c1cebf8e42b94b Mon Sep 17 00:00:00 2001 From: Erika Ledesma <44066676+erikajledesma@users.noreply.github.com> Date: Sat, 6 Jul 2024 08:16:51 +0000 Subject: [PATCH 1/4] added file for google login --- src/routes/google.ts | 62 ++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 62 insertions(+) create mode 100644 src/routes/google.ts diff --git a/src/routes/google.ts b/src/routes/google.ts new file mode 100644 index 00000000..4c7f001c --- /dev/null +++ b/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 {}; \ No newline at end of file From 51d61c76adfffaf69b914c8c387219b17b99bbab Mon Sep 17 00:00:00 2001 From: Erika Ledesma <44066676+erikajledesma@users.noreply.github.com> Date: Sat, 6 Jul 2024 08:21:16 +0000 Subject: [PATCH 2/4] fixed oauth flow on client side --- client/src/components/Login.tsx | 2 +- client/src/components/ThirdParty.tsx | 49 ++++++---------------------- 2 files changed, 11 insertions(+), 40 deletions(-) diff --git a/client/src/components/Login.tsx b/client/src/components/Login.tsx index 7b064840..a615c0cc 100644 --- a/client/src/components/Login.tsx +++ b/client/src/components/Login.tsx @@ -11,7 +11,7 @@ export const Login: FC = (props: Users) => {

Login

{/* Start of third party login buttons */}
- +
diff --git a/client/src/components/ThirdParty.tsx b/client/src/components/ThirdParty.tsx index 1776cbe0..71b8afef 100644 --- a/client/src/components/ThirdParty.tsx +++ b/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 (