google login starter

package.json

@@ -3,6 +3,7 @@
   "version": "0.2.0",
   "private": true,
   "dependencies": {
+    "@react-oauth/google": "^0.11.0",
     "@reduxjs/toolkit": "^1.8.2",
     "@tailwindcss/line-clamp": "^0.3.1",
     "@testing-library/jest-dom": "^5.11.4",

src/components/AuthPages/Login/index.jsx

@@ -7,6 +7,8 @@ import WrenchBoard from "../../../assets/images/wrenchboard.png";
 import usersService from "../../../services/UsersService";
 import InputCom from "../../Helpers/Inputs/InputCom";
 import AuthLayout from "../AuthLayout";
+//import { GoogleOAuthProvider } from '@react-oauth/google';
+import { googleLogout, useGoogleLogin } from '@react-oauth/google';
 
 import { useDispatch } from "react-redux";
 import { updateUserDetails } from "../../../store/UserDetails";
@@ -171,9 +173,9 @@ export default function Login() {
                       )}
                     </button>
                   </div>
-                  <BrandBtn link="#" imgSrc={googleLogo} brand="Google" />
-                  <BrandBtn link="#" imgSrc={facebookLogo} brand="Facebook" />
-                  <BrandBtn link="#" imgSrc={appleLogo} brand="Apple" />
+                  <BrandBtn link="#"  imgSrc={googleLogo} brand="Google" />
+                  <BrandBtn link="#"   imgSrc={facebookLogo} brand="Facebook" />
+                  <BrandBtn link="#"    imgSrc={appleLogo} brand="Apple" />
                 </div>
                 {/* <div className="signup-area flex justify-center">
                 <p className="sm:text-lg text-sm text-thin-light-gray font-normal">
@@ -197,10 +199,30 @@ export default function Login() {
 }
 
 const BrandBtn = ({ link, imgSrc, brand }) => {
+
+  const doGoogle = async ()=>{
+    alert('start google');
+  }
+
+  //  onSuccess: (codeResponse) => setUser(codeResponse),
+
+  // const doGoogle = useGoogleLogin({
+  //   onSuccess: (codeResponse) =>  console.log('Login onSuccess:', codeResponse),
+  //   onError: (error) => console.log('Login Failed:', error)
+  // });
+
+  const doApple = async ()=>{
+    alert('start apple');
+  }
+
+  const doFacebook = async ()=>{
+    alert('start facebook');
+  }
+
   return (
     <div className="flex justify-center bottomMargin">
       <a
-        href={link}
+          onClick={doGoogle}
         className="w-full border border-light-purple dark:border-[#5356fb29]  rounded-[0.475rem] h-[48px] flex justify-center bg-[#FAFAFA] hover:bg-[#eff2f5] hover:text-[#7e8299] transition duration-300 dark:bg-[#11131F]  items-center font-medium cursor-pointer"
       >
         <img className="mr-3 h-6" src={imgSrc} alt="logo-icon(s)" />