@jcjeon/integration-cli 0.2.0

package/apps/web/src/features/auth/api/__tests__/auth.api.test.ts

@@ -0,0 +1,83 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+
+import { getAuthStatus, getClaudeStatus } from "../auth.api";
+
+const mockFetch = vi.fn();
+
+beforeEach(() => { vi.stubGlobal("fetch", mockFetch); });
+afterEach(() => { vi.unstubAllGlobals(); });
+
+function ok(body: unknown) {
+  return Promise.resolve({ ok: true, json: () => Promise.resolve(body) } as Response);
+}
+function err(status: number) {
+  return Promise.resolve({ ok: false, status } as Response);
+}
+
+describe("getAuthStatus", () => {
+  it("returns auth data on success", async () => {
+    const data = { loggedIn: true, authMethod: "claude.ai", apiProvider: "firstParty" };
+    mockFetch.mockReturnValueOnce(ok(data));
+
+    const result = await getAuthStatus();
+
+    expect(result.loggedIn).toBe(true);
+    expect(result.authMethod).toBe("claude.ai");
+    expect(mockFetch).toHaveBeenCalledWith(
+      expect.stringContaining("/agents/claude/auth/status"),
+    );
+  });
+
+  it("returns unauthenticated data when not logged in", async () => {
+    const data = { loggedIn: false, authMethod: "none", apiProvider: "firstParty" };
+    mockFetch.mockReturnValueOnce(ok(data));
+    const result = await getAuthStatus();
+    expect(result.loggedIn).toBe(false);
+  });
+
+  it("throws on HTTP error", async () => {
+    mockFetch.mockReturnValueOnce(err(401));
+    await expect(getAuthStatus()).rejects.toThrow("HTTP 401");
+  });
+
+  it("includes optional fields when present", async () => {
+    const data = {
+      loggedIn: true,
+      authMethod: "claude.ai",
+      apiProvider: "firstParty",
+      email: "user@example.com",
+      orgName: "Acme",
+      subscriptionType: "pro",
+    };
+    mockFetch.mockReturnValueOnce(ok(data));
+    const result = await getAuthStatus();
+    expect(result.email).toBe("user@example.com");
+    expect(result.subscriptionType).toBe("pro");
+  });
+});
+
+describe("getClaudeStatus", () => {
+  it("returns full status on success", async () => {
+    const data = {
+      version: "2.1.0 (Claude Code)",
+      auth: { loggedIn: true, authMethod: "claude.ai", apiProvider: "firstParty" },
+      activeSessions: 3,
+      platform: "darwin arm64",
+    };
+    mockFetch.mockReturnValueOnce(ok(data));
+
+    const result = await getClaudeStatus();
+
+    expect(result.version).toBe("2.1.0 (Claude Code)");
+    expect(result.activeSessions).toBe(3);
+    expect(result.platform).toBe("darwin arm64");
+    expect(mockFetch).toHaveBeenCalledWith(
+      expect.stringContaining("/agents/claude/status"),
+    );
+  });
+
+  it("throws on HTTP error", async () => {
+    mockFetch.mockReturnValueOnce(err(500));
+    await expect(getClaudeStatus()).rejects.toThrow("HTTP 500");
+  });
+});

package/apps/web/src/features/auth/api/auth.api.ts

@@ -0,0 +1,81 @@
+import { SERVER_URL } from "@/lib/constants";
+
+export interface AuthStatus {
+  loggedIn: boolean;
+  authMethod: string;
+  apiProvider: string;
+  email?: string;
+  orgName?: string;
+  subscriptionType?: string;
+}
+
+export interface ClaudeStatus {
+  version: string;
+  auth: AuthStatus;
+  activeSessions: number;
+  platform: string;
+}
+
+export interface GeminiAuthStatus {
+  loggedIn: boolean;
+  authMethod: string;
+  installed: boolean;
+  email?: string;
+}
+
+export async function getAuthStatus(): Promise<AuthStatus> {
+  const res = await fetch(`${SERVER_URL}/agents/claude/auth/status`);
+  if (!res.ok) throw new Error(`HTTP ${res.status}`);
+  return res.json();
+}
+
+export async function getClaudeStatus(): Promise<ClaudeStatus> {
+  const res = await fetch(`${SERVER_URL}/agents/claude/status`);
+  if (!res.ok) throw new Error(`HTTP ${res.status}`);
+  return res.json();
+}
+
+export async function getGeminiAuthStatus(): Promise<GeminiAuthStatus> {
+  const res = await fetch(`${SERVER_URL}/agents/gemini/auth/status`);
+  if (!res.ok) throw new Error(`HTTP ${res.status}`);
+  return res.json();
+}
+
+export async function configureGeminiAuth(
+  authType: "api-key",
+  apiKey: string,
+): Promise<void>;
+export async function configureGeminiAuth(authType: "gca"): Promise<void>;
+export async function configureGeminiAuth(
+  authType: "api-key" | "gca",
+  apiKey?: string,
+): Promise<void> {
+  const res = await fetch(`${SERVER_URL}/agents/gemini/auth/configure`, {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify({ authType, ...(apiKey ? { apiKey } : {}) }),
+  });
+  if (!res.ok) throw new Error(`HTTP ${res.status}`);
+}
+
+// ─── Codex ────────────────────────────────────────────────────────────────────
+
+export interface CodexAuthStatus {
+  installed: boolean;
+  loggedIn: boolean;
+}
+
+export async function getCodexAuthStatus(): Promise<CodexAuthStatus> {
+  const res = await fetch(`${SERVER_URL}/agents/codex/auth/status`);
+  if (!res.ok) throw new Error(`HTTP ${res.status}`);
+  return res.json();
+}
+
+export async function configureCodexAuth(apiKey: string): Promise<void> {
+  const res = await fetch(`${SERVER_URL}/agents/codex/auth/configure`, {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify({ apiKey }),
+  });
+  if (!res.ok) throw new Error(`HTTP ${res.status}`);
+}

package/apps/web/src/features/auth/hooks/__tests__/useClaudeAuth.test.ts

@@ -0,0 +1,166 @@
+import { act, renderHook, waitFor } from "@testing-library/react";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+
+import { extractUrls, useClaudeAuth } from "../useClaudeAuth";
+
+// ─── socket.io-client mock ────────────────────────────────────────────────────
+
+const mockSocket = {
+  on: vi.fn(),
+  emit: vi.fn(),
+  disconnect: vi.fn(),
+};
+
+vi.mock("socket.io-client", () => ({
+  io: vi.fn(() => mockSocket),
+}));
+
+// ─── fetch mock ───────────────────────────────────────────────────────────────
+
+const mockFetch = vi.fn();
+
+beforeEach(() => {
+  vi.stubGlobal("fetch", mockFetch);
+  vi.clearAllMocks();
+  // Default: not logged in
+  mockFetch.mockResolvedValue({
+    ok: true,
+    json: () => Promise.resolve({ loggedIn: false, authMethod: "none", apiProvider: "firstParty" }),
+  });
+});
+
+afterEach(() => {
+  vi.unstubAllGlobals();
+});
+
+// ─── extractUrls ─────────────────────────────────────────────────────────────
+
+describe("extractUrls", () => {
+  it("extracts a single URL", () => {
+    expect(extractUrls("visit https://claude.ai/auth")).toEqual(["https://claude.ai/auth"]);
+  });
+
+  it("extracts multiple URLs and deduplicates", () => {
+    const text = "go to https://a.com and https://a.com or https://b.com";
+    expect(extractUrls(text)).toEqual(["https://a.com", "https://b.com"]);
+  });
+
+  it("returns empty array for text without URLs", () => {
+    expect(extractUrls("no link here")).toEqual([]);
+  });
+
+  it("handles http URLs", () => {
+    expect(extractUrls("http://localhost:3000")).toEqual(["http://localhost:3000"]);
+  });
+});
+
+// ─── useClaudeAuth ────────────────────────────────────────────────────────────
+
+describe("useClaudeAuth", () => {
+  it("starts with authState=checking then resolves to unauthenticated", async () => {
+    const { result } = renderHook(() => useClaudeAuth());
+    expect(result.current.authState).toBe("checking");
+
+    await waitFor(() => expect(result.current.authState).toBe("unauthenticated"));
+  });
+
+  it("resolves to authenticated when loggedIn=true", async () => {
+    mockFetch.mockResolvedValueOnce({
+      ok: true,
+      json: () => Promise.resolve({ loggedIn: true, authMethod: "claude.ai", apiProvider: "firstParty" }),
+    });
+
+    const { result } = renderHook(() => useClaudeAuth());
+
+    await waitFor(() => expect(result.current.authState).toBe("authenticated"));
+  });
+
+  it("falls back to unauthenticated when fetch fails", async () => {
+    mockFetch.mockRejectedValueOnce(new Error("Network error"));
+
+    const { result } = renderHook(() => useClaudeAuth());
+
+    await waitFor(() => expect(result.current.authState).toBe("unauthenticated"));
+  });
+
+  it("starts loginState as idle", async () => {
+    const { result } = renderHook(() => useClaudeAuth());
+    await waitFor(() => expect(result.current.authState).not.toBe("checking"));
+    expect(result.current.loginState).toBe("idle");
+  });
+
+  it("startLogin transitions loginState to pending and connects socket", async () => {
+    const { result } = renderHook(() => useClaudeAuth());
+    await waitFor(() => expect(result.current.authState).not.toBe("checking"));
+
+    act(() => { result.current.startLogin(); });
+
+    expect(result.current.loginState).toBe("pending");
+    expect(mockSocket.on).toHaveBeenCalledWith("connect", expect.any(Function));
+    expect(mockSocket.on).toHaveBeenCalledWith("auth:output", expect.any(Function));
+    expect(mockSocket.on).toHaveBeenCalledWith("auth:done", expect.any(Function));
+  });
+
+  it("ignores duplicate startLogin when already pending", async () => {
+    const { result } = renderHook(() => useClaudeAuth());
+    await waitFor(() => expect(result.current.authState).not.toBe("checking"));
+
+    const { io } = await import("socket.io-client");
+    const mockIo = vi.mocked(io);
+    mockIo.mockClear();
+
+    act(() => { result.current.startLogin(); });
+    act(() => { result.current.startLogin(); }); // second call should be ignored
+
+    expect(mockIo).toHaveBeenCalledTimes(1);
+  });
+
+  it("cancelLogin resets loginState to idle", async () => {
+    const { result } = renderHook(() => useClaudeAuth());
+    await waitFor(() => expect(result.current.authState).not.toBe("checking"));
+
+    act(() => { result.current.startLogin(); });
+    act(() => { result.current.cancelLogin(); });
+
+    expect(result.current.loginState).toBe("idle");
+    expect(mockSocket.disconnect).toHaveBeenCalled();
+  });
+
+  it("auth:done with success=true sets authenticated and done", async () => {
+    const { result } = renderHook(() => useClaudeAuth());
+    await waitFor(() => expect(result.current.authState).not.toBe("checking"));
+
+    act(() => { result.current.startLogin(); });
+
+    // Simulate auth:done event
+    const doneHandler = mockSocket.on.mock.calls.find(([event]) => event === "auth:done")?.[1];
+    act(() => { doneHandler?.({ success: true }); });
+
+    expect(result.current.loginState).toBe("done");
+    expect(result.current.authState).toBe("authenticated");
+  });
+
+  it("auth:done with success=false sets error state", async () => {
+    const { result } = renderHook(() => useClaudeAuth());
+    await waitFor(() => expect(result.current.authState).not.toBe("checking"));
+
+    act(() => { result.current.startLogin(); });
+    const doneHandler = mockSocket.on.mock.calls.find(([event]) => event === "auth:done")?.[1];
+    act(() => { doneHandler?.({ success: false }); });
+
+    expect(result.current.loginState).toBe("error");
+  });
+
+  it("auth:output accumulates text and extracts URLs", async () => {
+    const { result } = renderHook(() => useClaudeAuth());
+    await waitFor(() => expect(result.current.authState).not.toBe("checking"));
+
+    act(() => { result.current.startLogin(); });
+    const outputHandler = mockSocket.on.mock.calls.find(([event]) => event === "auth:output")?.[1];
+
+    act(() => { outputHandler?.({ text: "Open https://claude.ai/auth to login\n" }); });
+
+    expect(result.current.loginOutput).toContain("https://claude.ai/auth");
+    expect(result.current.loginUrls).toContain("https://claude.ai/auth");
+  });
+});

package/apps/web/src/features/auth/hooks/__tests__/useCodexAuth.test.ts

@@ -0,0 +1,127 @@
+import { act, renderHook, waitFor } from "@testing-library/react";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+
+import * as authApi from "../../api/auth.api";
+import { extractDeviceCode, extractUrls, useCodexAuth } from "../useCodexAuth";
+
+vi.mock("../../api/auth.api", () => ({
+  configureCodexAuth: vi.fn(),
+  getCodexAuthStatus: vi.fn(),
+}));
+
+const socketMock = vi.hoisted(() => {
+  const handlers: Record<string, (payload?: unknown) => void> = {};
+  const socket = {
+    on: vi.fn((event: string, handler: (payload?: unknown) => void) => {
+      handlers[event] = handler;
+      return socket;
+    }),
+    emit: vi.fn(),
+    disconnect: vi.fn(),
+  };
+  return {
+    handlers,
+    socket,
+    io: vi.fn(() => socket),
+    reset() {
+      for (const key of Object.keys(handlers)) delete handlers[key];
+      socket.on.mockClear();
+      socket.emit.mockClear();
+      socket.disconnect.mockClear();
+      this.io.mockClear();
+    },
+  };
+});
+
+vi.mock("socket.io-client", () => ({ io: socketMock.io }));
+
+const mockGetStatus = vi.mocked(authApi.getCodexAuthStatus);
+const mockConfigure = vi.mocked(authApi.configureCodexAuth);
+
+beforeEach(() => {
+  mockGetStatus.mockResolvedValue({ installed: true, loggedIn: false });
+});
+
+afterEach(() => {
+  vi.clearAllMocks();
+  socketMock.reset();
+});
+
+describe("Codex auth helpers", () => {
+  it("extracts unique URLs and device code", () => {
+    expect(extractUrls("go https://a.test/path then https://a.test/path")).toEqual(["https://a.test/path"]);
+    expect(extractDeviceCode("Your code is ABCD-123456")).toBe("ABCD-123456");
+    expect(extractDeviceCode("no code")).toBeNull();
+  });
+});
+
+describe("useCodexAuth", () => {
+  it("checks auth status on mount", async () => {
+    const { result } = renderHook(() => useCodexAuth());
+    await waitFor(() => expect(result.current.authState).toBe("unauthenticated"));
+  });
+
+  it("switches login method", async () => {
+    const { result } = renderHook(() => useCodexAuth());
+    await waitFor(() => expect(result.current.authState).toBe("unauthenticated"));
+
+    act(() => { result.current.setLoginMethod("apikey"); });
+    expect(result.current.loginMethod).toBe("apikey");
+  });
+
+  it("saves API key and can reset API key login state", async () => {
+    const { result } = renderHook(() => useCodexAuth());
+
+    await act(async () => { await result.current.saveApiKey("key"); });
+    expect(mockConfigure).toHaveBeenCalledWith("key");
+    expect(result.current.apiKeyLoginState).toBe("done");
+
+    act(() => { result.current.resetApiKeyLogin(); });
+    expect(result.current.apiKeyLoginState).toBe("idle");
+  });
+
+  it("stores config error when API key save fails", async () => {
+    mockConfigure.mockRejectedValueOnce(new Error("bad"));
+    const { result } = renderHook(() => useCodexAuth());
+
+    await act(async () => { await result.current.saveApiKey("bad"); });
+
+    expect(result.current.apiKeyLoginState).toBe("error");
+    expect(result.current.configError).toMatch(/API 키 저장/);
+  });
+
+  it("runs device login, extracts URL and code, and handles done", async () => {
+    const { result } = renderHook(() => useCodexAuth());
+    await waitFor(() => expect(result.current.authState).toBe("unauthenticated"));
+
+    act(() => { result.current.startDeviceLogin(); });
+    act(() => { socketMock.handlers.connect?.(); });
+    expect(socketMock.socket.emit).toHaveBeenCalledWith("auth:login:start");
+
+    act(() => {
+      socketMock.handlers["auth:output"]?.({ text: "Open https://auth.test and enter WXYZ-1234" });
+      socketMock.handlers["auth:done"]?.({ success: true });
+    });
+
+    expect(result.current.loginUrls).toEqual(["https://auth.test"]);
+    expect(result.current.deviceCode).toBe("WXYZ-1234");
+    expect(result.current.loginState).toBe("done");
+    expect(result.current.authState).toBe("authenticated");
+  });
+
+  it("cancels device login and handles disconnect during active login", async () => {
+    const { result } = renderHook(() => useCodexAuth());
+    await waitFor(() => expect(result.current.authState).toBe("unauthenticated"));
+
+    act(() => { result.current.startDeviceLogin(); });
+    act(() => { socketMock.handlers.disconnect?.(); });
+    expect(result.current.loginState).toBe("error");
+
+    act(() => {
+      result.current.startDeviceLogin();
+      result.current.cancelDeviceLogin();
+    });
+    expect(socketMock.socket.emit).toHaveBeenCalledWith("auth:login:cancel");
+    expect(result.current.loginState).toBe("idle");
+  });
+});

package/apps/web/src/features/auth/hooks/__tests__/useGeminiAuth.test.ts

@@ -0,0 +1,120 @@
+import { act, renderHook, waitFor } from "@testing-library/react";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+
+import * as authApi from "../../api/auth.api";
+import { useGeminiAuth } from "../useGeminiAuth";
+
+vi.mock("../../api/auth.api", () => ({
+  configureGeminiAuth: vi.fn(),
+  getGeminiAuthStatus: vi.fn(),
+}));
+
+const socketMock = vi.hoisted(() => {
+  const handlers: Record<string, (payload?: unknown) => void> = {};
+  const socket = {
+    on: vi.fn((event: string, handler: (payload?: unknown) => void) => {
+      handlers[event] = handler;
+      return socket;
+    }),
+    emit: vi.fn(),
+    disconnect: vi.fn(),
+  };
+  return {
+    handlers,
+    socket,
+    io: vi.fn(() => socket),
+    reset() {
+      for (const key of Object.keys(handlers)) delete handlers[key];
+      socket.on.mockClear();
+      socket.emit.mockClear();
+      socket.disconnect.mockClear();
+      this.io.mockClear();
+    },
+  };
+});
+
+vi.mock("socket.io-client", () => ({ io: socketMock.io }));
+
+const mockGetStatus = vi.mocked(authApi.getGeminiAuthStatus);
+const mockConfigure = vi.mocked(authApi.configureGeminiAuth);
+
+beforeEach(() => {
+  mockGetStatus.mockResolvedValue({ installed: true, loggedIn: false, authMethod: "none" });
+});
+
+afterEach(() => {
+  vi.clearAllMocks();
+  socketMock.reset();
+});
+
+describe("useGeminiAuth", () => {
+  it("checks auth status on mount", async () => {
+    const { result } = renderHook(() => useGeminiAuth());
+
+    await waitFor(() => expect(result.current.authState).toBe("unauthenticated"));
+  });
+
+  it("marks not-installed and handles status failures", async () => {
+    mockGetStatus.mockResolvedValueOnce({ installed: false, loggedIn: false, authMethod: "none" });
+    const { result, rerender } = renderHook(() => useGeminiAuth());
+    await waitFor(() => expect(result.current.authState).toBe("not-installed"));
+
+    mockGetStatus.mockRejectedValueOnce(new Error("down"));
+    await act(async () => { await result.current.checkAuth(); });
+    rerender();
+    expect(result.current.authState).toBe("unauthenticated");
+  });
+
+  it("saves API key and authenticates", async () => {
+    const { result } = renderHook(() => useGeminiAuth());
+    await act(async () => { await result.current.saveApiKey("key"); });
+
+    expect(mockConfigure).toHaveBeenCalledWith("api-key", "key");
+    expect(result.current.loginState).toBe("done");
+    expect(result.current.authState).toBe("authenticated");
+  });
+
+  it("stores config error when API key save fails", async () => {
+    mockConfigure.mockRejectedValueOnce(new Error("bad"));
+    const { result } = renderHook(() => useGeminiAuth());
+
+    await act(async () => { await result.current.saveApiKey("bad"); });
+
+    expect(result.current.loginState).toBe("error");
+    expect(result.current.configError).toMatch(/API 키 저장/);
+  });
+
+  it("runs GCA login over socket, extracts URLs, and handles success", async () => {
+    const { result } = renderHook(() => useGeminiAuth());
+    await waitFor(() => expect(result.current.authState).toBe("unauthenticated"));
+
+    act(() => { result.current.startGcaLogin(); });
+    act(() => { socketMock.handlers.connect?.(); });
+    expect(socketMock.socket.emit).toHaveBeenCalledWith("auth:gca:start");
+
+    act(() => {
+      socketMock.handlers["auth:output"]?.({ text: "Open https://example.com/auth\n" });
+      socketMock.handlers["auth:done"]?.({ success: true });
+    });
+
+    expect(result.current.loginUrls).toEqual(["https://example.com/auth"]);
+    expect(result.current.loginState).toBe("done");
+    expect(result.current.authState).toBe("authenticated");
+  });
+
+  it("cancels an active GCA login and resets output", async () => {
+    const { result } = renderHook(() => useGeminiAuth());
+    await waitFor(() => expect(result.current.authState).toBe("unauthenticated"));
+
+    act(() => {
+      result.current.startGcaLogin();
+      socketMock.handlers["auth:output"]?.({ text: "https://example.com" });
+      result.current.cancelLogin();
+    });
+
+    expect(socketMock.socket.emit).toHaveBeenCalledWith("auth:login:cancel");
+    expect(socketMock.socket.disconnect).toHaveBeenCalled();
+    expect(result.current.loginState).toBe("idle");
+    expect(result.current.loginOutput).toBe("");
+  });
+});

package/apps/web/src/features/auth/hooks/useClaudeAuth.ts

@@ -0,0 +1,88 @@
+"use client";
+
+import { useCallback, useEffect, useRef, useState } from "react";
+import { io, type Socket } from "socket.io-client";
+
+import { CLAUDE_WS_NAMESPACE, SERVER_URL } from "@/lib/constants";
+import { getAuthStatus } from "../api/auth.api";
+
+export type AuthState = "checking" | "authenticated" | "unauthenticated";
+export type LoginState = "idle" | "pending" | "done" | "error";
+
+const URL_REGEX = /https?:\/\/[^\s\-"<>\\^`{|}~]+/g;
+
+export function extractUrls(text: string): string[] {
+  return Array.from(new Set(text.match(URL_REGEX) ?? []));
+}
+
+export function useClaudeAuth() {
+  const [authState, setAuthState] = useState<AuthState>("checking");
+  const [loginState, setLoginState] = useState<LoginState>("idle");
+  const [loginOutput, setLoginOutput] = useState("");
+  const [loginUrls, setLoginUrls] = useState<string[]>([]);
+
+  const socketRef = useRef<Socket | null>(null);
+  const outputRef = useRef("");
+  const isLoginActiveRef = useRef(false);
+
+  const checkAuth = useCallback(async () => {
+    setAuthState("checking");
+    try {
+      const data = await getAuthStatus();
+      setAuthState(data.loggedIn ? "authenticated" : "unauthenticated");
+    } catch {
+      setAuthState("unauthenticated");
+    }
+  }, []);
+
+  useEffect(() => { void checkAuth(); }, [checkAuth]);
+
+  const startLogin = useCallback(() => {
+    if (loginState === "pending") return;
+
+    outputRef.current = "";
+    setLoginOutput("");
+    setLoginUrls([]);
+    setLoginState("pending");
+    isLoginActiveRef.current = true;
+
+    const socket = io(`${SERVER_URL}${CLAUDE_WS_NAMESPACE}`, { transports: ["websocket"] });
+    socketRef.current = socket;
+
+    socket.on("connect", () => socket.emit("auth:login:start"));
+
+    socket.on("auth:output", ({ text }: { text: string }) => {
+      outputRef.current += text;
+      setLoginOutput(outputRef.current);
+      setLoginUrls(extractUrls(outputRef.current));
+    });
+
+    socket.on("auth:done", ({ success }: { success: boolean }) => {
+      isLoginActiveRef.current = false;
+      socket.disconnect();
+      socketRef.current = null;
+      setLoginState(success ? "done" : "error");
+      if (success) setAuthState("authenticated");
+    });
+
+    socket.on("disconnect", () => {
+      if (isLoginActiveRef.current) {
+        isLoginActiveRef.current = false;
+        setLoginState("error");
+      }
+    });
+  }, [loginState]);
+
+  const cancelLogin = useCallback(() => {
+    isLoginActiveRef.current = false;
+    socketRef.current?.emit("auth:login:cancel");
+    socketRef.current?.disconnect();
+    socketRef.current = null;
+    setLoginState("idle");
+    setLoginOutput("");
+    setLoginUrls([]);
+    outputRef.current = "";
+  }, []);
+
+  return { authState, loginState, loginOutput, loginUrls, startLogin, cancelLogin, checkAuth };
+}