Merge pull request #26 from rezahedi/refactor-auth

Auth Using Google OAuth2.0

Author: rezahedi

.env.example

@@ -4,4 +4,5 @@
 # Don't share the key with anyone
 
 VITE_API_BASE_URL=YOUR_KEY
-VITE_GOOGLE_MAP_API_KEY=YOUR_GOOGLE-MAP_API_KEY
+VITE_GOOGLE_MAP_API_KEY=YOUR_GOOGLE-MAP_API_KEY
+VITE_GOOGLE_OAUTH_CLIENT_ID=YOUR_GOOGLE-OAUTH_CLIENT_ID

package-lock.json

@@ -23,6 +23,7 @@
     "@radix-ui/react-separator": "^1.1.7",
     "@radix-ui/react-slot": "^1.2.3",
     "@radix-ui/react-tooltip": "^1.2.7",
+    "@react-oauth/google": "^0.12.2",
     "@tailwindcss/vite": "^4.1.11",
     "@tanstack/react-query": "^5.90.3",
     "@vis.gl/react-google-maps": "^1.5.2",

package.json

@@ -0,0 +1,32 @@
+import React from "react";
+import { CodeResponse, useGoogleLogin } from "@react-oauth/google";
+import { Button } from "../ui/button";
+import { Google } from "@/ui/icons";
+
+const GoogleLoginButton = ({
+  onLogin,
+}: {
+  onLogin: (code: string) => void;
+}) => {
+  const handleLogin = useGoogleLogin({
+    flow: "auth-code",
+    onSuccess: async (response: CodeResponse) => {
+      onLogin(response.code);
+    },
+    onError: async (errorResponse) => {
+      console.log("Login Failed", errorResponse);
+    },
+  });
+
+  return (
+    <Button
+      onClick={handleLogin}
+      variant="ghost"
+      className="my-2 w-full p-5 font-normal text-lg bg-foreground text-background hover:bg-foreground hover:text-background active:scale-95"
+    >
+      <Google className="size-8" /> Sign in with Google
+    </Button>
+  );
+};
+
+export default GoogleLoginButton;

src/Components/Auth/GoogleLoginButton.tsx

@@ -1,11 +1,12 @@
 import React, { useState } from "react";
-import { Google } from "@/ui/icons";
 import { postData } from "@/util";
 import { useAuth } from "@/context/AuthContext";
 import { useAuthModal } from "@/context/AuthModalContext";
 import { User } from "@/types";
 import { Dialog, DialogContent } from "@/Components/ui/dialog";
 import { Button } from "@/Components/ui/button";
+import { GoogleOAuthProvider } from "@react-oauth/google";
+import GoogleLoginButton from "./GoogleLoginButton";
 
 const LoginPage = ({
   open,
@@ -78,8 +79,10 @@ const LoginPage = ({
     handleClose();
   };
 
-  const handleLogin = async () => {
-    if (!email || !password || !isValid) {
+  const handleLogin = async (
+    demoData: { email: string; password: string } | null = null,
+  ) => {
+    if (!demoData && (!email || !password || !isValid)) {
       setEmailError("Email is required");
       setPasswordError("Password is required");
       setIsValid(false);
@@ -89,7 +92,7 @@ const LoginPage = ({
     try {
       const userData: User = await postData(
         "auth/login",
-        { email, password },
+        demoData || { email, password },
         setErrorMessage,
       );
       if (userData) {
@@ -103,19 +106,42 @@ const LoginPage = ({
     }
   };
 
+  const handleGoogleLogin = async (code: string) => {
+    if (!code) return setErrorMessage("Code is required");
+
+    try {
+      const userData = await postData(
+        "auth/login/google",
+        { code },
+        setErrorMessage,
+      );
+      if (userData) {
+        await login(userData);
+        handleDialogClose();
+      }
+    } catch (err: unknown) {
+      let errorMessage = "";
+      if (err instanceof Error) errorMessage = err.message;
+      setErrorMessage(`Error sending data to server: ${errorMessage}`);
+    }
+  };
+
+  const handleDemoLogin = async (email: string, password: string) => {
+    await handleLogin({ email, password });
+  };
+
   return (
     <Dialog open={open} onOpenChange={handleDialogClose} modal>
       <DialogContent className="px-3 py-8 w-full max-w-full h-full sm:w-auto sm:max-w-4xl sm:h-auto rounded-none sm:rounded-lg items-center">
         <div className="flex gap-8 md:p-8 md:w-3xl">
           {/* Left Section */}
           <div className="flex-1 md:flex-1/2 px-2 py-3 space-y-2">
             <h5 className="flex justify-center text-3xl">Sign In</h5>
-            <Button
-              variant="ghost"
-              className="my-2 w-full p-5 font-normal text-lg bg-foreground text-background hover:bg-foreground hover:text-background active:scale-95"
+            <GoogleOAuthProvider
+              clientId={import.meta.env.VITE_GOOGLE_OAUTH_CLIENT_ID}
             >
-              <Google className="size-8" /> Sign in with Google
-            </Button>
+              <GoogleLoginButton onLogin={handleGoogleLogin} />
+            </GoogleOAuthProvider>
             <div className="my-4 text-foreground/60 text-center">OR</div>
             <label className="block">
               Email:
@@ -162,7 +188,7 @@ const LoginPage = ({
             <Button
               variant="default"
               className="w-full active:scale-95"
-              onClick={handleLogin}
+              onClick={() => handleLogin()}
             >
               Sign in
             </Button>
@@ -179,6 +205,27 @@ const LoginPage = ({
                 Sign up
               </Button>
             </p>
+            <p className="text-sm flex gap-1 items-center justify-center">
+              <span className="italic">Demo login:</span>
+              <Button
+                variant={"outline"}
+                className="hover:bg-primary"
+                onClick={() =>
+                  handleDemoLogin("[email protected]", "B5TTP76m2NSBbye")
+                }
+              >
+                John Doe
+              </Button>
+              <Button
+                variant={"outline"}
+                className="hover:bg-primary"
+                onClick={() =>
+                  handleDemoLogin("[email protected]", "B5TTP76m2NSBbye")
+                }
+              >
+                Sarah Smith
+              </Button>
+            </p>
           </div>
 
           {/* Right Section */}

src/Components/Auth/Login.tsx

@@ -1,11 +1,12 @@
 import React, { useState } from "react";
-import { Google } from "@/ui/icons";
 import { Dialog, DialogContent } from "@/Components/ui/dialog";
 import { Button } from "@/Components/ui/button";
 import { postData } from "@/util";
 import { useAuth } from "@/context/AuthContext";
 import { useAuthModal } from "@/context/AuthModalContext";
 import { User } from "@/types";
+import { GoogleOAuthProvider } from "@react-oauth/google";
+import GoogleLoginButton from "./GoogleLoginButton";
 
 const RegisterPage = ({
   open,
@@ -130,6 +131,26 @@ const RegisterPage = ({
     }
   };
 
+  const handleGoogleLogin = async (code: string) => {
+    if (!code) return setErrorMessage("Code is required");
+
+    try {
+      const userData = await postData(
+        "auth/login/google",
+        { code },
+        setErrorMessage,
+      );
+      if (userData) {
+        await login(userData);
+        handleDialogClose();
+      }
+    } catch (err: unknown) {
+      let errorMessage = "";
+      if (err instanceof Error) errorMessage = err.message;
+      setErrorMessage(`Error sending data to server: ${errorMessage}`);
+    }
+  };
+
   return (
     <Dialog open={open} onOpenChange={handleDialogClose} modal>
       <DialogContent className="px-3 py-8 w-full max-w-full h-full sm:w-auto sm:max-w-4xl sm:h-auto rounded-none sm:rounded-lg items-center">
@@ -138,12 +159,11 @@ const RegisterPage = ({
             <h5 className="flex justify-center text-3xl">
               Create Your Account
             </h5>
-            <Button
-              variant="ghost"
-              className="my-2 w-full p-5 font-normal text-lg bg-foreground text-background hover:bg-foreground hover:text-background active:scale-95"
+            <GoogleOAuthProvider
+              clientId={import.meta.env.VITE_GOOGLE_OAUTH_CLIENT_ID}
             >
-              <Google className="size-8" /> Sign up with Google
-            </Button>
+              <GoogleLoginButton onLogin={handleGoogleLogin} />
+            </GoogleOAuthProvider>
             <div className="my-4 text-foreground/60 text-center">OR</div>
             <label className="block">
               Name: