changed

Author: aditiraj2006

backend/models/User.js

@@ -2,22 +2,26 @@ const mongoose = require("mongoose");
 const bcrypt = require("bcryptjs");
 
 const UserSchema = new mongoose.Schema({
-    username: {
-      type: String,
-      required: true,
-      unique: true,
-    },
-    email: {
-      type: String,
-      required: true,
-      unique: true,
-    },
-    password: {
-      type: String,
-      required: true,
-    },
+  username: {
+    type: String,
+    required: true,
+  },
+  email: {
+    type: String,
+    required: true,
+    unique: true,
+  },
+  password: {
+    type: String,
+  },
+  googleId: {
+    type: String,
+    unique: true,
+    sparse: true,
+  },
 });
 
+
 UserSchema.pre('save', async function (next) {
 
     if (!this.isModified('password'))

backend/routes/auth.js

@@ -27,6 +27,28 @@ router.post("/login", passport.authenticate('local'), (req, res) => {
     res.status(200).json( { message: 'Login successful', user: req.user } );
 });
 
+router.post("/google-login", async (req, res) => {
+  try {
+    const { email, name, googleId } = req.body;
+
+    let user = await User.findOne({ email });
+
+    if (!user) {
+      user = new User({
+        username: name,
+        email,
+        googleId,
+      });
+      await user.save();
+    }
+
+    return res.json({ message: "Login successful", user });
+  } catch (error) {
+    console.error("Google login error:", error);
+    return res.status(500).json({ message: "Server error" });
+  }
+});
+
 // Logout route
 router.get("/logout", (req, res) => {
 

package.json

@@ -21,6 +21,7 @@
     "axios": "^1.7.7",
     "firebase": "^12.1.0",
     "framer-motion": "^12.23.12",
+    "i": "^0.3.7",
     "lucide-react": "^0.525.0",
     "octokit": "^4.0.2",
     "postcss": "^8.4.47",

src/App.tsx

@@ -1,3 +1,7 @@
+import { useEffect } from "react";
+import { getRedirectResult, GoogleAuthProvider } from "firebase/auth";
+import { auth } from "./hooks/firebase";
+import axios from "axios";
 import Navbar from "./components/Navbar";
 import Footer from "./components/Footer";
 import ScrollProgressBar from "./components/ScrollProgressBar";
@@ -6,6 +10,33 @@ import Router from "./Routes/Router";
 import ThemeWrapper from "./context/ThemeContext";
 
 function App() {
+  useEffect(() => {
+    const handleGoogleRedirect = async () => {
+      try {
+        const result = await getRedirectResult(auth);
+        if (result && result.user) {
+          // Get user info from Firebase
+          const email = result.user.email;
+          const name = result.user.displayName;
+          const googleId = result.user.uid;
+
+          // Send user info to backend
+          await axios.post("/api/auth/google-login", {
+            email,
+            name,
+            googleId,
+          });
+
+          // You can now set user state, navigate, etc.
+        }
+      } catch (error) {
+        console.error("Google redirect error:", error);
+      }
+    };
+
+    handleGoogleRedirect();
+  }, []);
+
   return (
     <ThemeWrapper>
       <div className="relative flex flex-col min-h-screen">

src/components/GoogleSignIn.tsx

@@ -1,13 +1,14 @@
-import React, { useState } from 'react';
-import { signInWithGoogle } from '../hooks/firebase';
+import { signInWithGoogle } from "../hooks/firebase";
+import React, { useState } from "react";
 
 const GoogleSignIn = () => {
   const [isLoading, setIsLoading] = useState(false);
 
   const handleSignIn = async () => {
     setIsLoading(true);
     try {
-      await signInWithGoogle();
+      await signInWithGoogle(); // No result returned for redirect flow
+      // After redirect, handle user in App.tsx using getRedirectResult
     } catch (error) {
       console.error("Error signing in with Google", error);
     } finally {
@@ -17,14 +18,11 @@ const GoogleSignIn = () => {
 
   return (
     <button
-      type="button"
-      disabled={isLoading}
       onClick={handleSignIn}
-      className="w-full bg-gradient-to-r from-purple-600 via-pink-600 to-indigo-600 text-white py-4 px-6 rounded-2xl font-semibold focus:ring-4 focus:ring-purple-500/50 transition-all duration-300 disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center gap-2"
+      disabled={isLoading}
+      className="w-full bg-white text-black font-semibold py-4 rounded-2xl hover:bg-gray-100"
     >
-      {/* Optional: Add a Google icon */}
-      <img src="https://www.svgrepo.com/show/475656/google-color.svg" alt="Google" className="w-6 h-6" />
-      {isLoading ? "Signing in with Google..." : "Sign in with Google"}
+      {isLoading ? "Signing in..." : "Sign in with Google"}
     </button>
   );
 };

src/firebase.ts

@@ -2,12 +2,12 @@ import { initializeApp } from 'firebase/app';
 import { getAuth, GoogleAuthProvider, signInWithRedirect, setPersistence, browserLocalPersistence } from 'firebase/auth';
 
 const firebaseConfig = {
-  apiKey: "AIzaSyDT2h_X2bSMxjsiHilQQx9ryPwC3654lt0",
-  authDomain: "github-tracker-f39ac.firebaseapp.com",
-  projectId: "github-tracker-f39ac",
-  storageBucket: "github-tracker-f39ac.firebasestorage.app",
-  messagingSenderId: "562897055831",
-  appId: "1:562897055831:web:8f63882abd2f9e13b8f312"
+  apiKey: import.meta.env.VITE_FIREBASE_API_KEY,
+  authDomain: import.meta.env.VITE_FIREBASE_AUTH_DOMAIN,
+  projectId: import.meta.env.VITE_FIREBASE_PROJECT_ID,
+  storageBucket: import.meta.env.VITE_FIREBASE_STORAGE_BUCKET,
+  messagingSenderId: import.meta.env.VITE_FIREBASE_MESSAGING_SENDER_ID,
+  appId: import.meta.env.VITE_FIREBASE_APP_ID
 };
 
 const app = initializeApp(firebaseConfig);

src/hooks/firebase.ts

@@ -3,6 +3,9 @@ import axios from "axios";
 import { useNavigate, Link } from "react-router-dom";
 import { ThemeContext } from "../../context/ThemeContext";
 import type { ThemeContextType } from "../../context/ThemeContext";
+import GoogleSignIn from "../../components/GoogleSignIn";
+
+
 
 const backendUrl = import.meta.env.VITE_BACKEND_URL;
 
@@ -126,8 +129,14 @@ const Login: React.FC = () => {
             >
               {isLoading ? "Signing in..." : "Sign In"}
             </button>
+            {/* Google Sign-In Button */}
+            <div className="mt-4">
+                <GoogleSignIn />
+            </div>
+
           </form>
 
+
           {/* Message */}
           {message && (
             <div className={`mt-6 p-4 rounded-2xl text-center text-sm font-medium ${

src/pages/Login/Login.tsx

@@ -2,6 +2,8 @@ import React, { useState, ChangeEvent, FormEvent } from "react";
 import axios from "axios";
 import { useNavigate ,Link } from "react-router-dom";
 import { User, Mail, Lock } from "lucide-react";
+import GoogleSignIn from "../../components/GoogleSignIn";
+
 const backendUrl = import.meta.env.VITE_BACKEND_URL;
 interface SignUpFormData {
   username: string;
@@ -141,7 +143,12 @@ const navigate = useNavigate();
             }`}>
               {message}
             </div>
+            
           )}
+          <div className="mt-6">
+             <GoogleSignIn />
+          </div>
+
 
           <div className="text-center mt-8">
             <p className="text-purple-200">