protected route fix when refreshing page

src/components/ProtectedRoute.js

@@ -1,16 +1,10 @@
-import React, { useContext } from 'react'
-import { Navigate } from 'react-router-dom';
-import useIsAuthenticated from '../utils/useIsAuthenticated'
+import React, { useContext } from "react";
+import { Navigate } from "react-router-dom";
+import { AuthContext } from "../context/AuthContext";
+function ProtectedRoute({ children }) {
+  const { user, loading } = useContext(AuthContext);
 
-function ProtectedRoute({children}) {
-
-    const isAuthenticated = useIsAuthenticated();
-
-  return (
-    <>
-        {isAuthenticated ? children : <Navigate to="/login"/>}
-    </>
-  )
+  return loading ? <p>Loading</p> : user ? children : <Navigate to="/login" />;
 }
 
-export default ProtectedRoute
+export default ProtectedRoute;

src/context/AuthContext.js

@@ -12,8 +12,8 @@ export const AuthContext = createContext();
 
 export const AuthContextProvider = (props) => {
   const [user, setUser] = useState(null);
+  const [loading, setLoading] = useState(true);
   const redirectTo = useNavigate();
-
   const register = async (email, password) => {
     console.log("email + password", email, password);
 
@@ -56,8 +56,10 @@ export const AuthContextProvider = (props) => {
       if (user) {
         // const uid = user.uid;
         setUser(user);
+        setLoading(false);
       } else {
         setUser(null);
+        setLoading(false);
       }
     });
   };
@@ -77,7 +79,9 @@ export const AuthContextProvider = (props) => {
   }, []);
 
   return (
-    <AuthContext.Provider value={{ user, setUser, register, login, logout }}>
+    <AuthContext.Provider
+      value={{ user, setUser, register, login, logout, loading }}
+    >
       {props.children}
     </AuthContext.Provider>
   );

src/utils/useIsAuthenticated.js

@@ -1,11 +1,12 @@
-import React, { useContext } from 'react'
-import { AuthContext } from '../context/AuthContext'
-
+import React, { useContext } from "react";
+import { AuthContext } from "../context/AuthContext";
+// ! NOT IN USE
 function useIsAuthenticated() {
-    const { user } = useContext(AuthContext);
+  const { user } = useContext(AuthContext);
+
+  const isAuthenticated = user !== null ? true : false;
 
-    const isAuthenticated = user !== null ? true : false;
   return isAuthenticated;
 }
 
-export default useIsAuthenticated
+export default useIsAuthenticated;