Merge remote-tracking branch 'origin/main' into hypeship/render-field-input-mode

Author: masnwilliams

packages/managed-auth-react/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @onkernel/managed-auth-react
 
+## 0.5.2
+
+### Patch Changes
+
+- [#27](https://github.com/kernel/managed-auth-react/pull/27) [`63cac3e`](https://github.com/kernel/managed-auth-react/commit/63cac3efcba043f8762be5b0f54e3dc1680d2cb3) Thanks [@masnwilliams](https://github.com/masnwilliams)! - Render typed reauthentication blockers and rejected authenticator codes with specific recovery guidance.
+
 ## 0.5.1
 
 ### Patch Changes

packages/managed-auth-react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@onkernel/managed-auth-react",
-  "version": "0.5.1",
+  "version": "0.5.2",
   "description": "React component library for Kernel managed auth — one-component drop-in with a Clerk-style appearance API",
   "license": "MIT",
   "author": "Kernel Technologies, Inc.",

packages/managed-auth-react/src/components/StepError.test.tsx

@@ -0,0 +1,43 @@
+import { describe, expect, test } from "bun:test";
+import { errorDisplayForCode } from "./StepError";
+
+describe("errorDisplayForCode", () => {
+  test("renders typed challenge outcomes with context-neutral copy", () => {
+    const cases = [
+      ["totp_required", "Authenticator code required"],
+      ["sms_code_required", "SMS code required"],
+      ["email_code_required", "Email code required"],
+      ["account_choice_required", "Account selection required"],
+      ["customer_input_required", "Additional input required"],
+      ["external_action_required", "External action required"],
+    ];
+
+    for (const [code, title] of cases) {
+      const display = errorDisplayForCode(code);
+      expect(display?.title).toBe(title);
+      expect(display?.description.toLowerCase()).not.toContain("reauth");
+    }
+  });
+
+  test("does not infer TOTP secret availability", () => {
+    expect(errorDisplayForCode("totp_required")?.description).toBe(
+      "An authenticator code is required.",
+    );
+  });
+
+  test("uses customer-facing copy for additional input", () => {
+    expect(errorDisplayForCode("customer_input_required")?.description).toBe(
+      "Additional information is required before login can continue.",
+    );
+  });
+
+  test("distinguishes a rejected authenticator code from invalid credentials", () => {
+    const display = errorDisplayForCode("totp_code_rejected");
+    const invalidCredentials = errorDisplayForCode("credentials_invalid");
+
+    expect(display?.title).toBe("Authenticator code rejected");
+    expect(display?.description).toContain("Try a fresh code");
+    expect(invalidCredentials).toBeTruthy();
+    expect(display).not.toEqual(invalidCredentials);
+  });
+});

packages/managed-auth-react/src/components/StepError.tsx

@@ -26,6 +26,38 @@ const ERROR_DISPLAY: Record<string, { title: string; description: string }> = {
     title: "Invalid credentials",
     description: "The username or password was not accepted by the website.",
   },
+  totp_required: {
+    title: "Authenticator code required",
+    description: "An authenticator code is required.",
+  },
+  sms_code_required: {
+    title: "SMS code required",
+    description: "A code sent by SMS is required.",
+  },
+  email_code_required: {
+    title: "Email code required",
+    description: "A code sent by email is required.",
+  },
+  account_choice_required: {
+    title: "Account selection required",
+    description:
+      "An account or identity must be selected before login can continue.",
+  },
+  customer_input_required: {
+    title: "Additional input required",
+    description:
+      "Additional information is required before login can continue.",
+  },
+  external_action_required: {
+    title: "External action required",
+    description:
+      "An external action is required to continue. Check your authenticator app, email, or phone for a verification request.",
+  },
+  totp_code_rejected: {
+    title: "Authenticator code rejected",
+    description:
+      "The website rejected the authenticator code. Try a fresh code, or reconnect the account if generated codes keep failing across new code windows.",
+  },
   bot_detected: {
     title: "Verification required",
     description:
@@ -66,6 +98,10 @@ const ERROR_DISPLAY: Record<string, { title: string; description: string }> = {
   },
 };
 
+export function errorDisplayForCode(errorCode?: string) {
+  return errorCode ? ERROR_DISPLAY[errorCode] : undefined;
+}
+
 function extractErrorText(raw: string): string {
   try {
     const parsed = JSON.parse(raw);
@@ -92,7 +128,7 @@ export function StepError({
   const siteName = extractDomainName(targetDomain);
   const [showDetails, setShowDetails] = useState(false);
 
-  const display = errorCode ? ERROR_DISPLAY[errorCode] : undefined;
+  const display = errorDisplayForCode(errorCode);
   const title = display?.title ?? l.errorTitle;
   const description = display?.description ?? l.errorGenericMessage;