refactor(firebase): Extract hook into single hook file, auth-related …

…functions into auth.js

- Moved authentication-related logic into a dedicated `auth.js` file.
- Extracted `useAuthState` into its own hook file.
- Deleted the old `firebase.js` file and replaced it with `firebaseConfig.js` for Firebase initialization.
- Refactored components to align with the updated hook and utils changes.

src/components/EditProfile.jsx

@@ -11,8 +11,8 @@ import {
 } from '@mui/material';
 import { useNavigate } from 'react-router-dom';
 
+import { useAuthState } from '../hooks/useAuthState';
 import useEditProfileForm from '../hooks/useEditProfileForm';
-import { useAuthState } from '../utils/firebase';
 
 const EditProfile = () => {
   const [user] = useAuthState();

src/components/GroupsPage.jsx

@@ -4,7 +4,7 @@ import { Box, Stack, Typography, Modal } from '@mui/material';
 
 import ProfileCard from './ProfileCard';
 import StudentCard from './UserCard';
-import { useAuthState } from '../utils/firebase';
+import { useAuthState } from '../hooks/useAuthState';
 import { getUserProfile, resolveMatchRequest, getUserMatches } from '../utils/firestore';
 
 function GroupsPage() {

src/components/HomePage.jsx

@@ -4,8 +4,8 @@ import { Box, CircularProgress, Typography } from '@mui/material';
 
 import StudentFilter from './Home/StudentFilter';
 import StudentList from './Home/StudentList';
+import { useAuthState } from '../hooks/useAuthState';
 import useUserProfile from '../hooks/useUserProfile';
-import { useAuthState } from '../utils/firebase';
 
 export default function HomePage() {
   const [user] = useAuthState();

src/components/SignOutDialog.jsx

@@ -10,7 +10,7 @@ import {
 } from '@mui/material';
 import { useNavigate } from 'react-router-dom';
 
-import { handleSignOut } from '../utils/firebase';
+import { handleSignOut } from '../utils/auth';
 
 export default function SignOutDialog({ open, onClose }) {
   const navigate = useNavigate();

src/hooks/useAuthNavigation.js

@@ -1,6 +1,7 @@
 import { useNavigate } from 'react-router-dom';
 
-import { useAuthState, handleSignIn } from '../utils/firebase';
+import { useAuthState } from './useAuthState';
+import { handleSignIn } from '../utils/auth';
 
 export const useAuthNavigation = () => {
   const [user] = useAuthState();

src/hooks/useAuthState.js

@@ -0,0 +1,23 @@
+import { useEffect, useState } from 'react';
+
+import { onAuthStateChanged } from 'firebase/auth';
+
+import { auth } from '../utils/firebaseConfig';
+
+// Hook to get the current user
+export const useAuthState = () => {
+  const [user, setUser] = useState(null);
+  const [error, setError] = useState(null);
+
+  useEffect(() => {
+    const unsubscribe = onAuthStateChanged(
+      auth,
+      (user) => setUser(user),
+      (error) => setError(error),
+    );
+
+    return () => unsubscribe(); // cleanup on unmount
+  }, []);
+
+  return [user, error];
+};

src/utils/auth.js

@@ -0,0 +1,39 @@
+import { GoogleAuthProvider, signInWithPopup, signOut } from 'firebase/auth';
+
+import { auth } from './firebaseConfig';
+import { checkUserProfile } from './firestore';
+
+const provider = new GoogleAuthProvider();
+
+// Google Sign-In
+const signInWithGoogle = async () => {
+  try {
+    const result = await signInWithPopup(auth, provider);
+    return result.user;
+  } catch (error) {
+    console.error('Error during sign-in:', error);
+    return null;
+  }
+};
+
+// Handle Sign-In
+//     Return true: user already exists in the database
+export const handleSignIn = async () => {
+  const user = await signInWithGoogle();
+  let alreadyExist = true;
+  if (user) {
+    alreadyExist = await checkUserProfile(user);
+  }
+  return alreadyExist;
+};
+
+// Handle Sign-Out
+export const handleSignOut = async (navigate) => {
+  try {
+    await signOut(auth);
+    console.log('Sign out successful');
+    navigate('/');
+  } catch (error) {
+    console.error('Error during sign-out:', error);
+  }
+};

src/utils/firebaseConfig.js

@@ -0,0 +1,19 @@
+import { initializeApp } from 'firebase/app';
+import { getAuth } from 'firebase/auth';
+import { getFirestore } from 'firebase/firestore';
+
+const firebaseConfig = {
+  apiKey: 'AIzaSyAtUHyFNDDtuPVwmH9mNCXa6o2qE_kF6OA',
+  authDomain: 'studybuddy-8086e.firebaseapp.com',
+  projectId: 'studybuddy-8086e',
+  storageBucket: 'studybuddy-8086e.appspot.com',
+  messagingSenderId: '677938268288',
+  appId: '1:677938268288:web:b74725ffd461455c76be65',
+  measurementId: 'G-EKR2SD2LE8',
+};
+
+// Initialize Firebase
+const app = initializeApp(firebaseConfig);
+
+export const db = getFirestore(app);
+export const auth = getAuth(app);

src/utils/firestore.js

@@ -10,7 +10,8 @@ import {
   arrayRemove,
 } from 'firebase/firestore';
 
-import { db } from './firebase'; // import db from the firebase.js
+// Import the Firestore database
+import { db } from './firebaseConfig';
 
 // Check user profile in Firestore
 export const checkUserProfile = async (user) => {