Render MFA alternatives on external action waiting screen

packages/demo/src/States.tsx

@@ -70,6 +70,7 @@ type StateName =
   | "awaiting_input_full"
   | "awaiting_input_mfa"
   | "awaiting_external_action"
+  | "awaiting_external_action_multi"
   | "submitting"
   | "success"
   | "expired"
@@ -83,6 +84,7 @@ const allStates: StateName[] = [
   "awaiting_input_full",
   "awaiting_input_mfa",
   "awaiting_external_action",
+  "awaiting_external_action_multi",
   "submitting",
   "success",
   "expired",
@@ -169,7 +171,23 @@ export function States() {
         );
       case "awaiting_external_action":
         return (
-          <ExternalActionWaiting message="Check your phone for a push notification" />
+          <ExternalActionWaiting
+            message="Check your phone for a push notification"
+            mfaOptions={[{ type: "switch", label: "Try another way" }]}
+            onMFASelect={() => {}}
+          />
+        );
+      case "awaiting_external_action_multi":
+        return (
+          <ExternalActionWaiting
+            message="Open the Gmail app on Apple iPhone 14 Pro Max and tap Yes on the prompt to verify it's you"
+            mfaOptions={[
+              { type: "totp", label: "Use authenticator app" },
+              { type: "sms", label: "Get a code via SMS" },
+              { type: "switch", label: "Try another way" },
+            ]}
+            onMFASelect={() => {}}
+          />
         );
       case "submitting":
         return (

packages/managed-auth-react/src/KernelManagedAuth.tsx

@@ -113,6 +113,9 @@ function KernelManagedAuthInner({
     return (
       <ExternalActionWaiting
         message={state?.external_action_message ?? undefined}
+        mfaOptions={state?.mfa_options ?? []}
+        onMFASelect={submitMFA}
+        isLoading={isSubmitting}
       />
     );
   }

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

@@ -1,14 +1,55 @@
 import { useSlot } from "../appearance/context";
 import { useLocalization } from "../localization/context";
-import { FingerprintIcon, KeyIcon, SmartphoneIcon } from "./icons";
+import type { MFAOption, MFAType } from "../lib/types";
+import { Button } from "./primitives/Button";
+import {
+  FingerprintIcon,
+  KeyIcon,
+  MailIcon,
+  PhoneIcon,
+  RepeatIcon,
+  ShieldCheckIcon,
+  SmartphoneIcon,
+} from "./icons";
+
+function getMFAIcon(type: MFAType) {
+  switch (type) {
+    case "sms":
+      return <SmartphoneIcon />;
+    case "call":
+      return <PhoneIcon />;
+    case "email":
+      return <MailIcon />;
+    case "totp":
+      return <KeyIcon />;
+    case "push":
+      return <ShieldCheckIcon />;
+    case "password":
+      return <FingerprintIcon />;
+    case "switch":
+      return <RepeatIcon />;
+    default:
+      return <KeyIcon />;
+  }
+}
 
 interface ExternalActionWaitingProps {
   message?: string | null;
+  mfaOptions?: MFAOption[];
+  onMFASelect?: (mfaType: MFAType) => void;
+  isLoading?: boolean;
 }
 
-export function ExternalActionWaiting({ message }: ExternalActionWaitingProps) {
+export function ExternalActionWaiting({
+  message,
+  mfaOptions = [],
+  onMFASelect,
+  isLoading,
+}: ExternalActionWaitingProps) {
   const slot = useSlot();
   const l = useLocalization();
+  const hasMfaOptions = mfaOptions.length > 0 && onMFASelect;
+
   return (
     <div className="kma-step kma-step--center kma-external-action">
       <div className="kma-step__icon-wrap">
@@ -45,6 +86,33 @@ export function ExternalActionWaiting({ message }: ExternalActionWaitingProps) {
       </div>
 
       <p className="kma-loading-hint">{l.externalActionWaiting}</p>
+
+      {hasMfaOptions && (
+        <div className="kma-external-action__alternatives">
+          {mfaOptions.map((option, idx) => (
+            <Button
+              key={idx}
+              variant="secondary"
+              slotKey="mfaOption"
+              className="kma-option"
+              onClick={() => onMFASelect(option.type)}
+              disabled={isLoading}
+            >
+              <span
+                {...slot("mfaOptionIcon", "kma-option__icon")}
+                aria-hidden="true"
+              >
+                {getMFAIcon(option.type)}
+              </span>
+              <div className="kma-option__text">
+                <div {...slot("mfaOptionLabel", "kma-option__label")}>
+                  {option.label || l.mfaTypeLabels[option.type] || option.type}
+                </div>
+              </div>
+            </Button>
+          ))}
+        </div>
+      )}
     </div>
   );
 }

packages/managed-auth-react/src/styles/styles.css

@@ -931,6 +931,11 @@
   }
 }
 
+.kma-external-action__alternatives {
+  width: 100%;
+  padding: 0 1.5rem;
+}
+
 .kma-bouncing-dots {
   display: flex;
   justify-content: center;