fixed oauth flow on client side

luminosityleds · Jul 6, 2024 · 51d61c7 · 51d61c7
1 parent d8dea37
commit 51d61c7
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 40 deletions.
diff --git a/client/src/components/Login.tsx b/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>

diff --git 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 (
   <div>
     <button className="third-party-btn" onClick={() => login()}>