Co-authored-by: Cooperzilla <[email protected]>

Author: SamGu-NRX

frontend/package.json

@@ -15,6 +15,7 @@
   },
   "dependencies": {
     "@emailjs/browser": "^4.3.3",
+    "@react-oauth/google": "^0.12.1",
     "@tanstack/react-router": "^1.40.0",
     "aos": "^2.3.4",
     "axios": "^1.7.2",
@@ -26,6 +27,7 @@
     "prop-types": "^15.8.1",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
+    "react-google-button": "^0.8.0",
     "react-helmet-async": "^2.0.5",
     "sonner": "^1.5.0"
   },

frontend/pnpm-lock.yaml

@@ -0,0 +1,38 @@
+import { useEffect } from 'react';
+import './styles.css'; 
+
+const GoogleSignInButton = ({ clientId, onSuccess, onFailure }) => {
+  useEffect(() => {
+    const startApp = () => {
+      gapi.load('auth2', () => {
+        const auth2 = gapi.auth2.init({
+          client_id: clientId,
+          cookiepolicy: 'single_host_origin',
+        });
+        attachSignin(document.getElementById('googleSignInButton'));
+      });
+    };
+
+    const attachSignin = (element) => {
+      auth2.attachClickHandler(element, {},
+        (googleUser) => {
+          onSuccess(googleUser);
+        }, (error) => {
+          onFailure(error);
+        });
+    };
+
+    startApp();
+  }, [clientId, onSuccess, onFailure]);
+
+  return (
+    <div className="flex flex-col items-center">
+      <div id="googleSignInButton" className="custom-google-button">
+        <div className="icon"></div>
+        <span className="buttonText">Google</span>
+      </div>
+    </div>
+  );
+};
+
+export default GoogleSignInButton;

frontend/src/components/GoogleSignInButton/SignInButton.jsx

@@ -0,0 +1,20 @@
+@import 'https://fonts.googleapis.com/css?family=Roboto';
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+.custom-google-button {
+  @apply inline-block bg-white text-gray-700 w-48 rounded-lg border border-gray-300 shadow-md;
+  @apply transition-transform transform hover:scale-105 duration-300;
+  @apply flex items-center justify-center cursor-pointer select-none;
+}
+
+.custom-google-button .icon {
+  background: url('path-to-your-google-icon.png') no-repeat center center / contain;
+  @apply w-10 h-10;
+}
+
+.custom-google-button .buttonText {
+  @apply font-bold text-sm;
+  font-family: 'Roboto', sans-serif;
+}

frontend/src/components/GoogleSignInButton/styles.css

@@ -1,10 +1,23 @@
 import { useState } from 'react';
 import { auth, signInWithGoogle, signInWithEmailAndPassword } from '../../firebaseConfig';
+// import { GoogleButton } from 'react-google-button'
+import { UserAuth } from '../context/AuthContext';
 
-const Login = () => {
+const SignIn = () => {
   const [email, setEmail] = useState('');
   const [password, setPassword] = useState('');
 
+  const { googleSignIn } = UserAuth();
+    
+    const handleGoogleSignIn = async () => {
+        try {
+            const { user } = await googleSignIn();
+            console.log(user, "Logged in with Google");
+        } catch (error) {
+            console.log(error);
+        }
+    }
+
   const handleLogin = async () => {
     try {
       await signInWithEmailAndPassword(auth, email, password);
@@ -30,10 +43,10 @@ const Login = () => {
         placeholder="Password"
       />
       <button onClick={handleLogin}>Login</button>
-      <button onClick={signInWithGoogle}>Login with Google</button>
+      <button onClick={handleGoogleSignIn}>Login with Google</button>
       <button onClick={() => alert('Implement Discord login')}>Login with Discord</button>
     </div>
   );
 };
 
-export default Login;
+export default SignIn;

frontend/src/components/Login/Login.jsx frontend/src/components/Login/SignIn.jsx

@@ -0,0 +1,45 @@
+import { 
+    GoogleAuthProvider,
+    signInWithPopup,
+    signInWithRedirect,
+    signOut,
+    onAuthStateChanged
+ } from "firebase/auth";
+
+import { useState, useContext, createContext, useEffect } from "react";
+import { auth } from "../firebaseConfig";
+
+const AuthContext = createContext();
+
+export const AuthContextProvider = ({ children }) => {
+    const [user, setUser] = useState({});
+
+    const googleSignIn = () => {
+        const provider = new GoogleAuthProvider();
+        signInWithPopup(auth, provider);
+    }
+
+    useEffect(() => {
+        const unsubscribe = onAuthStateChanged(auth, (currentUser) => {
+            setUser(currentUser);
+            console.log("User:", currentUser);
+        });
+        return () => {
+            unsubscribe();
+        };
+    }, []);
+
+    // const logOut = () => {
+    //     signOut(); 
+    // }
+
+    return (
+        <AuthContext.Provider value={{ googleSignIn }}>
+            {children}
+        </AuthContext.Provider>
+    );
+};
+
+export const UserAuth = () => {
+    return useContext(AuthContext);
+}

frontend/src/context/AuthContext.jsx

@@ -2,17 +2,17 @@
 import { initializeApp } from "firebase/app";
 import { getAnalytics } from "firebase/analytics";
 import {
-    getAuth,
-    GoogleAuthProvider,
-    signInWithPopup,
-    signInWithEmailAndPassword,
-    createUserWithEmailAndPassword,
-    sendPasswordResetEmail,
-    updatePassword,
-    linkWithPopup
-  } from 'firebase/auth';
+  getAuth,
+  GoogleAuthProvider,
+  signInWithPopup,
+  signInWithEmailAndPassword as firebaseSignInWithEmailAndPassword,
+  createUserWithEmailAndPassword,
+  sendPasswordResetEmail,
+  updatePassword,
+  linkWithPopup
+} 
+from 'firebase/auth';
 
-import { getAuth, GoogleAuthProvider, signInWithPopup, signInWithEmailAndPassword, createUserWithEmailAndPassword, sendPasswordResetEmail, updatePassword, linkWithPopup } from 'firebase/auth';
 import { getFirestore, doc, setDoc, getDoc } from 'firebase/firestore';
 
 
@@ -22,6 +22,15 @@ import { getFirestore, doc, setDoc, getDoc } from 'firebase/firestore';
 // Your web app's Firebase configuration
 // For Firebase JS SDK v7.20.0 and later, measurementId is optional
 
+console.log(import.meta.env.VITE_FIREBASE_API_KEY);
+console.log(import.meta.env.VITE_FIREBASE_AUTH_DOMAIN);
+console.log(import.meta.env.VITE_FIREBASE_PROJECT_ID);
+console.log(import.meta.env.VITE_FIREBASE_STORAGE_BUCKET);
+console.log(import.meta.env.VITE_FIREBASE_MESSAGING_SENDER_ID);
+console.log(import.meta.env.VITE_FIREBASE_APP_ID);
+
+// change to env.local?
+
 const firebaseConfig = {
   apiKey: import.meta.env.VITE_FIREBASE_API_KEY,
   authDomain: import.meta.env.VITE_FIREBASE_AUTH_DOMAIN,
@@ -55,9 +64,9 @@ const registerWithEmail = async (email, password) => {
 };
 
 const signInWithEmailAndPassword = async (email, password) => {
-    await signInWithEmailAndPassword(auth, email, password);
+  await firebaseSignInWithEmailAndPassword(auth, email, password);
 };
-  
+
 const sendPasswordReset = async (email) => {
     await sendPasswordResetEmail(auth, email);
 };

frontend/src/firebaseConfig.js

@@ -5,6 +5,7 @@ import { routeTree } from './routeTree.gen'
 import './styles/tailwind.css';
 import './styles/App.css';
 import { HelmetProvider } from 'react-helmet-async';
+import { AuthContextProvider } from './context/AuthContext';
 
 const router = createRouter({
   routeTree,
@@ -17,7 +18,9 @@ if (!rootElement.innerHTML) {
   root.render(
     <React.StrictMode>
       <HelmetProvider>
+        <AuthContextProvider>
         <RouterProvider router={router} />
+        </AuthContextProvider>
       </HelmetProvider>
     </React.StrictMode>,
   )

frontend/src/main.jsx

@@ -1,11 +1,40 @@
 import { createFileRoute } from '@tanstack/react-router';
+import SignIn from '../components/Login/SignIn'
+import { GoogleButton } from 'react-google-button'
+import { UserAuth } from '../context/AuthContext';
+import '../styles/Login.css';
 
 export const Route = createFileRoute('/Login')({
     component: Login,
 });
 
 function Login() {
+
+    const { googleSignIn } = UserAuth();
+    
+    const handleGoogleSignIn = async () => {
+        try {
+            const { user } = await googleSignIn();
+            console.log(user);
+        } catch (error) {
+            console.log(error);
+        }
+    }
+
     return (
-        <p></p>
+        <>
+            <SignIn/>
+            <div>
+                <div className="flex justify-center items-center h-screen m-auto max-w-80 py-4">
+                <GoogleButton 
+                    onClick={handleGoogleSignIn} 
+                    className="custom-google-button"
+                />
+                </div>
+            </div>
+        </>
     )
-}
+}
+
+
+// Protected Route for account page/dashboard

frontend/src/routes/Login.jsx

@@ -0,0 +1,13 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;    
+
+.custom-google-button {
+    animation: bounceIn 1s;
+    border-radius: 10px;
+  }
+  
+  .custom-google-button .icon {
+    border-radius: 10px;
+  }
+  

frontend/src/styles/Login.css

@@ -12,6 +12,7 @@ module.exports = {
       fontFamily: {
         sans: ['"Bai Jamjuree"', "sans-serif"],
         serif: ['"Bebas Neue"', "serif"]
+        serif: ['"Montserrat"', "serif"]
       }
     },
   },