Захищені маршрути

function ProtectedRoute() {
  const { isAuthenticated } = useAuth();
  const location = useLocation();

  if (!isAuthenticated) {
    return (
      <Navigate
        to="/login"
        replace
        state={{ from: location }}
      />
    );
  }

  return <Outlet />;
}

import { createContext, useContext, useState } from "react";
import { createRoot } from "react-dom/client";
import {
  BrowserRouter,
  Link,
  Navigate,
  Outlet,
  Route,
  Routes,
  useLocation,
  useNavigate,
} from "react-router-dom";

const AuthContext = createContext(null);

function AuthProvider({ children }) {
  const [isAuthenticated, setIsAuthenticated] = useState(false);

  function login() {
    setIsAuthenticated(true);
  }

  function logout() {
    setIsAuthenticated(false);
  }

  const value = {
    isAuthenticated,
    login,
    logout,
  };

  return (
    <AuthContext.Provider value={value}>
      {children}
    </AuthContext.Provider>
  );
}

function useAuth() {
  const context = useContext(AuthContext);

  if (!context) {
    throw new Error("useAuth має використовуватися всередині AuthProvider");
  }

  return context;
}

function ProtectedRoute() {
  const { isAuthenticated } = useAuth();
  const location = useLocation();

  if (!isAuthenticated) {
    return (
      <Navigate
        to="/login"
        replace
        state={{ from: location }}
      />
    );
  }

  return <Outlet />;
}

function Navigation() {
  const { isAuthenticated, logout } = useAuth();
  const navigate = useNavigate();

  function handleLogout() {
    logout();
    navigate("/login", { replace: true });
  }

  return (
    <nav>
      <Link to="/">Головна</Link>{" "}
      <Link to="/dashboard">Панель керування</Link>{" "}
      <Link to="/profile">Профіль</Link>{" "}

      {isAuthenticated && (
        <button type="button" onClick={handleLogout}>
          Вийти
        </button>
      )}
    </nav>
  );
}

function HomePage() {
  return (
    <main>
      <h1>Головна сторінка</h1>
      <p>Ця сторінка доступна всім користувачам.</p>
    </main>
  );
}

function LoginPage() {
  const { isAuthenticated, login } = useAuth();
  const navigate = useNavigate();
  const location = useLocation();

  const from = location.state?.from?.pathname || "/dashboard";

  if (isAuthenticated) {
    return <Navigate to={from} replace />;
  }

  function handleSubmit(event) {
    event.preventDefault();

    // У реальному застосунку тут потрібно виконати запит до сервера.
    login();

    navigate(from, { replace: true });
  }

  return (
    <main>
      <h1>Вхід</h1>

      <form onSubmit={handleSubmit}>
        <label>
          Електронна пошта
          <input
            type="email"
            name="email"
            defaultValue="user@example.com"
            required
          />
        </label>

        <br />

        <label>
          Пароль
          <input
            type="password"
            name="password"
            defaultValue="password"
            required
          />
        </label>

        <br />

        <button type="submit">Увійти</button>
      </form>
    </main>
  );
}

function DashboardPage() {
  return (
    <main>
      <h1>Панель керування</h1>
      <p>Ця сторінка доступна лише автентифікованим користувачам.</p>
    </main>
  );
}

function ProfilePage() {
  return (
    <main>
      <h1>Профіль</h1>
      <p>Особисті дані користувача.</p>
    </main>
  );
}

function App() {
  return (
    <BrowserRouter>
      <AuthProvider>
        <Navigation />

        <Routes>
          <Route path="/" element={<HomePage />} />
          <Route path="/login" element={<LoginPage />} />

          <Route element={<ProtectedRoute />}>
            <Route path="/dashboard" element={<DashboardPage />} />
            <Route path="/profile" element={<ProfilePage />} />
          </Route>

          <Route
            path="*"
            element={<Navigate to="/" replace />}
          />
        </Routes>
      </AuthProvider>
    </BrowserRouter>
  );
}

createRoot(document.getElementById("root")).render(<App />);

<Route element={<ProtectedRoute />}>
  <Route path="/dashboard" element={<DashboardPage />} />
  <Route path="/profile" element={<ProfilePage />} />
  <Route path="/settings" element={<SettingsPage />} />
</Route>

// Не потрібно повторювати таку логіку в кожній сторінці
function ProfilePage() {
  const { isAuthenticated } = useAuth();

  if (!isAuthenticated) {
    return <Navigate to="/login" />;
  }

  return <h1>Профіль</h1>;
}

function ProtectedRoute() {
  const { isAuthenticated, isLoading } = useAuth();
  const location = useLocation();

  if (isLoading) {
    return <p>Перевірка автентифікації...</p>;
  }

  if (!isAuthenticated) {
    return (
      <Navigate
        to="/login"
        replace
        state={{ from: location }}
      />
    );
  }

  return <Outlet />;
}

{isAuthenticated && <Link to="/profile">Профіль</Link>}

function ProtectedRoute() {
  const { isAuthenticated } = useAuth();

  if (!isAuthenticated) {
    return <Navigate to="/login" />;
  }

  return <Outlet />;
}

const from = location.state?.from?.pathname || "/dashboard";