ft-google auth-#187419119

package.json

@@ -31,6 +31,7 @@
     "jest-environment-jsdom": "^29.7.0",
     "jest-fetch-mock": "^3.0.3",
     "jest-mock-extended": "^3.0.7",
+    "prop-types": "^15.8.1",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-dropzone": "^14.2.3",
@@ -49,6 +50,7 @@
   "devDependencies": {
     "@commitlint/cli": "^19.3.0",
     "@commitlint/config-conventional": "^19.2.2",
+    "@testing-library/dom": "^10.2.0",
     "@types/jest": "^29.5.12",
     "@types/node": "^20.14.8",
     "@types/react": "^18.2.66",

src/App.tsx

@@ -1,7 +1,6 @@
 import * as React from "react";
 import "react-toastify/dist/ReactToastify.css";
 import "./App.css";
-import "react-toastify/dist/ReactToastify.css";
 
 import AppRoutes from "./routes/AppRoutes";
 

src/__test__/registerUser.test.tsx

@@ -29,10 +29,11 @@ test("should render registration page correctly", async () => {
   expect(email).toBeInTheDocument();
   expect(password).toBeInTheDocument();
 
-  const googleButton = screen.getByRole("button", {
-    name: /Sign up with Google/i,
+  const linkElement = screen.getByRole("link", {
+    name: /Sign in with Google/i,
   });
-  expect(googleButton).toBeInTheDocument();
+  expect(linkElement).toBeDefined();
+  expect(linkElement).toBeInTheDocument();
 
   const loginLink = screen.getByRole("link", { name: /Login/i });
   expect(loginLink).toBeInTheDocument();

src/components/common/auth/GoogleAuthLink.tsx

@@ -0,0 +1,24 @@
+import PropTypes from "prop-types";
+import { FcGoogle } from "react-icons/fc";
+
+interface GoogleAuthLinkProps {
+  baseUrl?: string;
+}
+
+export const GoogleAuthLink = ({ baseUrl }: GoogleAuthLinkProps) => {
+  const finalBaseUrl = baseUrl || "";
+
+  return (
+    <a
+      href={`${finalBaseUrl}/users/auth/google`}
+      className="border flex items-center font-normal justify-center py-2.5 text-[16px] rounded-sm w-full"
+    >
+      <FcGoogle className="mr-3 text-2xl" />
+      Sign in with Google
+    </a>
+  );
+};
+
+GoogleAuthLink.propTypes = {
+  baseUrl: PropTypes.string,
+};

src/pages/Login.tsx

@@ -1,11 +1,11 @@
-import { FcGoogle } from "react-icons/fc";
 import { FaCircle } from "react-icons/fa";
 import { useForm, SubmitHandler } from "react-hook-form";
 import { yupResolver } from "@hookform/resolvers/yup";
 import { useSelector, useDispatch } from "react-redux";
 import { toast, ToastContainer } from "react-toastify";
 import { AxiosError } from "axios";
 import { useNavigate, Link } from "react-router-dom";
+import { useEffect } from "react";
 
 import loginSchema from "../schemas/loginSchema";
 import Button from "../components/common/auth/Button";
@@ -14,6 +14,7 @@ import { RootState } from "../redux/store";
 import { login } from "../redux/api/loginApiSlice";
 import sideImage from "../assets/sideImage.png";
 import LinkPages from "../components/common/auth/LinkPages";
+import { GoogleAuthLink } from "../components/common/auth/GoogleAuthLink";
 
 interface LoginFormInputs {
   email: string;
@@ -56,6 +57,20 @@ const Login = () => {
       console.log(err);
     }
   };
+  useEffect(() => {
+    const getTokenFromUrl = () => {
+      const urlSearchParams = new URLSearchParams(window.location.search);
+      const params = Object.fromEntries(urlSearchParams.entries());
+      const { token } = params;
+      return token;
+    };
+
+    const token = getTokenFromUrl();
+    if (token) {
+      localStorage.setItem("accessToken", token);
+      navigate("/");
+    }
+  });
 
   return (
     <div className="w-full max-h-[100vh] overflow-y-hidden flex">
@@ -91,7 +106,7 @@ const Login = () => {
           />
           <Link
             to="/password-reset-link"
-            className="text-blue-500 font-normal text-normal"
+            className="font-normal text-blue-500 text-normal"
           >
             Forgot Password?
           </Link>
@@ -102,13 +117,8 @@ const Login = () => {
               disabled={loading}
               data-testid="login-btn"
             />
-            <button
-              type="button"
-              className="border flex items-center font-normal justify-center py-2.5 text-[16px] rounded-sm"
-            >
-              <FcGoogle className="mr-3 text-2xl" />
-              Sign in with Google
-            </button>
+
+            <GoogleAuthLink baseUrl={process.env.VITE_BASE_URL} />
           </div>
         </form>
         <LinkPages

src/pages/RegisterUser.tsx

@@ -1,4 +1,3 @@
-import { FcGoogle } from "react-icons/fc";
 import { AxiosError } from "axios";
 import { useDispatch, useSelector } from "react-redux";
 import { toast, ToastContainer } from "react-toastify";
@@ -13,6 +12,7 @@ import { RegisterError, UserData } from "../../type";
 import { RootState } from "../redux/store";
 import InputField from "../components/common/auth/InputField";
 import LinkPages from "../components/common/auth/LinkPages";
+import { GoogleAuthLink } from "../components/common/auth/GoogleAuthLink";
 
 const RegisterUser = () => {
   const dispatch = useDispatch();
@@ -40,15 +40,15 @@ const RegisterUser = () => {
     }
   };
   return (
-    <div className="w-full max-h-screen overflow-y-hidden flex">
+    <div className="flex w-full max-h-screen overflow-y-hidden">
       <div className="hidden min-h-screen lg:flex w-[60%] xl:w-[60%] items-center">
         <img className="w-full" src={registerPhoto} alt="registerImage" />
       </div>
       <div className="w-[100%] md:w-[50%] xl:w-[40%] flex flex-col justify-center mt-[15vh] mx-auto px-16">
         <h1 className="text-black font-medium text-[36px]">
           Create an account
         </h1>
-        <h5 className="text-left pt-6">Enter your details below</h5>
+        <h5 className="pt-6 text-left">Enter your details below</h5>
         <form onSubmit={handleSubmit(onSubmit)}>
           <InputField
             name="name"
@@ -85,13 +85,7 @@ const RegisterUser = () => {
             >
               {loading ? "Loading..." : "Create Account"}
             </button>
-            <button
-              type="submit"
-              className="border flex items-center justify-center py-3 px-10 text-[13px] md:text-lg rounded-sm"
-            >
-              <FcGoogle className="mr-3" />
-              Sign up with Google
-            </button>
+            <GoogleAuthLink baseUrl={process.env.VITE_BASE_URL} />
           </div>
         </form>
         <LinkPages