@hexclave/next 1.0.2 → 1.0.5

package/src/components-page/cli-auth-confirm.test.tsx

@@ -0,0 +1,204 @@
+
+//===========================================
+// THIS FILE IS AUTO-GENERATED FROM TEMPLATE. DO NOT EDIT IT DIRECTLY UNLESS YOU ALSO EDIT THE CORRESPONDING FILE IN packages/template
+//===========================================
+// @vitest-environment jsdom
+
+import { runAsynchronously } from "@hexclave/shared/dist/utils/promises";
+import React, { act } from "react";
+import { createRoot, type Root } from "react-dom/client";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import type { StackClientApp } from "../lib/hexclave-app/apps/interfaces/client-app";
+import { hexclaveAppInternalsSymbol } from "../lib/hexclave-app/common";
+import { HexclaveContext } from "../providers/hexclave-context";
+import { useCliAuthConfirmation } from "./cli-auth-confirm";
+
+const previousActEnvironment = Reflect.get(globalThis, "IS_REACT_ACT_ENVIRONMENT");
+
+function responseJson(data: unknown, init?: ResponseInit) {
+  return new Response(JSON.stringify(data), {
+    status: init?.status ?? 200,
+    headers: { "Content-Type": "application/json" },
+  });
+}
+
+function createAppTestDouble(options: {
+  user: unknown,
+  sendRequest: (path: string, requestOptions: RequestInit) => Promise<Response>,
+  signInWithTokens?: (tokens: { accessToken: string, refreshToken: string }) => Promise<void>,
+  redirectToSignIn?: (options: { replace: true }) => Promise<void>,
+  redirectToSignUp?: (options: { replace: true }) => Promise<void>,
+}) {
+  const app = {
+    useUser: () => options.user,
+    redirectToSignIn: options.redirectToSignIn ?? vi.fn(async () => {}),
+    redirectToSignUp: options.redirectToSignUp ?? vi.fn(async () => {}),
+    [hexclaveAppInternalsSymbol]: {
+      sendRequest: options.sendRequest,
+      signInWithTokens: options.signInWithTokens ?? vi.fn(async () => {}),
+    },
+  };
+
+  // This test double intentionally implements only the StackClientApp surface
+  // that useCliAuthConfirmation touches.
+  return app as unknown as StackClientApp<true>;
+}
+
+function HookProbe() {
+  const cliAuth = useCliAuthConfirmation();
+  return (
+    <>
+      <div data-testid="status">{cliAuth.status}</div>
+      <div data-testid="error">{cliAuth.error?.message}</div>
+      <button type="button" onClick={() => runAsynchronously(cliAuth.authorize)}>authorize</button>
+      <button onClick={cliAuth.retry}>retry</button>
+    </>
+  );
+}
+
+let root: Root | null = null;
+let container: HTMLDivElement | null = null;
+
+async function renderWithApp(app: StackClientApp<true>) {
+  container = document.createElement("div");
+  document.body.append(container);
+  root = createRoot(container);
+  await act(async () => {
+    root?.render(
+      <HexclaveContext.Provider value={{ app }}>
+        <HookProbe />
+      </HexclaveContext.Provider>
+    );
+  });
+}
+
+function getByTestId(testId: string): HTMLElement {
+  const element = container?.querySelector(`[data-testid="${testId}"]`);
+  if (!(element instanceof HTMLElement)) {
+    throw new Error(`Could not find test element ${testId}`);
+  }
+  return element;
+}
+
+function getButton(label: string): HTMLButtonElement {
+  const button = [...container?.querySelectorAll("button") ?? []]
+    .find((element) => element.textContent === label);
+  if (!(button instanceof HTMLButtonElement)) {
+    throw new Error(`Could not find button ${label}`);
+  }
+  return button;
+}
+
+describe("useCliAuthConfirmation", () => {
+  beforeEach(() => {
+    Reflect.set(globalThis, "IS_REACT_ACT_ENVIRONMENT", true);
+  });
+
+  afterEach(() => {
+    act(() => {
+      root?.unmount();
+    });
+    container?.remove();
+    root = null;
+    container = null;
+    vi.restoreAllMocks();
+    window.history.replaceState({}, "", "/");
+    Reflect.set(globalThis, "IS_REACT_ACT_ENVIRONMENT", previousActEnvironment);
+  });
+
+  it("completes CLI auth with the current user's refresh token", async () => {
+    window.history.replaceState({}, "", "/handler/cli-auth-confirm?login_code=login-code");
+    const getTokens = vi.fn(async () => ({ refreshToken: "refresh-token" }));
+    const sendRequest = vi.fn(async (_path: string, _requestOptions: RequestInit) => new Response(null, { status: 200 }));
+    const app = createAppTestDouble({
+      user: { currentSession: { getTokens } },
+      sendRequest,
+    });
+
+    await renderWithApp(app);
+    await act(async () => {
+      getButton("authorize").click();
+    });
+
+    expect(getByTestId("status").textContent).toBe("success");
+    expect(getTokens).toHaveBeenCalledOnce();
+    expect(sendRequest).toHaveBeenCalledOnce();
+    expect(sendRequest.mock.calls[0][0]).toBe("/auth/cli/complete");
+    expect(JSON.parse(String(sendRequest.mock.calls[0][1].body))).toMatchInlineSnapshot(`
+      {
+        "login_code": "login-code",
+        "refresh_token": "refresh-token",
+      }
+    `);
+  });
+
+  it("ignores duplicate authorize clicks before React re-renders", async () => {
+    window.history.replaceState({}, "", "/handler/cli-auth-confirm?login_code=login-code");
+    const getTokens = vi.fn(async () => ({ refreshToken: "refresh-token" }));
+    const sendRequest = vi.fn(async (_path: string, _requestOptions: RequestInit) => new Response(null, { status: 200 }));
+    const app = createAppTestDouble({
+      user: { currentSession: { getTokens } },
+      sendRequest,
+    });
+
+    await renderWithApp(app);
+    await act(async () => {
+      const authorizeButton = getButton("authorize");
+      authorizeButton.click();
+      authorizeButton.click();
+    });
+
+    expect(sendRequest).toHaveBeenCalledOnce();
+  });
+
+  it("claims anonymous CLI sessions before redirecting to sign-up", async () => {
+    window.history.replaceState({}, "", "/handler/cli-auth-confirm?login_code=login-code");
+    const signInWithTokens = vi.fn(async (_tokens: { accessToken: string, refreshToken: string }) => {});
+    const redirectToSignUp = vi.fn(async (_options: { replace: true }) => {});
+    const sendRequest = vi.fn(async (_path: string, _requestOptions: RequestInit) => new Response(null, { status: 200 }))
+      .mockResolvedValueOnce(responseJson({ cli_session_state: "anonymous" }))
+      .mockResolvedValueOnce(responseJson({ access_token: "access-token", refresh_token: "refresh-token" }));
+    const app = createAppTestDouble({
+      user: null,
+      sendRequest,
+      signInWithTokens,
+      redirectToSignUp,
+    });
+
+    await renderWithApp(app);
+    await act(async () => {
+      getButton("authorize").click();
+    });
+
+    expect(redirectToSignUp).toHaveBeenCalledWith({ replace: true });
+    expect(signInWithTokens).toHaveBeenCalledWith({
+      accessToken: "access-token",
+      refreshToken: "refresh-token",
+    });
+    expect(sessionStorage.getItem("hexclave-cli-auth-confirmed")).toBe("login-code");
+    expect(sendRequest.mock.calls.map(call => JSON.parse(String(call[1].body)))).toMatchInlineSnapshot(`
+      [
+        {
+          "login_code": "login-code",
+          "mode": "check",
+        },
+        {
+          "login_code": "login-code",
+          "mode": "claim-anon-session",
+        },
+      ]
+    `);
+  });
+
+  it("reports invalid when the login code is missing", async () => {
+    window.history.replaceState({}, "", "/handler/cli-auth-confirm");
+    const app = createAppTestDouble({
+      user: null,
+      sendRequest: vi.fn(async (_path: string, _requestOptions: RequestInit) => new Response(null, { status: 200 })),
+    });
+
+    await renderWithApp(app);
+
+    expect(getByTestId("status").textContent).toBe("invalid");
+  });
+});

package/src/components-page/cli-auth-confirm.tsx

@@ -0,0 +1,278 @@
+'use client';
+
+
+//===========================================
+// THIS FILE IS AUTO-GENERATED FROM TEMPLATE. DO NOT EDIT IT DIRECTLY UNLESS YOU ALSO EDIT THE CORRESPONDING FILE IN packages/template
+//===========================================
+
+import { runAsynchronouslyWithAlert } from "@hexclave/shared/dist/utils/promises";
+import { Typography } from "@hexclave/ui";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { MessageCard } from "../components/message-cards/message-card";
+import { useTranslation } from "../lib/translations";
+import { hexclaveAppInternalsSymbol } from "../lib/hexclave-app/common";
+import type { StackClientApp } from "../lib/hexclave-app/apps/interfaces/client-app";
+import { useStackApp } from "../lib/hooks";
+
+async function postCliAuthComplete(app: StackClientApp, body: Record<string, unknown>) {
+  return await app[hexclaveAppInternalsSymbol].sendRequest("/auth/cli/complete", {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify(body),
+  });
+}
+
+async function ensureCliCompleteOk(result: Response) {
+  if (!result.ok) {
+    throw new Error(`Authorization failed: ${result.status} ${await result.text()}`);
+  }
+}
+
+async function completeCliAuthWithRefreshToken(app: StackClientApp, loginCode: string, refreshToken: string) {
+  const result = await postCliAuthComplete(app, { login_code: loginCode, refresh_token: refreshToken });
+  await ensureCliCompleteOk(result);
+}
+
+// Hexclave rebrand: sessionStorage key — straight rename (per-tab, low TTL).
+const CLI_AUTH_CONFIRMED_KEY = "hexclave-cli-auth-confirmed";
+
+function markConfirmed(loginCode: string) {
+  sessionStorage.setItem(CLI_AUTH_CONFIRMED_KEY, loginCode);
+}
+
+function isConfirmed(loginCode: string): boolean {
+  return sessionStorage.getItem(CLI_AUTH_CONFIRMED_KEY) === loginCode;
+}
+
+function clearConfirmed() {
+  sessionStorage.removeItem(CLI_AUTH_CONFIRMED_KEY);
+}
+
+function getError(err: unknown): Error {
+  return err instanceof Error ? err : new Error(String(err));
+}
+
+function getObjectField(data: unknown, fieldName: string): unknown {
+  return typeof data === "object" && data !== null && fieldName in data
+    ? data[fieldName as keyof typeof data]
+    : undefined;
+}
+
+function getStringField(data: unknown, fieldName: string): string | undefined {
+  const value = getObjectField(data, fieldName);
+  return typeof value === "string" ? value : undefined;
+}
+
+export type CliAuthConfirmationStatus =
+  | "idle"
+  | "invalid"
+  | "authorizing"
+  | "redirecting"
+  | "success"
+  | "error";
+
+export type CliAuthConfirmationState = {
+  status: CliAuthConfirmationStatus,
+  loginCode: string | null,
+  error: Error | null,
+  isLoading: boolean,
+  authorize: () => Promise<void>,
+  retry: () => void,
+};
+
+export function useCliAuthConfirmation(): CliAuthConfirmationState {
+  const app = useStackApp();
+  const user = app.useUser({ includeRestricted: true });
+  const [status, setStatus] = useState<Exclude<CliAuthConfirmationStatus, "invalid">>("idle");
+  const [error, setError] = useState<Error | null>(null);
+  const autoCompleteRef = useRef(false);
+  const authorizeInProgressRef = useRef(false);
+  const [loginCode] = useState(() => {
+    if (typeof window === 'undefined') return null;
+    return new URLSearchParams(window.location.search).get("login_code");
+  });
+  const [confirmed] = useState(() => {
+    if (typeof window === 'undefined') return false;
+    return loginCode != null && isConfirmed(loginCode);
+  });
+
+  const completeWithCurrentUser = useCallback(async () => {
+    if (!loginCode) {
+      throw new Error("Missing login code in URL parameters");
+    }
+    if (!user) {
+      throw new Error("Cannot complete CLI authorization without a signed-in user");
+    }
+    const refreshToken = (await user.currentSession.getTokens()).refreshToken;
+    if (!refreshToken) {
+      throw new Error("Could not retrieve session token");
+    }
+    await completeCliAuthWithRefreshToken(app, loginCode, refreshToken);
+  }, [app, loginCode, user]);
+
+  useEffect(() => {
+    if (!confirmed || !user || autoCompleteRef.current) {
+      return;
+    }
+    autoCompleteRef.current = true;
+    runAsynchronouslyWithAlert(async () => {
+      setStatus("authorizing");
+      try {
+        await completeWithCurrentUser();
+        clearConfirmed();
+        setStatus("success");
+      } catch (err) {
+        setError(getError(err));
+        setStatus("error");
+      }
+    });
+  }, [confirmed, user, completeWithCurrentUser]);
+
+  const authorize = useCallback(async () => {
+    if (authorizeInProgressRef.current) {
+      return;
+    }
+    authorizeInProgressRef.current = true;
+
+    try {
+      if (!loginCode) {
+        setError(new Error("Missing login code in URL parameters"));
+        setStatus("error");
+        return;
+      }
+
+      setError(null);
+      setStatus("authorizing");
+      if (user) {
+        await completeWithCurrentUser();
+        clearConfirmed();
+        setStatus("success");
+        return;
+      }
+
+      const checkResult = await postCliAuthComplete(app, { login_code: loginCode, mode: "check" });
+      if (!checkResult.ok) {
+        throw new Error(`Failed to verify login code: ${checkResult.status} ${await checkResult.text()}`);
+      }
+      const checkData: unknown = await checkResult.json();
+      const cliSessionState = getStringField(checkData, "cli_session_state") ?? null;
+
+      if (cliSessionState === "anonymous") {
+        const claimResult = await postCliAuthComplete(app, { login_code: loginCode, mode: "claim-anon-session" });
+
+        if (!claimResult.ok) {
+          throw new Error(`Failed to claim anonymous session: ${claimResult.status} ${await claimResult.text()}`);
+        }
+
+        const tokens: unknown = await claimResult.json();
+        const accessToken = getStringField(tokens, "access_token");
+        const refreshToken = getStringField(tokens, "refresh_token");
+        if (!accessToken || !refreshToken) {
+          throw new Error("Anonymous CLI session claim did not return tokens");
+        }
+        await app[hexclaveAppInternalsSymbol].signInWithTokens({
+          accessToken,
+          refreshToken,
+        });
+        markConfirmed(loginCode);
+        setStatus("redirecting");
+        await app.redirectToSignUp({ replace: true });
+        return;
+      }
+
+      markConfirmed(loginCode);
+      setStatus("redirecting");
+      await app.redirectToSignIn({ replace: true });
+    } catch (err) {
+      setError(getError(err));
+      setStatus("error");
+    } finally {
+      authorizeInProgressRef.current = false;
+    }
+  }, [app, completeWithCurrentUser, loginCode, user]);
+
+  const retry = useCallback(() => {
+    setError(null);
+    autoCompleteRef.current = false;
+    setStatus("idle");
+  }, []);
+
+  const visibleStatus = loginCode == null ? "invalid" : status;
+  return {
+    status: visibleStatus,
+    loginCode,
+    error,
+    isLoading: visibleStatus === "authorizing" || visibleStatus === "redirecting",
+    authorize,
+    retry,
+  };
+}
+
+export function CliAuthConfirmation({ fullPage = true }: { fullPage?: boolean }) {
+  const { t } = useTranslation();
+  const cliAuth = useCliAuthConfirmation();
+
+  if (cliAuth.status === "success") {
+    return (
+      <MessageCard title={t("CLI Authorization Successful")} fullPage={fullPage}>
+        <Typography>
+          {t("The CLI application has been authorized successfully. You can close this window and return to the command line.")}
+        </Typography>
+      </MessageCard>
+    );
+  }
+
+  if (cliAuth.status === "error") {
+    return (
+      <MessageCard
+        title={t("Authorization Failed")}
+        fullPage={fullPage}
+        primaryButtonText={t("Try Again")}
+        primaryAction={cliAuth.retry}
+      >
+        <Typography className="text-red-600">
+          {t("Failed to authorize the CLI application:")}
+        </Typography>
+        <Typography className="text-red-600">
+          {cliAuth.error?.message}
+        </Typography>
+      </MessageCard>
+    );
+  }
+
+  if (cliAuth.status === "invalid") {
+    return (
+      <MessageCard title={t("Invalid CLI Authorization Link")} fullPage={fullPage}>
+        <Typography className="text-red-600">
+          {t("This CLI authorization link is missing a login code. Please return to the command line and start the login process again.")}
+        </Typography>
+      </MessageCard>
+    );
+  }
+
+  if (cliAuth.status === "authorizing" || cliAuth.status === "redirecting") {
+    return (
+      <MessageCard title={t("Completing Authorization...")} fullPage={fullPage}>
+        <Typography>
+          {t("Finishing up the CLI authorization...")}
+        </Typography>
+      </MessageCard>
+    );
+  }
+
+  return (
+    <MessageCard
+      title={t("Authorize CLI Application")}
+      fullPage={fullPage}
+      primaryButtonText={cliAuth.isLoading ? t("Authorizing...") : t("Authorize")}
+      primaryAction={cliAuth.authorize}
+    >
+      <Typography>
+        {t("A command line application is requesting access to your account. Click the button below to authorize it.")}
+      </Typography>
+      <Typography variant="destructive">
+        {t("WARNING: Make sure you trust the command line application, as it will gain access to your account. If you did not initiate this request, you can close this page and ignore it. We will never send you this link via email or any other means.")}
+      </Typography>
+    </MessageCard>
+  );
+}

package/src/components-page/email-verification.tsx

@@ -0,0 +1,76 @@
+'use client';
+
+
+//===========================================
+// THIS FILE IS AUTO-GENERATED FROM TEMPLATE. DO NOT EDIT IT DIRECTLY UNLESS YOU ALSO EDIT THE CORRESPONDING FILE IN packages/template
+//===========================================
+
+import { KnownErrors } from "@hexclave/shared";
+import { throwErr } from "@hexclave/shared/dist/utils/errors";
+import React from "react";
+import { useStackApp, useUser } from "..";
+import { MessageCard } from "../components/message-cards/message-card";
+import { useTranslation } from "../lib/translations";
+
+export function EmailVerification(props: {
+  searchParams?: Record<string, string>,
+  fullPage?: boolean,
+}) {
+  const { t } = useTranslation();
+  const hexclaveApp = useStackApp();
+  const user = useUser();
+  const [result, setResult] = React.useState<Awaited<ReturnType<typeof hexclaveApp.verifyEmail>> | null>(null);
+
+  const invalidJsx = (
+    <MessageCard title={t("Invalid Verification Link")} fullPage={!!props.fullPage}>
+      <p>{t("Please check if you have the correct link. If you continue to have issues, please contact support.")}</p>
+    </MessageCard>
+  );
+
+  const expiredJsx = (
+    <MessageCard title={t("Expired Verification Link")} fullPage={!!props.fullPage}>
+      <p>{t("Your email verification link has expired. Please request a new verification link from your account settings.")}</p>
+    </MessageCard>
+  );
+
+  if (!props.searchParams?.code) {
+    return invalidJsx;
+  }
+
+  if (!result) {
+    return <MessageCard
+      title={t("Do you want to verify your email?")}
+      fullPage={!!props.fullPage}
+      primaryButtonText={t("Verify")}
+      primaryAction={async () => {
+        const result = await hexclaveApp.verifyEmail(props.searchParams?.code || throwErr("No verification code provided"));
+        setResult(result);
+      }}
+      secondaryButtonText={t("Cancel")}
+      secondaryAction={async () => {
+        await hexclaveApp.redirectToHome();
+      }}
+    />;
+  } else {
+    if (result.status === 'error') {
+      if (KnownErrors.VerificationCodeNotFound.isInstance(result.error)) {
+        return invalidJsx;
+      } else if (KnownErrors.VerificationCodeExpired.isInstance(result.error)) {
+        return expiredJsx;
+      } else if (KnownErrors.VerificationCodeAlreadyUsed.isInstance(result.error)) {
+        // everything fine, continue
+      } else {
+        throw result.error;
+      }
+    }
+
+    return <MessageCard
+      title={t("You email has been verified!")}
+      fullPage={!!props.fullPage}
+      primaryButtonText={t("Go home")}
+      primaryAction={async () => {
+        await hexclaveApp.redirectToHome();
+      }}
+    />;
+  }
+}

package/src/components-page/error-page.tsx

@@ -0,0 +1,105 @@
+'use client';
+
+
+//===========================================
+// THIS FILE IS AUTO-GENERATED FROM TEMPLATE. DO NOT EDIT IT DIRECTLY UNLESS YOU ALSO EDIT THE CORRESPONDING FILE IN packages/template
+//===========================================
+
+import { KnownError, KnownErrors } from "@hexclave/shared";
+import { Typography } from "@hexclave/ui";
+import { useStackApp } from "..";
+import { KnownErrorMessageCard } from "../components/message-cards/known-error-message-card";
+import { MessageCard } from "../components/message-cards/message-card";
+import { PredefinedMessageCard } from "../components/message-cards/predefined-message-card";
+import { useTranslation } from "../lib/translations";
+
+
+export function ErrorPage(props: { fullPage?: boolean, searchParams: Record<string, string> }) {
+  const { t } = useTranslation();
+  const hexclaveApp = useStackApp();
+  const errorCode = props.searchParams.errorCode;
+  const message = props.searchParams.message;
+  const details = props.searchParams.details;
+
+  const unknownErrorCard = <PredefinedMessageCard type='unknownError' fullPage={!!props.fullPage} />;
+
+  if (!errorCode || !message) {
+    return unknownErrorCard;
+  }
+
+  let error;
+  try {
+    const detailJson = details ? JSON.parse(details) : {};
+    error = KnownError.fromJson({ code: errorCode, message, details: detailJson });
+  } catch (e) {
+    return unknownErrorCard;
+  }
+
+  if (KnownErrors.OAuthConnectionAlreadyConnectedToAnotherUser.isInstance(error)) {
+    // TODO: add "Connect a different account" button
+    return (
+      <MessageCard
+        title={t("Failed to connect account")}
+        fullPage={!!props.fullPage}
+        primaryButtonText={t("Go Home")}
+        primaryAction={() => hexclaveApp.redirectToHome()}
+      >
+        <Typography>
+          {t("This account is already connected to another user. Please connect a different account.")}
+        </Typography>
+      </MessageCard>
+    );
+  }
+
+  if (KnownErrors.UserAlreadyConnectedToAnotherOAuthConnection.isInstance(error)) {
+    // TODO: add "Connect again" button
+    return (
+      <MessageCard
+        title={t("Failed to connect account")}
+        fullPage={!!props.fullPage}
+        primaryButtonText={t("Go Home")}
+        primaryAction={() => hexclaveApp.redirectToHome()}
+      >
+        <Typography>
+          {t("The user is already connected to another OAuth account. Did you maybe selected the wrong account on the OAuth provider page?")}
+        </Typography>
+      </MessageCard>
+    );
+  }
+
+  if (KnownErrors.OAuthProviderAccessDenied.isInstance(error)) {
+    return (
+      <MessageCard
+        title={t("OAuth provider access denied")}
+        fullPage={!!props.fullPage}
+        primaryButtonText={t("Sign in again")}
+        primaryAction={() => hexclaveApp.redirectToSignIn()}
+        secondaryButtonText={t("Go Home")}
+        secondaryAction={() => hexclaveApp.redirectToHome()}
+      >
+        <Typography>
+          {t("The sign-in operation has been cancelled or denied. Please try again.")}
+        </Typography>
+      </MessageCard>
+    );
+  }
+
+  if (KnownErrors.OAuthProviderTemporarilyUnavailable.isInstance(error)) {
+    return (
+      <MessageCard
+        title={t("OAuth provider is temporarily unavailable")}
+        fullPage={!!props.fullPage}
+        primaryButtonText={t("Try again")}
+        primaryAction={() => hexclaveApp.redirectToSignIn()}
+        secondaryButtonText={t("Go Home")}
+        secondaryAction={() => hexclaveApp.redirectToHome()}
+      >
+        <Typography>
+          {t("The OAuth provider could not complete sign-in right now. Please try again in a moment.")}
+        </Typography>
+      </MessageCard>
+    );
+  }
+
+  return <KnownErrorMessageCard error={error} fullPage={!!props.fullPage} />;
+}