auth flow fix

src/Components/Private.js

@@ -1,31 +0,0 @@
-import { Routes, Route } from "react-router-dom";
-import useAuth from '../Auth/useAuth';
-import React from 'react'
-
-function Not(){
-    <div>
-        <h1>404</h1>
-    </div>
-}
-
-function Loveisforever(){
-    <div>
-        <h1>404</h1>
-    </div>
-}
-
-export function Private ( props ) {
-
-    let auth = useAuth();
-
-    return(
-        <React.Fragment>
-            {
-                auth.isLogged() ? 
-                    ( <Route path="main" element={<Not/>}/> ) 
-                : ( <Route path="main" element={<Loveisforever/>}/>)        
-            }
-        </React.Fragment>
-    )
-
-}

src/Components/PrivateRoute.js

@@ -1,15 +1,16 @@
-import { Navigate } from 'react-router-dom';
+import { Navigate, useLocation } from 'react-router-dom';
 import useAuth from '../Auth/useAuth';
-import React from 'react'
 
-export const PrivateRoute= (props) => {
-    console.log(props)
+export default function RequireAuth({ children }) {
     let auth = useAuth();
-    const isAuthenticated = auth.isLogged();
+    let location = useLocation();
 
-    if (isAuthenticated) {
-        return children
+    console.log('check if is logged in private route ')
+
+    if (!auth.isLogged()) {
+        return <Navigate to="/login" state={{ from: location }} replace />;
     }
 
-    return <Navigate to="/" />
+    return children;
 }
+

src/Components/Routes.js

@@ -1,5 +1,5 @@
 import React, {useEffect} from 'react'
-import { Routes, Route, Navigate, useNavigate, useLocation } from "react-router-dom";
+import { Routes, Route,useNavigate } from "react-router-dom";
 
 import { Dashboard } from "./Dashboard";
 import { Login } from '../Pages/Login'
@@ -17,25 +17,7 @@ import { NotFound } from '../Pages/404'
 import { Profile } from '../Pages/Profile'
 
 import useAuth from '../Auth/useAuth'
-
-export function RequireAuth({ children }) {
-    let auth = useAuth();
-    let location = useLocation();
-
-    console.log('requier auth >> ', auth)
-
-
-    if (!auth.isLogged()) {
-        // Redirect them to the /login page, but save the current location they were
-        // trying to go to when they were redirected. This allows us to send them
-        // along to that page after they login, which is a nicer user experience
-        // than dropping them off on the home page.
-        return <Navigate to="/login" state={{ from: location }} replace />;
-    }
-
-    return children;
-}
-
+import RequireAuth from '../Components/PrivateRoute'
 
 export default function MyRoutes () {
 
@@ -43,17 +25,15 @@ export default function MyRoutes () {
     let navigate = useNavigate()
 
     useEffect(() => {
-        console.log('usse fec check user')
         if(!auth.isLogged()){
             return navigate('login')
-        }else{
-            return navigate('dashboard/home')
-        }
-    },[auth,navigate])
+        }    
+    }, [auth, navigate])
 
     return(
         <Routes>
-            <Route path="/login" element={<Login/>} />
+
+            <Route path="login" element={<Login/>} />
             <Route 
                 path="dashboard" 
                 element={

src/Pages/Login.jsx

@@ -33,6 +33,7 @@ export function Login() {
     let navigate = useNavigate()
 
     const handleSubmit = (event) => {
+
         event.preventDefault();
         const data = new FormData(event.currentTarget);
 
@@ -41,12 +42,8 @@ export function Login() {
             password: data.get('password'),
         }
 
-        console.log(user);
         auth.login(user)
-        console.log(auth.isLogged());
-
         return navigate('/dashboard/home')
-
     };
 
     return (