fix(*): Add MFA Assertion prompt

Author: Ehesp

packages/angular/src/lib/auth/forms/multi-factor-auth-assertion-form.spec.ts

@@ -30,6 +30,9 @@ describe("<fui-multi-factor-auth-assertion-form>", () => {
           mfaSmsVerification: "SMS Verification",
           mfaTotpVerification: "TOTP Verification",
         },
+        prompts: {
+          mfaAssertionFactorPrompt: "Please choose a multi-factor authentication method",
+        },
       };
       return () => mockTranslations[category]?.[key] || `${category}.${key}`;
     });
@@ -68,6 +71,7 @@ describe("<fui-multi-factor-auth-assertion-form>", () => {
       imports: [MultiFactorAuthAssertionFormComponent],
     });
 
+    expect(screen.getByText("Please choose a multi-factor authentication method")).toBeInTheDocument();
     expect(screen.getByRole("button", { name: "SMS Verification" })).toBeInTheDocument();
     expect(screen.getByRole("button", { name: "TOTP Verification" })).toBeInTheDocument();
 

packages/angular/src/lib/auth/forms/multi-factor-auth-assertion-form.ts

@@ -40,7 +40,7 @@ import { ButtonComponent } from "../../components/button";
           <fui-totp-multi-factor-assertion-form [hint]="selectedHint()!" (onSuccess)="onSuccess.emit($event)" />
         }
       } @else {
-        <p>TODO: Select a multi-factor authentication method</p>
+        <p>{{ mfaAssertionFactorPrompt() }}</p>
         @for (hint of resolver().hints; track hint.factorId) {
           @if (hint.factorId === totpFactorId()) {
             <button fui-button (click)="selectHint(hint)">
@@ -78,6 +78,7 @@ export class MultiFactorAuthAssertionFormComponent {
 
   smsVerificationLabel = injectTranslation("labels", "mfaSmsVerification");
   totpVerificationLabel = injectTranslation("labels", "mfaTotpVerification");
+  mfaAssertionFactorPrompt = injectTranslation("prompts", "mfaAssertionFactorPrompt");
 
   selectHint(hint: MultiFactorInfo) {
     this.selectedHint.set(hint);

packages/react/src/auth/forms/multi-factor-auth-assertion-form.test.tsx

@@ -201,6 +201,9 @@ describe("<MultiFactorAuthAssertionForm />", () => {
           mfaTotpVerification: "TOTP Verification",
           mfaSmsVerification: "SMS Verification",
         },
+        prompts: {
+          mfaAssertionFactorPrompt: "Please choose a multi-factor authentication method",
+        },
       }),
     });
     ui.get().setMultiFactorResolver(mockResolver as unknown as MultiFactorResolver);
@@ -211,7 +214,7 @@ describe("<MultiFactorAuthAssertionForm />", () => {
       </CreateFirebaseUIProvider>
     );
 
-    expect(screen.getByText("TODO: Select a multi-factor authentication method")).toBeDefined();
+    expect(screen.getByText("Please choose a multi-factor authentication method")).toBeDefined();
     expect(screen.getAllByTestId("mfa-button")).toHaveLength(2);
     expect(screen.getByText("TOTP Verification")).toBeDefined();
     expect(screen.getByText("SMS Verification")).toBeDefined();
@@ -357,6 +360,9 @@ describe("<MultiFactorAuthAssertionForm />", () => {
           mfaTotpVerification: "TOTP Verification",
           mfaSmsVerification: "SMS Verification",
         },
+        prompts: {
+          mfaAssertionFactorPrompt: "Please choose a multi-factor authentication method",
+        },
       }),
     });
     ui.get().setMultiFactorResolver(mockResolver as unknown as MultiFactorResolver);
@@ -367,12 +373,10 @@ describe("<MultiFactorAuthAssertionForm />", () => {
       </CreateFirebaseUIProvider>
     );
 
-    // Initially shows selection UI
-    expect(screen.getByText("TODO: Select a multi-factor authentication method")).toBeDefined();
+    expect(screen.getByText("Please choose a multi-factor authentication method")).toBeDefined();
     expect(screen.queryByTestId("sms-assertion-form")).toBeNull();
     expect(screen.queryByTestId("totp-assertion-form")).toBeNull();
 
-    // Click SMS button
     const smsButton = screen.getByText("SMS Verification");
     fireEvent.click(smsButton);
 
@@ -385,7 +389,7 @@ describe("<MultiFactorAuthAssertionForm />", () => {
     // Should now show SMS form
     expect(screen.getByTestId("sms-assertion-form")).toBeDefined();
     expect(screen.queryByTestId("totp-assertion-form")).toBeNull();
-    expect(screen.queryByText("TODO: Select a multi-factor authentication method")).toBeNull();
+    expect(screen.queryByText("Please choose a multi-factor authentication method")).toBeNull();
   });
 
   it("handles unknown factor types gracefully", () => {
@@ -400,7 +404,13 @@ describe("<MultiFactorAuthAssertionForm />", () => {
         },
       ],
     };
-    const ui = createMockUI();
+    const ui = createMockUI({
+      locale: registerLocale("test", {
+        prompts: {
+          mfaAssertionFactorPrompt: "Please choose a multi-factor authentication method",
+        },
+      }),
+    });
     ui.get().setMultiFactorResolver(mockResolver as unknown as MultiFactorResolver);
 
     render(
@@ -410,7 +420,7 @@ describe("<MultiFactorAuthAssertionForm />", () => {
     );
 
     // Should show selection UI for unknown factor
-    expect(screen.getByText("TODO: Select a multi-factor authentication method")).toBeDefined();
+    expect(screen.getByText("Please choose a multi-factor authentication method")).toBeDefined();
     expect(screen.queryByTestId("sms-assertion-form")).toBeNull();
     expect(screen.queryByTestId("totp-assertion-form")).toBeNull();
   });

packages/react/src/auth/forms/multi-factor-auth-assertion-form.tsx

@@ -18,6 +18,7 @@ export type MultiFactorAuthAssertionFormProps = {
 export function MultiFactorAuthAssertionForm(props: MultiFactorAuthAssertionFormProps) {
   const ui = useUI();
   const resolver = ui.multiFactorResolver;
+  const mfaAssertionFactorPrompt = getTranslation(ui, "prompts", "mfaAssertionFactorPrompt");
 
   if (!resolver) {
     throw new Error("MultiFactorAuthAssertionForm requires a multi-factor resolver");
@@ -54,7 +55,7 @@ export function MultiFactorAuthAssertionForm(props: MultiFactorAuthAssertionForm
 
   return (
     <div className="fui-content">
-      <p>TODO: Select a multi-factor authentication method</p>
+      <p>{mfaAssertionFactorPrompt}</p>
       {resolver.hints.map((hint) => {
         if (hint.factorId === TotpMultiFactorGenerator.FACTOR_ID) {
           return <TotpButton key={hint.factorId} onClick={() => setHint(hint)} />;

packages/shadcn/src/components/multi-factor-auth-assertion-form.test.tsx

@@ -173,7 +173,13 @@ describe("<MultiFactorAuthAssertionForm />", () => {
       ],
     } as MultiFactorResolver;
 
-    const ui = createMockUI();
+    const ui = createMockUI({
+      locale: registerLocale("test", {
+        prompts: {
+          mfaAssertionFactorPrompt: "Please choose a multi-factor authentication method",
+        },
+      }),
+    });
     ui.get().setMultiFactorResolver(mockResolver as unknown as MultiFactorResolver);
 
     render(
@@ -183,7 +189,7 @@ describe("<MultiFactorAuthAssertionForm />", () => {
       })
     );
 
-    expect(screen.getByText("TODO:Select a multi-factor authentication method")).toBeInTheDocument();
+    expect(screen.getByText("Please choose a multi-factor authentication method")).toBeInTheDocument();
   });
 
   it("calls onSuccess with credential when SMS form succeeds", () => {

packages/shadcn/src/components/multi-factor-auth-assertion-form.tsx

@@ -21,6 +21,7 @@ export type MultiFactorAuthAssertionFormProps = {
 export function MultiFactorAuthAssertionForm({ onSuccess }: MultiFactorAuthAssertionFormProps) {
   const ui = useUI();
   const resolver = ui.multiFactorResolver;
+  const mfaAssertionFactorPrompt = getTranslation(ui, "prompts", "mfaAssertionFactorPrompt");
 
   if (!resolver) {
     throw new Error("MultiFactorAuthAssertionForm requires a multi-factor resolver");
@@ -43,7 +44,7 @@ export function MultiFactorAuthAssertionForm({ onSuccess }: MultiFactorAuthAsser
 
   return (
     <div className="flex flex-col gap-2">
-      <p className="text-sm text-muted-foreground">TODO:Select a multi-factor authentication method</p>
+      <p className="text-sm text-muted-foreground">{mfaAssertionFactorPrompt}</p>
       {resolver.hints.map((hint) => {
         if (hint.factorId === TotpMultiFactorGenerator.FACTOR_ID) {
           return <TotpButton key={hint.factorId} onClick={() => setHint(hint)} />;

packages/translations/src/locales/en-us.ts

@@ -98,5 +98,6 @@ export const enUS = {
     enterEmailForLink: "Enter your email to receive a sign-in link",
     mfaEnrollmentPrompt: "Select a new multi-factor enrollment method",
     mfaAssertionPrompt: "Please complete the multi-factor authentication process",
+    mfaAssertionFactorPrompt: "Please choose a multi-factor authentication method",
   },
 } satisfies Translations;

packages/translations/src/types.ts

@@ -104,5 +104,6 @@ export type Translations = {
     enterEmailForLink?: string;
     mfaEnrollmentPrompt?: string;
     mfaAssertionPrompt?: string;
+    mfaAssertionFactorPrompt?: string;
   };
 };