From 53ede56a5123afaafce9fac0228d83f367e992f6 Mon Sep 17 00:00:00 2001 From: Aditi Raj Date: Fri, 1 Aug 2025 13:36:57 +0530 Subject: [PATCH 1/4] Made Navbar to be mobile friendly --- src/components/Navbar.tsx | 8 ++++---- vite.config.ts | 4 ++++ 2 files changed, 8 insertions(+), 4 deletions(-) diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx index 6b5c903..efe19ff 100644 --- a/src/components/Navbar.tsx +++ b/src/components/Navbar.tsx @@ -68,17 +68,17 @@ const Navbar: React.FC = () => { className="relative w-8 h-8 flex flex-col space-y-[5px] items-center group focus:outline-none" > @@ -88,7 +88,7 @@ const Navbar: React.FC = () => { {/* Mobile Links */} {isOpen && ( -
+
Date: Sun, 10 Aug 2025 13:16:00 +0530 Subject: [PATCH 2/4] changes google login --- package.json | 2 ++ src/components/GoogleSignIn.tsx | 32 ++++++++++++++++++++++++++++++++ src/firebase.ts | 29 +++++++++++++++++++++++++++++ src/hooks/firebase.ts | 27 +++++++++++++++++++++++++++ 4 files changed, 90 insertions(+) create mode 100644 src/components/GoogleSignIn.tsx create mode 100644 src/firebase.ts create mode 100644 src/hooks/firebase.ts diff --git a/package.json b/package.json index cf740fe..0ddae9c 100644 --- a/package.json +++ b/package.json @@ -19,11 +19,13 @@ "@primer/octicons-react": "^19.15.5", "@vitejs/plugin-react": "^4.3.3", "axios": "^1.7.7", + "firebase": "^12.1.0", "lucide-react": "^0.525.0", "octokit": "^4.0.2", "postcss": "^8.4.47", "react": "^18.3.1", "react-dom": "^18.3.1", + "react-firebase-hooks": "^5.1.1", "react-hot-toast": "^2.4.1", "react-icons": "^5.3.0", "react-router-dom": "^6.28.0", diff --git a/src/components/GoogleSignIn.tsx b/src/components/GoogleSignIn.tsx new file mode 100644 index 0000000..a6d9368 --- /dev/null +++ b/src/components/GoogleSignIn.tsx @@ -0,0 +1,32 @@ +import React, { useState } from 'react'; +import { signInWithGoogle } from '../hooks/firebase'; + +const GoogleSignIn = () => { + const [isLoading, setIsLoading] = useState(false); + + const handleSignIn = async () => { + setIsLoading(true); + try { + await signInWithGoogle(); + } catch (error) { + console.error("Error signing in with Google", error); + } finally { + setIsLoading(false); + } + }; + + return ( + + ); +}; + +export default GoogleSignIn; \ No newline at end of file diff --git a/src/firebase.ts b/src/firebase.ts new file mode 100644 index 0000000..f56b871 --- /dev/null +++ b/src/firebase.ts @@ -0,0 +1,29 @@ +import { initializeApp } from 'firebase/app'; +import { getAuth, GoogleAuthProvider, signInWithPopup } from 'firebase/auth'; + +// Your web app's Firebase configuration +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" +}; + +// Initialize Firebase +const app = initializeApp(firebaseConfig); + +// Initialize Firebase Authentication and get a reference to the service +const auth = getAuth(app); +const googleAuthProvider = new GoogleAuthProvider(); + +const signInWithGoogle = async () => { + try { + await signInWithPopup(auth, googleAuthProvider); + } catch (error) { + console.error("Error signing in with Google", error); + } +}; + +export { auth, signInWithGoogle }; \ No newline at end of file diff --git a/src/hooks/firebase.ts b/src/hooks/firebase.ts new file mode 100644 index 0000000..61afe5b --- /dev/null +++ b/src/hooks/firebase.ts @@ -0,0 +1,27 @@ +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" +}; + +const app = initializeApp(firebaseConfig); + +const auth = getAuth(app); +const googleAuthProvider = new GoogleAuthProvider(); + +const signInWithGoogle = async () => { + try { + await setPersistence(auth, browserLocalPersistence); // Set persistence + await signInWithRedirect(auth, googleAuthProvider); + } catch (error: any) { + console.error("Error signing in with Google", error); + } +}; + +export { auth, signInWithGoogle }; \ No newline at end of file From dd28dc3d4ba1ca682bf8152251a88f23c8c8b2f0 Mon Sep 17 00:00:00 2001 From: Aditi Date: Sun, 10 Aug 2025 16:15:50 +0530 Subject: [PATCH 3/4] changed --- backend/models/User.js | 32 ++++++++++++++++++-------------- backend/routes/auth.js | 22 ++++++++++++++++++++++ package.json | 1 + src/App.tsx | 31 +++++++++++++++++++++++++++++++ src/components/GoogleSignIn.tsx | 16 +++++++--------- src/firebase.ts | 29 ----------------------------- src/hooks/firebase.ts | 12 ++++++------ src/pages/Login/Login.tsx | 9 +++++++++ src/pages/Signup/Signup.tsx | 7 +++++++ 9 files changed, 101 insertions(+), 58 deletions(-) delete mode 100644 src/firebase.ts diff --git a/backend/models/User.js b/backend/models/User.js index 779294f..22d6acc 100644 --- a/backend/models/User.js +++ b/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')) diff --git a/backend/routes/auth.js b/backend/routes/auth.js index e26c7a9..e4d7c87 100644 --- a/backend/routes/auth.js +++ b/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) => { diff --git a/package.json b/package.json index fb591ca..96e5b0f 100644 --- a/package.json +++ b/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", diff --git a/src/App.tsx b/src/App.tsx index b00eba8..c31a0f8 100644 --- a/src/App.tsx +++ b/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 (
diff --git a/src/components/GoogleSignIn.tsx b/src/components/GoogleSignIn.tsx index a6d9368..3b3183f 100644 --- a/src/components/GoogleSignIn.tsx +++ b/src/components/GoogleSignIn.tsx @@ -1,5 +1,5 @@ -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); @@ -7,7 +7,8 @@ const GoogleSignIn = () => { 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 ( ); }; diff --git a/src/firebase.ts b/src/firebase.ts deleted file mode 100644 index f56b871..0000000 --- a/src/firebase.ts +++ /dev/null @@ -1,29 +0,0 @@ -import { initializeApp } from 'firebase/app'; -import { getAuth, GoogleAuthProvider, signInWithPopup } from 'firebase/auth'; - -// Your web app's Firebase configuration -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" -}; - -// Initialize Firebase -const app = initializeApp(firebaseConfig); - -// Initialize Firebase Authentication and get a reference to the service -const auth = getAuth(app); -const googleAuthProvider = new GoogleAuthProvider(); - -const signInWithGoogle = async () => { - try { - await signInWithPopup(auth, googleAuthProvider); - } catch (error) { - console.error("Error signing in with Google", error); - } -}; - -export { auth, signInWithGoogle }; \ No newline at end of file diff --git a/src/hooks/firebase.ts b/src/hooks/firebase.ts index 61afe5b..566129a 100644 --- a/src/hooks/firebase.ts +++ b/src/hooks/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); diff --git a/src/pages/Login/Login.tsx b/src/pages/Login/Login.tsx index d6f21a7..8016a52 100644 --- a/src/pages/Login/Login.tsx +++ b/src/pages/Login/Login.tsx @@ -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"} + {/* Google Sign-In Button */} +
+ +
+ + {/* Message */} {message && (
{message}
+ )} +
+ +
+

From 06466adab7548ebbe58ed41366fb40d7e528dddc Mon Sep 17 00:00:00 2001 From: Aditi Raj Date: Tue, 12 Aug 2025 15:04:22 +0000 Subject: [PATCH 4/4] added google login with ui --- backend/routes/auth.js | 4 ++++ src/App.tsx | 32 +-------------------------- src/components/GoogleSignIn.tsx | 38 +++++++++++++++++++++++++++++---- src/hooks/firebase.ts | 10 +++------ src/pages/Login/Login.tsx | 13 +++++++---- src/pages/Signup/Signup.tsx | 16 ++++++++++---- 6 files changed, 63 insertions(+), 50 deletions(-) diff --git a/backend/routes/auth.js b/backend/routes/auth.js index e4d7c87..267c199 100644 --- a/backend/routes/auth.js +++ b/backend/routes/auth.js @@ -40,6 +40,9 @@ router.post("/google-login", async (req, res) => { googleId, }); await user.save(); + console.log("New Google user saved:", user); + } else { + console.log("Google user found:", user); } return res.json({ message: "Login successful", user }); @@ -62,3 +65,4 @@ router.get("/logout", (req, res) => { }); module.exports = router; + diff --git a/src/App.tsx b/src/App.tsx index c31a0f8..8696045 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,7 +1,4 @@ -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"; @@ -10,33 +7,6 @@ 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 (

diff --git a/src/components/GoogleSignIn.tsx b/src/components/GoogleSignIn.tsx index 3b3183f..4dabaf2 100644 --- a/src/components/GoogleSignIn.tsx +++ b/src/components/GoogleSignIn.tsx @@ -1,16 +1,46 @@ import { signInWithGoogle } from "../hooks/firebase"; import React, { useState } from "react"; +import axios from "axios"; +import { useNavigate } from "react-router-dom"; + +const backendUrl = import.meta.env.VITE_BACKEND_URL; const GoogleSignIn = () => { const [isLoading, setIsLoading] = useState(false); + const navigate = useNavigate(); const handleSignIn = async () => { setIsLoading(true); try { - await signInWithGoogle(); // No result returned for redirect flow - // After redirect, handle user in App.tsx using getRedirectResult + const userCredential = await signInWithGoogle(); + console.log("Google userCredential:", userCredential); + + if (userCredential && userCredential.user) { + const idToken = await userCredential.user.getIdToken(); + const { email, displayName, uid } = userCredential.user; + console.log("Google user info:", { email, displayName, uid }); + + const response = await axios.post( + `${backendUrl}/api/auth/google-login`, + { + email, + name: displayName, + googleId: uid, + } + ); + console.log("Backend response:", response.data); + + if (response.data.message === "Login successful") { + navigate("/"); + } else { + alert(response.data.message || "Google login failed"); + } + } else { + alert("No user returned from Google sign-in"); + } } catch (error) { - console.error("Error signing in with Google", error); + console.error("Google sign-in error:", error); + alert("Google sign-in failed"); } finally { setIsLoading(false); } @@ -20,7 +50,7 @@ const GoogleSignIn = () => { diff --git a/src/hooks/firebase.ts b/src/hooks/firebase.ts index 566129a..c1f1cec 100644 --- a/src/hooks/firebase.ts +++ b/src/hooks/firebase.ts @@ -1,5 +1,5 @@ import { initializeApp } from 'firebase/app'; -import { getAuth, GoogleAuthProvider, signInWithRedirect, setPersistence, browserLocalPersistence } from 'firebase/auth'; +import { getAuth, GoogleAuthProvider, signInWithPopup, setPersistence, browserLocalPersistence } from 'firebase/auth'; const firebaseConfig = { apiKey: import.meta.env.VITE_FIREBASE_API_KEY, @@ -16,12 +16,8 @@ const auth = getAuth(app); const googleAuthProvider = new GoogleAuthProvider(); const signInWithGoogle = async () => { - try { - await setPersistence(auth, browserLocalPersistence); // Set persistence - await signInWithRedirect(auth, googleAuthProvider); - } catch (error: any) { - console.error("Error signing in with Google", error); - } + await setPersistence(auth, browserLocalPersistence); + return await signInWithPopup(auth, googleAuthProvider); }; export { auth, signInWithGoogle }; \ No newline at end of file diff --git a/src/pages/Login/Login.tsx b/src/pages/Login/Login.tsx index 8016a52..4bdebdb 100644 --- a/src/pages/Login/Login.tsx +++ b/src/pages/Login/Login.tsx @@ -125,15 +125,20 @@ const Login: React.FC = () => { - {/* Google Sign-In Button */} -
- +
+
+ or +
+ {/* Google Sign-In Button */} +
+ +
diff --git a/src/pages/Signup/Signup.tsx b/src/pages/Signup/Signup.tsx index ea53c79..708111d 100644 --- a/src/pages/Signup/Signup.tsx +++ b/src/pages/Signup/Signup.tsx @@ -133,6 +133,18 @@ const navigate = useNavigate(); > Create Account + + {/* OR separator */} +
+
+ or +
+
+ + {/* Google Sign-In Button */} +
+ +
{message && ( @@ -145,10 +157,6 @@ const navigate = useNavigate();
)} -
- -
-