Updated authentication to ensure user can only access the login page …

…when not logged in.
bryankhor07 · Nov 25, 2024 · d6e5a49 · d6e5a49
1 parent 4c7a01a
commit d6e5a49
Show file tree

Hide file tree

Showing 9 changed files with 87 additions and 18 deletions.
diff --git a/.firebase/hosting.YnVpbGQ.cache b/.firebase/hosting.YnVpbGQ.cache
@@ -5,14 +5,14 @@ logo512.png,1731212379472,212b102aa09e51b3b3e06647e81f7801a61333e171f6582e812437
 logo192.png,1731212379364,79e2b749561016bc8af300ea19f48347ceed3cb1a54f48ae456172eca45e08f0
 favicon.ico,1731212377518,27edce7be5922cf0bef7d4136f69b5bfbdd5bf8c13c7b026f71187d41a00aa7d
 404.html,1732137662854,762bf484ba67404bd1a3b181546ea28d60dfddf18e9dd4795d8d25bcf3c1a890
-index.html,1732485861090,d88cb46069ac53c2b5a56124540acca80cdd1a7c6e86f230ffaf8720ebb7098e
-static/media/google-icon.c920552d98e3ca0c9df5.webp,1732485861100,5d10e8f1b91339b5922ca21a6eb65c23e8c5508d78342dbc7c25a893a983c16f
-asset-manifest.json,1732485861090,9f41b17824e8c73aeb9da21d6dcf5a74a790c478ecdf8e0c558a9ac023c099bf
-static/js/main.4f9477e8.js.LICENSE.txt,1732485861101,c65fc35201c941992e9eafa419204cb464665f9b55456cacb63984e17cd81351
-static/js/453.e120f09d.chunk.js,1732485861101,b835c0a01e69db4978d2421ec616111e38f1c5ca2a7626659d66545c61072f2a
-static/js/453.e120f09d.chunk.js.map,1732485861101,bf336902b329b63f00548cab95d8a810de93c00b7833f9a9f9f951adba94deb3
-static/css/main.f5cf8ac9.css,1732485861101,4bb1be1b1c85bcab7a947ed64720dec1b567ff40d568f575706c6fcd9b8d2053
-static/css/main.f5cf8ac9.css.map,1732485861101,ac3219b664499451b6a92ffe049b04cdc76d44c44d2a065a9f1aa63ebc603bfa
-static/media/onlinerecipebackground.f304ebe8c62e40b071d8.jpg,1732485861100,2ada5911bbcc257b7c0cb57ff1512c2365ef2223f9a022c41a38bd7cbaa23c3f
-static/js/main.4f9477e8.js,1732485861101,8268e194b60f2b3a08697c84aa9b02a509849bbd4735598959975f50b0ee5fff
-static/js/main.4f9477e8.js.map,1732485861103,ce81b004f9dfa640c34134240f43eab55af1d7abb75ade110342825436bb0eb7
+index.html,1732511239070,8f8d2b5afae594dad2d627b36019a4e8801927b518158f39dc8b148837e37f9f
+asset-manifest.json,1732511239069,8f484135c6429484b9b65e7457ae207f2d3052666c06168ee4cee8de391b247e
+static/media/google-icon.c920552d98e3ca0c9df5.webp,1732511239070,5d10e8f1b91339b5922ca21a6eb65c23e8c5508d78342dbc7c25a893a983c16f
+static/js/main.edbc7f5f.js.LICENSE.txt,1732511239070,c65fc35201c941992e9eafa419204cb464665f9b55456cacb63984e17cd81351
+static/css/main.e51f055e.css,1732511239070,488c68ac2f5052f7ee67c7696a90335bd597104d4941988295c4049b00753710
+static/js/453.e120f09d.chunk.js,1732511239070,b835c0a01e69db4978d2421ec616111e38f1c5ca2a7626659d66545c61072f2a
+static/js/453.e120f09d.chunk.js.map,1732511239070,bf336902b329b63f00548cab95d8a810de93c00b7833f9a9f9f951adba94deb3
+static/css/main.e51f055e.css.map,1732511239070,a7c1ac56effdef3f46396d6036a1fb12984e989e458779e4434602d65a2a2e15
+static/media/onlinerecipebackground.f304ebe8c62e40b071d8.jpg,1732511239070,2ada5911bbcc257b7c0cb57ff1512c2365ef2223f9a022c41a38bd7cbaa23c3f
+static/js/main.edbc7f5f.js,1732511239070,6abab6410f1331c703128874564c43d17afc996061fe42d8a6603cc55e0f8d58
+static/js/main.edbc7f5f.js.map,1732511239070,ab21615512fa598b8b71d12d99bdac4516adb7597255727ea8decdbb2d571f60
diff --git a/src/hooks/useGetCurrentUserInfo.js b/src/hooks/useGetCurrentUserInfo.js
@@ -1,6 +1,38 @@
+import { useEffect, useState } from "react";
+
 export const useGetCurrentUserInfo = () => {
-  const { name, profilePhoto, userID, isAuth } =
-    JSON.parse(localStorage.getItem("auth")) || {}; // Get the current user info from localStorage
+  const [authInfo, setAuthInfo] = useState(() => {
+    try {
+      const storedAuth = localStorage.getItem("auth");
+      return storedAuth ? JSON.parse(storedAuth) : null;
+    } catch (error) {
+      console.error("Error parsing auth info from localStorage:", error);
+      return null;
+    }
+  });
+
+  useEffect(() => {
+    const handleStorageChange = () => {
+      try {
+        const updatedAuth = localStorage.getItem("auth");
+        setAuthInfo(updatedAuth ? JSON.parse(updatedAuth) : null);
+      } catch (error) {
+        console.error("Error updating auth info from localStorage:", error);
+      }
+    };
+
+    // Listen for storage changes (e.g., across tabs or during sign-in)
+    window.addEventListener("storage", handleStorageChange);
+
+    return () => {
+      window.removeEventListener("storage", handleStorageChange);
+    };
+  }, []);
+
+  const name = authInfo?.name || null;
+  const profilePhoto = authInfo?.profilePhoto || null;
+  const userID = authInfo?.userID || null;
+  const isAuth = authInfo?.isUserAuthenticated || false;
 
   return { name, profilePhoto, userID, isAuth };
 };
diff --git a/src/hooks/useGetUserRecipes.js b/src/hooks/useGetUserRecipes.js
@@ -13,7 +13,11 @@ export const useGetUserRecipes = (userID) => {
   const recipeCollectionRef = collection(db, "recipes");
 
   useEffect(() => {
-    let unsubscribe;
+    if (!userID) {
+      setRecipes([]); // Clear recipes if no userID is provided
+      return () => {}; // Return a no-op cleanup function
+    }
+    let unsubscribe = () => {}; // Initialize with a no-op function
     try {
       const recipesQuery = query(
         recipeCollectionRef,

diff --git a/src/pages/auth/index.jsx b/src/pages/auth/index.jsx
@@ -8,7 +8,7 @@ import "./styles.css";
 
 export default function Auth() {
   const navigate = useNavigate();
-  const { isUserAuthenticated } = useGetCurrentUserInfo();
+  const { isAuth } = useGetCurrentUserInfo();
   const { addUserInfo } = useAddUserInfo();
 
   const signInWithGoogle = async () => {
@@ -33,7 +33,7 @@ export default function Auth() {
     }
   };
 
-  if (isUserAuthenticated) {
+  if (isAuth) {
     return <Navigate to="/recipes" />;
   }
 

diff --git a/src/pages/create-recipe/index.jsx b/src/pages/create-recipe/index.jsx
@@ -1,13 +1,16 @@
 import Header from "../../components/header";
 import Navbar from "../../components/navbar";
 import { useAddRecipe } from "../../hooks/useAddRecipe";
+import { useGetCurrentUserInfo } from "../../hooks/useGetCurrentUserInfo";
+import { Navigate } from "react-router-dom";
 import RecipeInformation from "../../components/recipeInformation";
 import Ingredients from "../../components/ingredients";
 import Instructions from "../../components/instructions";
 import { useState } from "react";
 import "./styles.css";
 
 export default function CreateRecipe() {
+  const { isAuth } = useGetCurrentUserInfo();
   const [author, setAuthor] = useState("");
   const [recipeName, setRecipeName] = useState("");
   const [recipeDescription, setRecipeDescription] = useState("");
@@ -82,6 +85,10 @@ export default function CreateRecipe() {
     setRecipeImageURL("");
   };
 
+  if (!isAuth) {
+    return <Navigate to="/" />;
+  }
+
   return (
     <div className="container">
       <Header />

diff --git a/src/pages/favorites/index.jsx b/src/pages/favorites/index.jsx
@@ -3,6 +3,8 @@ import Navbar from "../../components/navbar";
 import { useState } from "react";
 import { useGetFavoriteRecipes } from "../../hooks/useGetFavoriteRecipes";
 import { useDeleteFavoriteRecipe } from "../../hooks/useDeleteFavoriteRecipe";
+import { useGetCurrentUserInfo } from "../../hooks/useGetCurrentUserInfo";
+import { Navigate } from "react-router-dom";
 import RecipeCard from "../../components/recipeCard";
 import RecipeModal from "../../components/recipeModal";
 import Footer from "../../components/footer";
@@ -12,6 +14,7 @@ export default function Favorites() {
   const { favoriteRecipes, setFavoriteRecipes } = useGetFavoriteRecipes(); // Update useGetUserRecipes to return setRecipes if needed
   const [selectedRecipe, setSelectedRecipe] = useState(null);
   const { deleteFavoriteRecipe } = useDeleteFavoriteRecipe();
+  const { isAuth } = useGetCurrentUserInfo();
 
   const handleRecipeClick = (recipe) => {
     setSelectedRecipe(recipe); // Set the clicked recipe as the selected recipe
@@ -31,6 +34,11 @@ export default function Favorites() {
       console.error("Failed to remove recipe from favorites: ", error);
     }
   };
+
+  if (!isAuth) {
+    return <Navigate to="/" />;
+  }
+
   return (
     <div className="container">
       <Header />

diff --git a/src/pages/my-recipes/index.jsx b/src/pages/my-recipes/index.jsx
@@ -3,6 +3,7 @@ import Navbar from "../../components/navbar";
 import { useState, useEffect } from "react";
 import { useGetUserRecipes } from "../../hooks/useGetUserRecipes";
 import { useGetCurrentUserInfo } from "../../hooks/useGetCurrentUserInfo";
+import { Navigate } from "react-router-dom";
 import RecipeCard from "../../components/recipeCard";
 import RecipeModal from "../../components/recipeModal";
 import SearchBar from "../../components/searchBar";
@@ -12,7 +13,7 @@ import Footer from "../../components/footer";
 import "./styles.css";
 
 export default function MyRecipes() {
-  const { userID } = useGetCurrentUserInfo();
+  const { userID, isAuth } = useGetCurrentUserInfo();
   const { recipes } = useGetUserRecipes(userID); // Update useGetUserRecipes to return setRecipes if needed
   const [searchQuery, setSearchQuery] = useState("");
   const [selectedRecipe, setSelectedRecipe] = useState(null);
@@ -67,6 +68,10 @@ export default function MyRecipes() {
     }
   }, [activeSearchQuery, recipes, isFilterApplied, selectedCuisine]);
 
+  if (!isAuth) {
+    return <Navigate to="/" />;
+  }
+
   const handleSearch = () => {
     setActiveSearchQuery(searchQuery);
   };

diff --git a/src/pages/profile/index.jsx b/src/pages/profile/index.jsx
@@ -1,7 +1,8 @@
 import { useGetUserInfo } from "../../hooks/useGetUserInfo";
+import { useGetCurrentUserInfo } from "../../hooks/useGetCurrentUserInfo";
 import { useGetUserRecipes } from "../../hooks/useGetUserRecipes";
 import { useUpdateUserProfile } from "../../hooks/useUpdateUserProfile";
-import { useParams, useNavigate } from "react-router-dom";
+import { useParams, useNavigate, Navigate } from "react-router-dom";
 import { useState, useEffect } from "react";
 import ProfileNavBar from "../../components/profileNavBar";
 import ProfileInfo from "../../components/profileInfo";
@@ -15,6 +16,7 @@ export default function Profile() {
   const { recipes } = useGetUserRecipes(userID);
   const { updateUserProfile } = useUpdateUserProfile();
   const [editProfile, setEditProfile] = useState(false);
+  const { isAuth } = useGetCurrentUserInfo();
   const navigate = useNavigate();
 
   // Default state with empty values
@@ -67,6 +69,10 @@ export default function Profile() {
     setSelectedRecipe(null); // Clear the selected recipe to close the modal
   };
 
+  if (!isAuth) {
+    return <Navigate to="/" />;
+  }
+
   return (
     <div className="profile-page">
       <ProfileNavBar

diff --git a/src/pages/recipes/index.jsx b/src/pages/recipes/index.jsx
@@ -2,6 +2,8 @@ import Header from "../../components/header";
 import Navbar from "../../components/navbar";
 import { useState, useEffect } from "react";
 import { useGetAllRecipes } from "../../hooks/useGetAllRecipes";
+import { useGetCurrentUserInfo } from "../../hooks/useGetCurrentUserInfo";
+import { Navigate } from "react-router-dom";
 import RecipeCard from "../../components/recipeCard";
 import RecipeModal from "../../components/recipeModal";
 import SearchBar from "../../components/searchBar";
@@ -20,6 +22,7 @@ export default function Recipes() {
   const [activeSearchQuery, setActiveSearchQuery] = useState("");
   const [isSurprise, setIsSurprise] = useState(false);
   const [randomRecipe, setRandomRecipe] = useState([]);
+  const { isAuth } = useGetCurrentUserInfo();
 
   const handleRecipeClick = (recipe) => {
     setSelectedRecipe(recipe); // Set the clicked recipe as the selected recipe
@@ -82,6 +85,10 @@ export default function Recipes() {
     }
   };
 
+  if (!isAuth) {
+    return <Navigate to="/" />;
+  }
+
   return (
     <div className="container">
       <Header />