add auth component & required components

src/App.tsx

@@ -1,15 +1,21 @@
 import './App.css'
 import {Route, Routes} from "react-router-dom";
 import Home from "./routes/Home.tsx";
+import {LoginPage} from "./routes/LoginPage.tsx";
+import {PrivateRoute} from "./components/PrivateRoute.tsx";
+import {NotFound} from "./routes/NotFound.tsx";
 
 function App() {
   return (
     <>
       <Routes>
-        <Route path="/" element={<Home/>}></Route>
+        <Route path="/" element={<PrivateRoute><Home/></PrivateRoute>} />
+        <Route path="/login" element={<LoginPage />} />
+        <Route path="*" element={<NotFound />} />
       </Routes>
 
       <h1 className="underline">test</h1>
+
     </>
   )
 }

src/components/PrivateRoute.tsx

@@ -0,0 +1,8 @@
+import {useAuth} from "../context/AuthContext.tsx";
+import {Navigate} from "react-router-dom";
+import React from "react";
+
+export const PrivateRoute = ({ children} : {children: React.ReactNode}) => {
+  const {isAuthenticated } = useAuth();
+  return isAuthenticated ? <> {children}</>: <Navigate to="/login" replace={true} />;
+}

src/context/AuthContext.tsx

@@ -0,0 +1,22 @@
+import React, { createContext, useState, useContext } from 'react';
+
+const AuthContext = createContext({
+  isAuthenticated: false,
+  login: () => {},
+  logout: () => {}
+});
+
+export const AuthProvider= ({ children }: { children: React.ReactNode }) => {
+  const [isAuthenticated, setIsAuthenticated] = useState(false);
+
+  const login = () => setIsAuthenticated(true);
+  const logout = () => setIsAuthenticated(false);
+
+  return (
+    <AuthContext.Provider value={{ isAuthenticated, login, logout }}>
+      {children}
+    </AuthContext.Provider>
+  );
+};
+
+export const useAuth = () => useContext(AuthContext);

src/main.tsx

@@ -3,11 +3,15 @@ import { createRoot } from 'react-dom/client'
 import './index.css'
 import App from './App.tsx'
 import {BrowserRouter} from "react-router-dom";
+import {AuthProvider} from "./context/AuthContext.tsx";
 
 createRoot(document.getElementById('root')!).render(
   <StrictMode>
+    <AuthProvider>
       <BrowserRouter>
         <App />
       </BrowserRouter>
+    </AuthProvider>
+
   </StrictMode>,
 )

src/routes/LoginPage.tsx

@@ -0,0 +1,3 @@
+export function LoginPage() {
+  return <>Login page</>
+}

src/routes/NotFound.tsx

@@ -0,0 +1,3 @@
+export function NotFound() {
+  return <h1>Page not found</h1>
+}