redirect based on cookie

client/src/App.tsx

@@ -4,28 +4,38 @@ import Login from './routes/login';
 import Home from './routes/home';
 import { CookiesProvider, useCookies } from 'react-cookie';
 import Signup from './routes/signup';
-import { useEffect, useState } from 'react';
 
 // Create a client
 const queryClient = new QueryClient();
 
-export default () => {
-  const [auth, setAuth] = useState(false);
-  const [cookies, setCookie, removeCookie] = useCookies(['token']);
-  useEffect(() => {
-    if (cookies.token) {
-      setAuth(true);
-    }
-  }, [cookies.token]);
+const Auth = ({route}: {route: string}) => {
+  const [cookies] = useCookies(['token']);
 
+  if (cookies.token && route === 'login') {
+    return <Navigate to="/home" />;
+  } else if (!cookies.token && route === 'home') {
+    return <Navigate to="/login" />;
+  } else if (cookies.token && route === 'signup') {
+    return <Navigate to="/home" />;
+  } else if (cookies.token && route === 'home') {
+    return <Home/>;
+  } else if (!cookies.token && route === 'login') {
+    return <Login/>;
+  } else if (!cookies.token && route === 'signup') {
+    return <Signup/>;
+  }
+  return <Navigate to="/login" />;
+};
+
+export default () => {
   return (
     <BrowserRouter>
       <QueryClientProvider client={queryClient}>
         <CookiesProvider>
             <Routes>
-              <Route path="/login" element={auth ? <Navigate to="/home" /> : <Login />} />
-              <Route path="/signup" element={auth ? <Navigate to="/home" /> : <Signup />} />
-              <Route path="/home" element={!auth ? <Navigate to="/login" /> : <Home />} />
+              <Route path="/login" element={<Auth route="login"/>} />
+              <Route path="/signup" element={<Auth route="signup"/>} />
+              <Route path="/home" element={<Auth route="home"/>} />
             </Routes>
             <Outlet />
         </CookiesProvider>

client/src/components/AppHeader.tsx

@@ -27,10 +27,8 @@ const AppHeader = () => {
   });
   const [cookies, setCookie, removeCookie] = useCookies(['token']);
 
-  const logOut = async () => {
-    console.log(cookies);
+  const logOut = () => {
     removeCookie('token');
-    window.location.href = '/login';
   };
 
   return (
@@ -51,7 +49,7 @@ const AppHeader = () => {
               className="group relative flex w-auto justify-center rounded-md border border-red bg-red py-2 px-2 text-sm font-medium text-white hover:bg-white hover:text-red focus:outline-none focus:ring-2 focus:ring-red focus:ring-offset-2"
               onClick={() => logOut()}
             >
-              Deonnexion
+              Deconnexion
             </button>
           </div>
         </div>

client/src/routes/login.tsx

@@ -1,15 +1,14 @@
-import { Link, Navigate, useNavigate } from 'react-router-dom';
+import { Link } from 'react-router-dom';
 import logo from '@assets/images/logo.svg';
 import { useQuery } from '@tanstack/react-query';
-import { useEffect, useState } from 'react';
+import { useState } from 'react';
 import { useCookies } from 'react-cookie';
 import type { Token } from '../types';
-import { useAuth } from '../controllers/Auth';
 
 const Login = () => {
   const [email, setEmail] = useState('');
   const [password, setPassword] = useState('');
-  const [cookies, setCookie, removeCookie] = useCookies(['token']);
+  const [cookies, setCookie] = useCookies(['token']);
   
   const { refetch } = useQuery(
     ['login'],
@@ -26,9 +25,7 @@ const Login = () => {
     },
     {
       onSuccess: (data: Token) => {
-        console.log(data);
         setCookie('token', data.token, { path: '/', expires: new Date(data.expiresAt) });
-        window.location.href = '/home';
       },
       onError: (error) => {
         console.error(error);