From 7598699913708345ef86529a0db270055914493b Mon Sep 17 00:00:00 2001
From: ridima <ridima@gmail.com>
Date: Thu, 21 May 2026 20:53:08 +0530
Subject: [PATCH 1/3] added google authentication

---
 package.json              | 16 ++--------------
 src/components/Navbar.tsx | 12 +++++++++++-
 src/main.tsx              |  7 ++++++-
 src/pages/Login/Login.tsx | 19 +++++++++++++++++--
 4 files changed, 36 insertions(+), 18 deletions(-)

diff --git a/package.json b/package.json
index 43ad31cc..556188f5 100644
--- a/package.json
+++ b/package.json
@@ -3,7 +3,6 @@
   "private": true,
   "version": "0.0.0",
   "type": "module",
-
   "scripts": {
     "dev": "vite --host",
     "build": "vite build",
@@ -14,17 +13,18 @@
     "docker:dev": "docker compose --profile dev up --build",
     "docker:prod": "docker compose --profile prod up -d --build"
   },
-
   "dependencies": {
     "@emotion/react": "^11.11.3",
     "@emotion/styled": "^11.11.0",
     "@mui/icons-material": "^5.15.6",
     "@mui/material": "^5.15.6",
     "@primer/octicons-react": "^19.25.0",
+    "@react-oauth/google": "^0.13.5",
     "@vitejs/plugin-react": "^4.3.3",
     "axios": "^1.7.7",
     "express": "^5.2.1",
     "framer-motion": "^12.23.12",
+    "jwt-decode": "^4.0.0",
     "lucide-react": "^0.525.0",
     "mongoose": "^9.6.2",
     "octokit": "^4.0.2",
@@ -37,7 +37,6 @@
     "recharts": "^3.8.1",
     "tailwindcss": "^3.4.14"
   },
-
   "devDependencies": {
     "@eslint/js": "^9.13.0",
     "@testing-library/jest-dom": "^6.9.1",
@@ -49,33 +48,22 @@
     "@types/react-dom": "^18.3.7",
     "@types/react-redux": "^7.1.34",
     "@types/react-router-dom": "^5.3.3",
-
     "@vitejs/plugin-react-swc": "^3.5.0",
-
     "autoprefixer": "^10.4.20",
     "bcryptjs": "^3.0.3",
-
     "eslint": "^9.13.0",
     "eslint-plugin-react": "^7.37.2",
     "eslint-plugin-react-hooks": "^5.0.0",
     "eslint-plugin-react-refresh": "^0.4.14",
-
     "express-session": "^1.18.2",
-
     "globals": "^15.11.0",
-
     "jasmine": "^5.13.0",
     "jasmine-spec-reporter": "^7.0.0",
-
     "jsdom": "^29.1.1",
-
     "passport": "^0.7.0",
     "passport-local": "^1.0.0",
-
     "supertest": "^7.2.2",
-
     "typescript-eslint": "^8.59.3",
-
     "vite": "^5.4.10",
     "vitest": "^4.1.6"
   }
diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx
index fd5eac86..0643733c 100644
--- a/src/components/Navbar.tsx
+++ b/src/components/Navbar.tsx
@@ -52,10 +52,20 @@ const Navbar: React.FC = () => {
           <NavLink to="/contributors" className={navLinkStyles}>
             Contributors
           </NavLink>
-
+        {localStorage.getItem("token") ? (
+          <button
+            onClick={() => {
+              localStorage.removeItem("token");
+              window.location.reload();
+            }}
+            className={navLinkStyles({ isActive: false })}>
+            Logout
+          </button>
+        ) : (
           <NavLink to="/login" className={navLinkStyles}>
             Login
           </NavLink>
+        )}
 
           {/* Theme Toggle */}
           <button
diff --git a/src/main.tsx b/src/main.tsx
index 4c5b79dd..641541bf 100644
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -4,12 +4,17 @@ import App from "./App.tsx";
 import "./index.css";
 import { BrowserRouter } from "react-router-dom";
 import ThemeWrapper from "./context/ThemeContext.tsx";
-
+import {GoogleOAuthProvider} from  '@react-oauth/google';
+const CLIENT_ID = import.meta.env.VITE_CLIENT_ID;
+console.log("CLIENT_ID =", CLIENT_ID);
 createRoot(document.getElementById("root")!).render(
+  
   <StrictMode>
     <ThemeWrapper>
     <BrowserRouter>
+    <GoogleOAuthProvider clientId = {CLIENT_ID}>
       <App />
+      </GoogleOAuthProvider>
     </BrowserRouter>
     </ThemeWrapper>
   </StrictMode>
diff --git a/src/pages/Login/Login.tsx b/src/pages/Login/Login.tsx
index 92b7073e..4e8fcbb8 100644
--- a/src/pages/Login/Login.tsx
+++ b/src/pages/Login/Login.tsx
@@ -3,6 +3,8 @@ import axios from "axios";
 import { useNavigate, Link } from "react-router-dom";
 import { ThemeContext } from "../../context/ThemeContext";
 import type { ThemeContextType } from "../../context/ThemeContext";
+import {jwtDecode} from "jwt-decode";
+import { GoogleLogin} from "@react-oauth/google";
 
 const backendUrl = import.meta.env.VITE_BACKEND_URL;
 
@@ -20,6 +22,7 @@ const Login: React.FC = () => {
   const themeContext = useContext(ThemeContext) as ThemeContextType;
   const { mode } = themeContext;
 
+
   const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
     const { name, value } = e.target;
     setFormData({ ...formData, [name]: value });
@@ -106,6 +109,7 @@ const Login: React.FC = () => {
               />
             </div>
 
+
             <div className="relative">
               <input
                 type="password"
@@ -122,7 +126,6 @@ const Login: React.FC = () => {
                 }`}
               />
             </div>
-
             <button
               type="submit"
               disabled={isLoading}
@@ -131,7 +134,19 @@ const Login: React.FC = () => {
               {isLoading ? "Signing in..." : "Sign In"}
             </button>
           </form>
-
+          <GoogleLogin
+            onSuccess={(credentialResponse) => {
+              const token = credentialResponse.credential;
+              if (!token) {
+                return;
+              }
+              try {
+                localStorage.setItem("token", token);
+                navigate("/");
+              } catch (err) {
+              }
+            }}
+          />
           {/* Message */}
           {message && (
             <div className={`mt-6 p-4 rounded-2xl text-center text-sm font-medium ${

From 5da2689eb424e65125c47da801d2a1e4c42c9482 Mon Sep 17 00:00:00 2001
From: ridima <ridima@gmail.com>
Date: Thu, 21 May 2026 22:15:41 +0530
Subject: [PATCH 2/3] Finalized the design for "sign in with google" and added
 a GoogleAuth.md with instructions to how to set up the google client id.

---
 GoogleAuth.md             | 41 +++++++++++++++++++++++++++++++++++++++
 src/pages/Login/Login.tsx |  4 +++-
 2 files changed, 44 insertions(+), 1 deletion(-)
 create mode 100644 GoogleAuth.md

diff --git a/GoogleAuth.md b/GoogleAuth.md
new file mode 100644
index 00000000..550c42b5
--- /dev/null
+++ b/GoogleAuth.md
@@ -0,0 +1,41 @@
+Authentication (Google OAuth)
+
+This project uses Google OAuth 2.0 for user authentication via @react-oauth/google.
+
+```
+Setup Required
+1. Create Google OAuth Client
+    -> Go to Google Cloud Console:
+        (https://console.cloud.google.com/apis/credentials?utm_source=chatgpt.com)
+
+    -> Create OAuth Client ID
+    -> Choose Web application
+
+2. Configure Authorized Origins
+    ->Development
+        http://localhost:5173 (the port where your server is running i.e after running npm run dev)
+    ->Production
+        https://your-domain.com (the deployed url, only imp when you want the app to go live (not for your local computer))
+            if working on local computer
+                the other javascript origin will be http://localhost
+
+3. Configure Redirect URIs
+
+    ->Development
+        http://localhost:5173
+    -> Production
+        https://your-domain.com (not necessary if you are not gonna deploy the app)
+
+```
+
+Environment Variables
+Create a .env file in the root:
+
+VITE_CLIENT_ID=your_google_client_id
+
+⚠️ This is required for Google login to work. 
+
+``
+
+That's it! 
+Google authentication will now work all fine !
\ No newline at end of file
diff --git a/src/pages/Login/Login.tsx b/src/pages/Login/Login.tsx
index 4e8fcbb8..9260a377 100644
--- a/src/pages/Login/Login.tsx
+++ b/src/pages/Login/Login.tsx
@@ -134,7 +134,8 @@ const Login: React.FC = () => {
               {isLoading ? "Signing in..." : "Sign In"}
             </button>
           </form>
-          <GoogleLogin
+          <div className="mt-10 flex justify-center ">
+          <GoogleLogin theme="outline" size="medium" shape= "pill" logo_alignment="center" width="10px"
             onSuccess={(credentialResponse) => {
               const token = credentialResponse.credential;
               if (!token) {
@@ -147,6 +148,7 @@ const Login: React.FC = () => {
               }
             }}
           />
+          </div>
           {/* Message */}
           {message && (
             <div className={`mt-6 p-4 rounded-2xl text-center text-sm font-medium ${

From 29f2f3cf5e3ba86f8f45e191cc4adffa5a77c5bf Mon Sep 17 00:00:00 2001
From: ridima <ridima@gmail.com>
Date: Thu, 21 May 2026 22:32:37 +0530
Subject: [PATCH 3/3] fixed some minor bugs in the ui

---
 src/components/Navbar.tsx | 21 ++++++++++++++++++++-
 src/pages/Login/Login.tsx |  9 ++++++---
 2 files changed, 26 insertions(+), 4 deletions(-)

diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx
index 0643733c..b2738a15 100644
--- a/src/components/Navbar.tsx
+++ b/src/components/Navbar.tsx
@@ -140,7 +140,26 @@ const Navbar: React.FC = () => {
             >
               Contributors
             </NavLink>
-
+            {localStorage.getItem("token") ? (
+              <button
+                onClick={() => {
+                  localStorage.removeItem("token");
+                  closeMenu();
+                  window.location.reload(); 
+                }}
+                className={navLinkStyles({ isActive: false })}
+              >
+                Logout
+              </button>
+            ) : (
+              <NavLink
+                to="/login"
+                className={navLinkStyles}
+                onClick={closeMenu}
+              >
+                Login
+              </NavLink>
+            )}
             <NavLink
               to="/login"
               className={navLinkStyles}
diff --git a/src/pages/Login/Login.tsx b/src/pages/Login/Login.tsx
index 9260a377..3676edf6 100644
--- a/src/pages/Login/Login.tsx
+++ b/src/pages/Login/Login.tsx
@@ -136,15 +136,18 @@ const Login: React.FC = () => {
           </form>
           <div className="mt-10 flex justify-center ">
           <GoogleLogin theme="outline" size="medium" shape= "pill" logo_alignment="center" width="10px"
-            onSuccess={(credentialResponse) => {
+            onSuccess={async (credentialResponse) => {
               const token = credentialResponse.credential;
               if (!token) {
                 return;
               }
               try {
-                localStorage.setItem("token", token);
-                navigate("/");
+                const res = await axios.post(`${backendUrl}/api/auth/google`, { credential: token });
+              +  localStorage.setItem("token", res.data.token); 
+              +  navigate("/");
               } catch (err) {
+                setMessage("Login failed. Please try again.");
+
               }
             }}
           />