Login: Use prebuilt google oauth component

3 files changed, 26 insertions, 23 deletions

diff --git a/package-lock.json b/package-lock.json
index 8343b39..e7fcb0f 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,6 +8,7 @@
       "name": "fs-tracer-frontend",
       "version": "0.0.0",
       "dependencies": {
+        "@react-oauth/google": "^0.12.1",
         "@supabase/supabase-js": "^2.43.4",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
@@ -602,6 +603,15 @@
         "node": ">= 8"
       }
     },
+    "node_modules/@react-oauth/google": {
+      "version": "0.12.1",
+      "resolved": "https://registry.npmjs.org/@react-oauth/google/-/google-0.12.1.tgz",
+      "integrity": "sha512-qagsy22t+7UdkYAiT5ZhfM4StXi9PPNvw0zuwNmabrWyMKddczMtBIOARflbaIj+wHiQjnMAsZmzsUYuXeyoSg==",
+      "peerDependencies": {
+        "react": ">=16.8.0",
+        "react-dom": ">=16.8.0"
+      }
+    },
     "node_modules/@remix-run/router": {
       "version": "1.16.1",
       "license": "MIT",
diff --git a/package.json b/package.json
index 5d51815..8035e1c 100644
--- a/package.json
+++ b/package.json
@@ -12,6 +12,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@react-oauth/google": "^0.12.1",
     "@supabase/supabase-js": "^2.43.4",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
diff --git a/src/pages/Login.tsx b/src/pages/Login.tsx
index 2f104d1..887d5f3 100644
--- a/src/pages/Login.tsx
+++ b/src/pages/Login.tsx
@@ -1,18 +1,12 @@
 import { useEffect } from 'react'
 
 import { useNavigate } from "react-router-dom";
+import { GoogleLogin, GoogleOAuthProvider } from '@react-oauth/google';
 
 export default function Login(props: any) {
   const navigate = useNavigate();
 
   useEffect(() => {
-    (window as any).HandleSignInWithGoogle = async (response: any) => {
-      await props.supabase.auth.signInWithIdToken({
-        provider: 'google',
-        token: response.credential,
-      })
-    }
-
     props.supabase.auth.getSession().then(({ data: { session } }: any) => {
       props.setSession(session)
       console.log("LOGIN SESSION", session)
@@ -41,22 +35,20 @@ export default function Login(props: any) {
         <p>Log in to access your account! {JSON.stringify(props.session)}</p>
       </div>
 
-      <div id="g_id_onload"
-        data-client_id="952965459060-nrnrsdoq22mf646vfa72hk410pvdda5q.apps.googleusercontent.com"
-        data-context="signin"
-        data-ux_mode="popup"
-        data-callback="HandleSignInWithGoogle"
-        data-auto_prompt="false">
-      </div>
-
-      <div className="g_id_signin"
-        data-type="standard"
-        data-shape="pill"
-        data-theme="outline"
-        data-text="signin"
-        data-size="large"
-        data-logo_alignment="center">
-      </div>
+      <GoogleOAuthProvider clientId="952965459060-nrnrsdoq22mf646vfa72hk410pvdda5q.apps.googleusercontent.com">
+        <GoogleLogin
+          onSuccess={async (credentialResponse: any) => {
+            await props.supabase.auth.signInWithIdToken({
+              provider: 'google',
+              token: credentialResponse.credential,
+            })
+
+          }}
+          onError={() => {
+            console.log('Login Failed');
+          }}
+        />
+      </GoogleOAuthProvider>
     </>
   )
 }