Protected routes

usentrycoach.client/src/App.tsx

@@ -3,29 +3,35 @@ import {ChatControl} from "./ChatClient/ChatControl.tsx";
 import Login from './Components/Login.tsx';
 import useLoginToken from "./Hooks/useLoginToken.tsx";
 import Home from "./Components/Home.tsx";
-import { BrowserRouter, Routes, Route } from 'react-router-dom';
+import { BrowserRouter, Routes, Route, Link } from 'react-router-dom';
+import ProtectedRoute from "./Components/ProtectedRoute.tsx";
 
 export default function App()
 {
     const {token, setToken} = useLoginToken();
 
-    return (
-        <BrowserRouter>
-            <Routes>
-                <Route index path="/" element={ <Home /> } />
-                <Route path="login" element={ <Login setToken={setToken} /> } />
-                <Route path="chat" element={ <ChatControl /> } />
-                <Route path="*" element={ <p>Deine Mamma ist so dick, sie hat diese Seite gefressen. </p> } />
-            </Routes>
-        </BrowserRouter>
+    const Navigation = () => (
+        <nav>
+            <Link to="/">Home</Link>
+            <Link to="/login">Login</Link>
+            <Link to="/chat">Chat</Link>
+        </nav>
     );
 
-    // const {token, setToken} = useLoginToken();
-    //
-    // if (!token)
-    // {
-    //     return <Login setToken={setToken} />;
-    // }
-    //
-    // return <ChatControl/>
+    return (
+        <>
+            {/*<Navigation/>*/}
+
+            <BrowserRouter>
+                <Routes>
+                    <Route index path="/" element={ <Home /> } />
+                    <Route path="login" element={ <Login setToken={setToken} /> } />
+                    <Route element={<ProtectedRoute user={token} setUser={setToken}/>}>
+                        <Route path="chat" element={ <ChatControl /> } />
+                    </Route>
+                    <Route path="*" element={ <p>Deine Mamma ist so dick, sie hat diese Seite gefressen. </p> } />
+                </Routes>
+            </BrowserRouter>
+        </>
+    );
 }

usentrycoach.client/src/Components/ProtectedRoute.tsx

@@ -0,0 +1,12 @@
+import { Outlet } from "react-router-dom";
+import Login from "./Login.tsx";
+
+export default function ProtectedRoute({user, setUser} : {user: string | null, setUser: (user: string | null) => void})
+{
+    if (user === null)
+    {
+        return <Login setToken={setUser}/>;
+    }
+
+    return <Outlet />;
+}

usentrycoach.client/src/Hooks/useLoginToken.tsx

@@ -15,7 +15,7 @@ export default function useLoginToken()
 
     const [token, setToken] = useState<string | null>(getToken());
 
-    const saveToken = (token: string): void =>
+    const saveToken = (token: string | null): void =>
     {
         sessionStorage.setItem('token', JSON.stringify(token));
         setToken(token);