Authentication System

const handleSubmit = async (e: React.FormEvent) => {
  e.preventDefault();

  if (!username.trim() || !password.trim()) {
    toast({
      title: "Error",
      description: "Por favor completa todos los campos",
      variant: "destructive",
    });
    return;
  }

  setError("");
  setIsSubmitting(true);

  try {
    await login({ username: username.trim(), password });
    toast({
      title: "¡Bienvenido!",
      description: `Sesión iniciada como ${username}`,
    });
    navigate(from, { replace: true });
  } catch (error) {
    const errorMessage =
      error instanceof Error ? error.message : "Credenciales inválidas";
    setError(errorMessage);
  } finally {
    setIsSubmitting(false);
  }
};

const [showPassword, setShowPassword] = useState(false);

<div className="relative">
  <Input
    id="password"
    type={showPassword ? "text" : "password"}
    placeholder="••••••••"
    value={password}
    onChange={(e) => setPassword(e.target.value)}
    disabled={isSubmitting}
    autoComplete="current-password"
  />
  <Button
    type="button"
    variant="ghost"
    size="sm"
    onClick={() => setShowPassword(!showPassword)}
  >
    {showPassword ? (
      <EyeOff className="h-4 w-4 text-muted-foreground" />
    ) : (
      <Eye className="h-4 w-4 text-muted-foreground" />
    )}
  </Button>
</div>

const checkEmailWhitelist = async (email: string): Promise<boolean> => {
  setIsCheckingEmail(true);
  try {
    const response = await fetch(`${API_BASE_URL}/check-email/${email}`);
    return response.ok;
  } catch {
    return false;
  } finally {
    setIsCheckingEmail(false);
  }
};

// Validate whitelist
const isAllowed = await checkEmailWhitelist(email.trim());
if (!isAllowed) {
  setError("Este correo no está autorizado para registrarse");
  toast({
    title: "Email no autorizado",
    description: "Este correo no está en la lista de usuarios autorizados",
    variant: "destructive",
  });
  return;
}

const calculatePasswordStrength = (password: string): number => {
  let strength = 0;
  if (password.length >= 8) strength += 20;
  if (password.length >= 12) strength += 20;
  if (/[a-z]/.test(password) && /[A-Z]/.test(password)) strength += 20;
  if (/\d/.test(password)) strength += 20;
  if (/[^a-zA-Z0-9]/.test(password)) strength += 20;
  return strength;
};

{formData.password && (
  <div className="space-y-2">
    <div className="flex justify-between text-xs">
      <span className="text-muted-foreground">
        Seguridad de la contraseña
      </span>
      <span className="font-medium">
        {passwordStrength < 40
          ? "Débil"
          : passwordStrength < 80
            ? "Regular"
            : "Fuerte"}
      </span>
    </div>
    <Progress value={passwordStrength} className="h-2" />
  </div>
)}

if (!username.trim() || !password.trim()) {
  setError("El usuario y la contraseña son obligatorios");
  return;
}

if (!email.trim() || !/\S+@\S+\.\S+/.test(email)) {
  setError("Ingresa un correo electrónico válido");
  return;
}

if (password !== confirmPassword) {
  setError("Las contraseñas no coinciden");
  return;
}

if (password.length < 8) {
  setError("La contraseña debe tener al menos 8 caracteres");
  return;
}

const ProtectedRoute: React.FC<ProtectedRouteProps> = ({ children }) => {
  const { isAuthenticated, isLoading } = useAuth();
  const location = useLocation();

  if (isLoading) {
    return (
      <div className="min-h-screen flex items-center justify-center bg-background">
        <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-primary"></div>
      </div>
    );
  }

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

  return <>{children}</>;
};

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

// After successful login
navigate(from, { replace: true });

const IdleHandler = () => {
  const navigate = useNavigate();
  const timer = useRef<number | null>(null);

  const handleLogout = useCallback(() => {
    const isLogged = getStoredCredentials();
    if (isLogged) {
      clearCredentials();
      navigate("/login");
      toast.info("Sesión cerrada por inactividad");
    }
  }, [navigate]);

  useEffect(() => {
    const timeout = 15 * 60 * 1000; // 15 minutes

    const resetTimer = () => {
      if (timer.current) window.clearTimeout(timer.current);
      timer.current = window.setTimeout(handleLogout, timeout);
    };

    // Events that reset the counter
    const events = ["mousedown", "keydown", "scroll", "click", "touchstart"];

    events.forEach((e) => window.addEventListener(e, resetTimer));
    resetTimer();

    return () => {
      events.forEach((e) => window.removeEventListener(e, resetTimer));
      if (timer.current) window.clearTimeout(timer.current);
    };
  }, [handleLogout]);

  return null;
};

**Security**:
- Automatic logout on inactivity (15 minutes)
- Basic Auth authentication
- Registration only with whitelisted email
- Strong password validation

await register({
  username: username.trim(),
  email: email.trim(),
  password,
  rol: "ADMIN",
  activo: true,
  fechaCreacion: new Date().toISOString(),
});