connect oauth

client/App.jsx

@@ -1,13 +1,35 @@
 //importing structures
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import { Route, Routes } from 'react-router-dom';
 import MainPage from './containers/MainPage.jsx';
 import LandingPage from './containers/LandingPage.jsx';
+import jwt_decode from 'jwt-decode'
+
 //importing styling and images
 import './styles.scss';
 
 const App = () => {
   const [user, setUser] = useState({});
+  // const [authUser, setAuthUser] = useState({});
+
+  function handleCallbackResponse(response) {
+console.log(`Enconded JWT web token` + response.credential);
+const userObject = jwt_decode(response.credential);
+// setAuthUser(userObject)
+console.log(userObject)
+document.getElementById("signInDiv").hidden = true;
+  }
+  useEffect(()=> {
+    /* global google */
+    google.accounts.id.initialize({
+      client_id:"58745667257-bitarihg68uolj7v4rovo3fb999nu7sr.apps.googleusercontent.com",
+      callback: handleCallbackResponse
+    }),
+    google.accounts.id.renderButton(
+      document.getElementById("signInDiv"),
+      {theme:"outline", size:"large"} )
+  },
+  [])
 
   return (
     <div>
@@ -21,6 +43,9 @@ const App = () => {
           element={<MainPage user={user} setUser={setUser} />}
         />
       </Routes>
+      <div id="signInDiv"></div>
+      {/* {authUser && <div>
+        <img src={user.picture} /></div>} */}
     </div>
   );
 };

client/components/SignUpForm.jsx

@@ -1,8 +1,37 @@
 import React, { useState } from 'react';
 import axios from 'axios';
 import { useNavigate } from 'react-router-dom';
+// import useFetch from "../../hooks/useFetch"
+
+
+// https://developers.google.com/identity/gsi/web/reference/js-reference
 
 const SignUpForm = ({ showModal, setLogin, setSignup }) => {
+
+  // const { handleGoogle, loading, error } = useFetch(
+  //   "http://localhost:8080/"
+  // );
+
+  // useEffect(() => {
+  //   /* global google */
+  //   if (window.google) {
+  //     google.accounts.id.initialize({
+  //       client_id: process.env.REACT_APP_GOOGLE_CLIENT_ID,
+  //       callback: handleGoogle,
+  //     });
+
+  //     google.accounts.id.renderButton(document.getElementById("signUpDiv"), {
+  //       // type: "standard",
+  //       theme: "filled_black",
+  //       // size: "small",
+  //       text: "continue_with",
+  //       shape: "pill",
+  //     });
+
+  //     // google.accounts.id.prompt()
+  //   }
+  // }, [handleGoogle]);
+
   const navigate = useNavigate();
   const onSignUpSubmitHandler = async (e) => {
     e.preventDefault();
@@ -64,6 +93,13 @@ const SignUpForm = ({ showModal, setLogin, setSignup }) => {
         </label>
         <button type="submit">REGISTER</button>
       </form>
+
+      {/* {error && <p style={{ color: "red" }}>{error}</p>}
+        {loading ? (
+          <div>Loading....</div>
+        ) : (
+          <div id="signUpDiv" data-text="signup_with"></div>
+        )} */}
     </div>
   );
 };