Add keyboard-interactive (2FA/MFA) authentication support

App.tsx

@@ -19,6 +19,7 @@ import { Input } from './components/ui/input';
 import { Label } from './components/ui/label';
 import { ToastProvider, toast } from './components/ui/toast';
 import { VaultView, VaultSection } from './components/VaultView';
+import { KeyboardInteractiveModal, KeyboardInteractiveRequest } from './components/KeyboardInteractiveModal';
 import { cn } from './lib/utils';
 import { ConnectionLog, Host, HostProtocol, SerialConfig, TerminalTheme } from './types';
 import { LogView as LogViewType } from './application/state/useSessionState';
@@ -150,6 +151,8 @@ function App({ settings }: { settings: SettingsState }) {
   const [protocolSelectHost, setProtocolSelectHost] = useState<Host | null>(null);
   // Navigation state for VaultView sections
   const [navigateToSection, setNavigateToSection] = useState<VaultSection | null>(null);
+  // Keyboard-interactive authentication state (2FA/MFA)
+  const [keyboardInteractiveRequest, setKeyboardInteractiveRequest] = useState<KeyboardInteractiveRequest | null>(null);
 
   const {
     theme,
@@ -291,6 +294,45 @@ function App({ settings }: { settings: SettingsState }) {
     keys: keys.map((k) => ({ id: k.id, privateKey: k.privateKey })),
   });
 
+  // Keyboard-interactive authentication (2FA/MFA) event listener
+  useEffect(() => {
+    const bridge = netcattyBridge.get();
+    if (!bridge?.onKeyboardInteractive) return;
+
+    const unsubscribe = bridge.onKeyboardInteractive((request) => {
+      console.log('[App] Keyboard-interactive request received:', request);
+      setKeyboardInteractiveRequest({
+        requestId: request.requestId,
+        name: request.name,
+        instructions: request.instructions,
+        prompts: request.prompts,
+        hostname: request.hostname,
+      });
+    });
+
+    return () => {
+      unsubscribe?.();
+    };
+  }, []);
+
+  // Handle keyboard-interactive submit
+  const handleKeyboardInteractiveSubmit = useCallback((requestId: string, responses: string[]) => {
+    const bridge = netcattyBridge.get();
+    if (bridge?.respondKeyboardInteractive) {
+      void bridge.respondKeyboardInteractive(requestId, responses, false);
+    }
+    setKeyboardInteractiveRequest(null);
+  }, []);
+
+  // Handle keyboard-interactive cancel
+  const handleKeyboardInteractiveCancel = useCallback((requestId: string) => {
+    const bridge = netcattyBridge.get();
+    if (bridge?.respondKeyboardInteractive) {
+      void bridge.respondKeyboardInteractive(requestId, [], true);
+    }
+    setKeyboardInteractiveRequest(null);
+  }, []);
+
   // Debounce ref for moveFocus to prevent double-triggering when focus switches
   const lastMoveFocusTimeRef = useRef<number>(0);
   const MOVE_FOCUS_DEBOUNCE_MS = 200;
@@ -989,6 +1031,13 @@ function App({ settings }: { settings: SettingsState }) {
           />
         </Suspense>
       )}
+
+      {/* Global Keyboard-Interactive Authentication Modal (2FA/MFA) */}
+      <KeyboardInteractiveModal
+        request={keyboardInteractiveRequest}
+        onSubmit={handleKeyboardInteractiveSubmit}
+        onCancel={handleKeyboardInteractiveCancel}
+      />
     </div>
   );
 }

application/i18n/locales/en.ts

@@ -1117,6 +1117,16 @@ const en: Messages = {
   'serial.field.configLabelPlaceholder': 'e.g. Arduino Uno',
   'serial.connectAndSave': 'Connect & Save',
   'serial.edit.title': 'Serial Port Settings',
+
+  // Keyboard Interactive Authentication (2FA/MFA)
+  'keyboard.interactive.title': 'Authentication Required',
+  'keyboard.interactive.desc': 'The server requires additional authentication.',
+  'keyboard.interactive.descWithHost': 'The server {hostname} requires additional authentication.',
+  'keyboard.interactive.response': 'Response',
+  'keyboard.interactive.enterCode': 'Enter verification code',
+  'keyboard.interactive.enterResponse': 'Enter response',
+  'keyboard.interactive.submit': 'Submit',
+  'keyboard.interactive.verifying': 'Verifying...',
 };
 
 export default en;

application/i18n/locales/zh-CN.ts

@@ -1106,6 +1106,16 @@ const zhCN: Messages = {
   'serial.field.configLabelPlaceholder': '例如 Arduino Uno',
   'serial.connectAndSave': '连接并保存',
   'serial.edit.title': '串口设置',
+
+  // Keyboard Interactive Authentication (2FA/MFA)
+  'keyboard.interactive.title': '需要验证',
+  'keyboard.interactive.desc': '服务器需要额外的身份验证。',
+  'keyboard.interactive.descWithHost': '服务器 {hostname} 需要额外的身份验证。',
+  'keyboard.interactive.response': '响应',
+  'keyboard.interactive.enterCode': '输入验证码',
+  'keyboard.interactive.enterResponse': '输入响应',
+  'keyboard.interactive.submit': '提交',
+  'keyboard.interactive.verifying': '验证中...',
 };
 
 export default zhCN;

components/KeyboardInteractiveModal.tsx

@@ -0,0 +1,189 @@
+/**
+ * Keyboard Interactive Authentication Modal
+ * Global modal for handling SSH keyboard-interactive authentication (2FA/MFA)
+ * This modal displays prompts from the SSH server and collects user responses.
+ */
+import { Eye, EyeOff, KeyRound, Loader2 } from "lucide-react";
+import React, { useCallback, useEffect, useState } from "react";
+import { useI18n } from "../application/i18n/I18nProvider";
+import { Button } from "./ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from "./ui/dialog";
+import { Input } from "./ui/input";
+import { Label } from "./ui/label";
+
+export interface KeyboardInteractivePrompt {
+  prompt: string;
+  echo: boolean;
+}
+
+export interface KeyboardInteractiveRequest {
+  requestId: string;
+  name: string;
+  instructions: string;
+  prompts: KeyboardInteractivePrompt[];
+  hostname?: string;
+}
+
+interface KeyboardInteractiveModalProps {
+  request: KeyboardInteractiveRequest | null;
+  onSubmit: (requestId: string, responses: string[]) => void;
+  onCancel: (requestId: string) => void;
+}
+
+export const KeyboardInteractiveModal: React.FC<KeyboardInteractiveModalProps> = ({
+  request,
+  onSubmit,
+  onCancel,
+}) => {
+  const { t } = useI18n();
+  const [responses, setResponses] = useState<string[]>([]);
+  const [showPasswords, setShowPasswords] = useState<boolean[]>([]);
+  const [isSubmitting, setIsSubmitting] = useState(false);
+
+  // Reset state when request changes
+  useEffect(() => {
+    if (request) {
+      setResponses(request.prompts.map(() => ""));
+      setShowPasswords(request.prompts.map(() => false));
+      setIsSubmitting(false);
+    }
+  }, [request]);
+
+  const handleResponseChange = useCallback((index: number, value: string) => {
+    setResponses((prev) => {
+      const updated = [...prev];
+      updated[index] = value;
+      return updated;
+    });
+  }, []);
+
+  const toggleShowPassword = useCallback((index: number) => {
+    setShowPasswords((prev) => {
+      const updated = [...prev];
+      updated[index] = !updated[index];
+      return updated;
+    });
+  }, []);
+
+  const handleSubmit = useCallback(() => {
+    if (!request || isSubmitting) return;
+    setIsSubmitting(true);
+    onSubmit(request.requestId, responses);
+  }, [request, responses, onSubmit, isSubmitting]);
+
+  const handleCancel = useCallback(() => {
+    if (!request) return;
+    onCancel(request.requestId);
+  }, [request, onCancel]);
+
+  const handleKeyDown = useCallback(
+    (e: React.KeyboardEvent) => {
+      if (e.key === "Enter" && !isSubmitting) {
+        e.preventDefault();
+        handleSubmit();
+      }
+    },
+    [handleSubmit, isSubmitting]
+  );
+
+  if (!request) return null;
+
+  const title = request.name?.trim() || t("keyboard.interactive.title");
+  const description =
+    request.instructions?.trim() ||
+    (request.hostname
+      ? t("keyboard.interactive.descWithHost", { hostname: request.hostname })
+      : t("keyboard.interactive.desc"));
+
+  return (
+    <Dialog open={!!request} onOpenChange={(open) => !open && handleCancel()}>
+      <DialogContent className="sm:max-w-[425px]" hideCloseButton>
+        <DialogHeader>
+          <div className="flex items-center gap-3 mb-2">
+            <div className="h-10 w-10 rounded-full bg-primary/10 flex items-center justify-center">
+              <KeyRound className="h-5 w-5 text-primary" />
+            </div>
+            <div>
+              <DialogTitle>{title}</DialogTitle>
+              <DialogDescription className="mt-1">
+                {description}
+              </DialogDescription>
+            </div>
+          </div>
+        </DialogHeader>
+
+        <div className="space-y-4 py-2">
+          {request.prompts.map((prompt, index) => {
+            const isPassword = !prompt.echo;
+            const showPassword = showPasswords[index];
+            // Clean up prompt text (remove trailing colon and whitespace)
+            const promptLabel = prompt.prompt.replace(/:\s*$/, "").trim();
+
+            return (
+              <div key={index} className="space-y-2">
+                <Label htmlFor={`ki-prompt-${index}`}>
+                  {promptLabel || t("keyboard.interactive.response")}
+                </Label>
+                <div className="relative">
+                  <Input
+                    id={`ki-prompt-${index}`}
+                    type={isPassword && !showPassword ? "password" : "text"}
+                    value={responses[index] || ""}
+                    onChange={(e) => handleResponseChange(index, e.target.value)}
+                    onKeyDown={handleKeyDown}
+                    placeholder={
+                      isPassword
+                        ? t("keyboard.interactive.enterCode")
+                        : t("keyboard.interactive.enterResponse")
+                    }
+                    className={isPassword ? "pr-10" : undefined}
+                    autoFocus={index === 0}
+                    disabled={isSubmitting}
+                  />
+                  {isPassword && (
+                    <button
+                      type="button"
+                      className="absolute right-3 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground disabled:opacity-50"
+                      onClick={() => toggleShowPassword(index)}
+                      disabled={isSubmitting}
+                    >
+                      {showPassword ? <EyeOff size={16} /> : <Eye size={16} />}
+                    </button>
+                  )}
+                </div>
+              </div>
+            );
+          })}
+        </div>
+
+        <div className="flex items-center justify-between pt-2">
+          <Button
+            variant="secondary"
+            onClick={handleCancel}
+            disabled={isSubmitting}
+          >
+            {t("common.cancel")}
+          </Button>
+          <Button onClick={handleSubmit} disabled={isSubmitting}>
+            {isSubmitting ? (
+              <>
+                <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+                {t("keyboard.interactive.verifying")}
+              </>
+            ) : (
+              t("keyboard.interactive.submit")
+            )}
+          </Button>
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+};
+
+export default KeyboardInteractiveModal;