Browse Source

auth flow fix

amenpunk 3 years ago
parent
commit
dd118288b5
4 changed files with 16 additions and 69 deletions
  1. 0 31
      src/Components/Private.js
  2. 9 8
      src/Components/PrivateRoute.js
  3. 6 26
      src/Components/Routes.js
  4. 1 4
      src/Pages/Login.jsx

+ 0 - 31
src/Components/Private.js

1
-import { Routes, Route } from "react-router-dom";
2
-import useAuth from '../Auth/useAuth';
3
-import React from 'react'
4
-
5
-function Not(){
6
-    <div>
7
-        <h1>404</h1>
8
-    </div>
9
-}
10
-
11
-function Loveisforever(){
12
-    <div>
13
-        <h1>404</h1>
14
-    </div>
15
-}
16
-
17
-export function Private ( props ) {
18
-
19
-    let auth = useAuth();
20
-
21
-    return(
22
-        <React.Fragment>
23
-            {
24
-                auth.isLogged() ? 
25
-                    ( <Route path="main" element={<Not/>}/> ) 
26
-                : ( <Route path="main" element={<Loveisforever/>}/>)        
27
-            }
28
-        </React.Fragment>
29
-    )
30
-
31
-}

+ 9 - 8
src/Components/PrivateRoute.js

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

+ 6 - 26
src/Components/Routes.js

1
 import React, {useEffect} from 'react'
1
 import React, {useEffect} from 'react'
2
-import { Routes, Route, Navigate, useNavigate, useLocation } from "react-router-dom";
2
+import { Routes, Route,useNavigate } from "react-router-dom";
3
 
3
 
4
 import { Dashboard } from "./Dashboard";
4
 import { Dashboard } from "./Dashboard";
5
 import { Login } from '../Pages/Login'
5
 import { Login } from '../Pages/Login'
17
 import { Profile } from '../Pages/Profile'
17
 import { Profile } from '../Pages/Profile'
18
 
18
 
19
 import useAuth from '../Auth/useAuth'
19
 import useAuth from '../Auth/useAuth'
20
-
21
-export function RequireAuth({ children }) {
22
-    let auth = useAuth();
23
-    let location = useLocation();
24
-
25
-    console.log('requier auth >> ', auth)
26
-
27
-
28
-    if (!auth.isLogged()) {
29
-        // Redirect them to the /login page, but save the current location they were
30
-        // trying to go to when they were redirected. This allows us to send them
31
-        // along to that page after they login, which is a nicer user experience
32
-        // than dropping them off on the home page.
33
-        return <Navigate to="/login" state={{ from: location }} replace />;
34
-    }
35
-
36
-    return children;
37
-}
38
-
20
+import RequireAuth from '../Components/PrivateRoute'
39
 
21
 
40
 export default function MyRoutes () {
22
 export default function MyRoutes () {
41
 
23
 
43
     let navigate = useNavigate()
25
     let navigate = useNavigate()
44
 
26
 
45
     useEffect(() => {
27
     useEffect(() => {
46
-        console.log('usse fec check user')
47
         if(!auth.isLogged()){
28
         if(!auth.isLogged()){
48
             return navigate('login')
29
             return navigate('login')
49
-        }else{
50
-            return navigate('dashboard/home')
51
-        }
52
-    },[auth,navigate])
30
+        }    
31
+    }, [auth, navigate])
53
 
32
 
54
     return(
33
     return(
55
         <Routes>
34
         <Routes>
56
-            <Route path="/login" element={<Login/>} />
35
+
36
+            <Route path="login" element={<Login/>} />
57
             <Route 
37
             <Route 
58
                 path="dashboard" 
38
                 path="dashboard" 
59
                 element={
39
                 element={

+ 1 - 4
src/Pages/Login.jsx

33
     let navigate = useNavigate()
33
     let navigate = useNavigate()
34
 
34
 
35
     const handleSubmit = (event) => {
35
     const handleSubmit = (event) => {
36
+
36
         event.preventDefault();
37
         event.preventDefault();
37
         const data = new FormData(event.currentTarget);
38
         const data = new FormData(event.currentTarget);
38
 
39
 
41
             password: data.get('password'),
42
             password: data.get('password'),
42
         }
43
         }
43
 
44
 
44
-        console.log(user);
45
         auth.login(user)
45
         auth.login(user)
46
-        console.log(auth.isLogged());
47
-
48
         return navigate('/dashboard/home')
46
         return navigate('/dashboard/home')
49
-
50
     };
47
     };
51
 
48
 
52
     return (
49
     return (