diff --git a/src/components/ProtectedRoute.js b/src/components/ProtectedRoute.js index 5b86d22..ffee1b4 100644 --- a/src/components/ProtectedRoute.js +++ b/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 : } - - ) + return loading ?

Loading

: user ? children : ; } -export default ProtectedRoute \ No newline at end of file +export default ProtectedRoute; diff --git a/src/context/AuthContext.js b/src/context/AuthContext.js index bb4129e..5023344 100644 --- a/src/context/AuthContext.js +++ b/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 ( - + {props.children} ); diff --git a/src/utils/useIsAuthenticated.js b/src/utils/useIsAuthenticated.js index 67b5f02..a3d4524 100644 --- a/src/utils/useIsAuthenticated.js +++ b/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 \ No newline at end of file +export default useIsAuthenticated;