Merge pull request #3 from 392-f24/alison

OAuth

src/App.jsx

@@ -1,7 +1,11 @@
 import React, { useState, useEffect } from 'react';
 import './App.css';
+
+import { useAuthState, signInWithGoogle, firebaseSignOut } from './utilities/firebase'; 
+
 import { findCafes } from './utilities/findCafes';
 
+
 function App() {
   const [reviews, setReviews] = useState([]);
   const [availability, setAvailability] = useState({});
@@ -13,6 +17,19 @@ function App() {
   const [dist, setDist] = useState('');
   const [cafes, setCafes] = useState([]); 
 
+  const [user] = useAuthState(); 
+
+
+  const handleSignIn = async () => {
+    try {
+      await signInWithGoogle(); // Sign in with Google
+    } catch (error) {
+      console.error('Error signing in:', error);
+    }
+  };
+
+  const handleLogout = () => firebaseSignOut();
+
   useEffect(() => {
   }, []);
 
@@ -73,7 +90,18 @@ function App() {
     <div className="App">
       <header className="App-header">
         <h1>CafeWay</h1>
-
+        {user ? (
+              <>
+                <button className="btn btn-outline-dark" onClick={handleLogout}>
+                  Sign Out
+                </button>
+                <p>Welcome, {user.email}</p>
+              </>
+            ) : (
+              <button className="btn btn-outline-dark" onClick={handleSignIn}>
+                Sign In
+              </button>
+            )}
         <div>
           <input
             type="text"

src/utilities/firebase.js

@@ -2,6 +2,9 @@
 import { initializeApp } from "firebase/app";
 // TODO: Add SDKs for Firebase products that you want to use
 // https://firebase.google.com/docs/web/setup#available-libraries
+import { useEffect, useState, useCallback } from 'react';
+import { getAuth, GoogleAuthProvider, signInWithPopup, signOut, onAuthStateChanged } from 'firebase/auth';
+import { getDatabase, ref, onValue, update } from 'firebase/database';
 
 // Your web app's Firebase configuration
 const firebaseConfig = {
@@ -16,3 +19,61 @@ const firebaseConfig = {
 
 // Initialize Firebase
 const app = initializeApp(firebaseConfig);
+const auth = getAuth(app);
+const provider = new GoogleAuthProvider();
+
+
+export const signInWithGoogle = () => {
+    signInWithPopup(auth, provider)
+      .then((result) => {
+        console.log('User signed in:', result.user);
+      })
+      .catch((error) => {
+        console.error('Error signing in with Google:', error);
+      });
+  };
+
+export const firebaseSignOut = () => signOut(auth);
+
+export const useAuthState = () => {
+    const [user, setUser] = useState(null);
+
+    useEffect(() => {
+        const unsubscribe = onAuthStateChanged(auth, (user) => setUser(user));
+        return () => unsubscribe();
+    }, []);
+
+    return [user];
+};
+
+export const useDbData = (path) => {
+    const [data, setData] = useState();
+    const [error, setError] = useState(null);
+
+    useEffect(() => {
+        const dbRef = ref(database, path);
+        const unsubscribe = onValue(
+        dbRef,
+        (snapshot) => setData(snapshot.val()),
+        (error) => setError(error)
+        );
+        return () => unsubscribe();
+    }, [path]);
+
+    return [data, error];
+};
+
+export const useDbUpdate = (path) => {
+    const [result, setResult] = useState();
+
+    const updateData = useCallback(
+        (value) => {
+        update(ref(database, path), value)
+            .then(() => setResult({ message: "Update successful", timestamp: Date.now() }))
+            .catch((error) => setResult({ error, message: error.message }));
+        },
+        [path]
+    );
+
+    return [updateData, result];
+};