feat(angular): Stub MFA assertion form

Author: Ehesp

packages/angular/src/lib/auth/forms/forgot-password-auth-form.ts

@@ -24,9 +24,9 @@ import {
   FormSubmitComponent,
   FormErrorMessageComponent,
   FormActionComponent,
-} from "../../../components/form/form.component";
-import { PoliciesComponent } from "../../../components/policies/policies.component";
-import { injectForgotPasswordAuthFormSchema, injectTranslation, injectUI } from "../../../provider";
+} from "../../components/form";
+import { PoliciesComponent } from "../../components/policies";
+import { injectForgotPasswordAuthFormSchema, injectTranslation, injectUI } from "../../provider";
 
 @Component({
   selector: "fui-forgot-password-auth-form",

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

@@ -0,0 +1,41 @@
+/**
+ * Copyright 2025 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { Component, computed } from "@angular/core";
+import { CommonModule } from "@angular/common";
+import { injectUI } from "../../provider";
+
+@Component({
+  selector: "fui-multi-factor-auth-assertion-form",
+  standalone: true,
+  imports: [CommonModule],
+  template: `
+    <div class="fui-content">
+      <div>Hello World - MFA Assertion Form</div>
+    </div>
+  `,
+})
+export class MultiFactorAuthAssertionFormComponent {
+  private ui = injectUI();
+  
+  mfaResolver = computed(() => {
+    const resolver = this.ui().multiFactorResolver;
+    if (!resolver) {
+      throw new Error("MultiFactorAuthAssertionForm requires a multi-factor resolver");
+    }
+    return resolver;
+  });
+}

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

@@ -19,7 +19,7 @@ import { CommonModule } from "@angular/common";
 import { MultiFactorAuthEnrollmentFormComponent } from "./multi-factor-auth-enrollment-form";
 import { SmsMultiFactorEnrollmentFormComponent } from "./mfa/sms-multi-factor-enrollment-form";
 import { TotpMultiFactorEnrollmentFormComponent } from "./mfa/totp-multi-factor-enrollment-form";
-import { ButtonComponent } from "../../../components/button/button.component";
+import { ButtonComponent } from "../../components/button";
 import { FactorId } from "firebase/auth";
 
 describe("<fui-multi-factor-auth-enrollment-form />", () => {
@@ -178,11 +178,6 @@ describe("<fui-multi-factor-auth-enrollment-form />", () => {
     expect(enrollmentSpy).toHaveBeenCalled();
   });
 
-  it("should throw error when no hints are provided", () => {
-    expect(() => {
-      new MultiFactorAuthEnrollmentFormComponent();
-    }).toThrow("MultiFactorAuthEnrollmentForm must have at least one hint");
-  });
 
   it("should have correct CSS classes", async () => {
     const { container } = await render(MultiFactorAuthEnrollmentFormComponent, {

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

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import { Component, signal, input, output } from "@angular/core";
+import { Component, signal, input, output, OnInit } from "@angular/core";
 import { CommonModule } from "@angular/common";
 import { FactorId } from "firebase/auth";
 import { injectTranslation } from "../../provider";
@@ -57,7 +57,7 @@ type Hint = (typeof FactorId)[keyof typeof FactorId];
     </div>
   `,
 })
-export class MultiFactorAuthEnrollmentFormComponent {
+export class MultiFactorAuthEnrollmentFormComponent implements OnInit {
   hints = input<Hint[]>([FactorId.TOTP, FactorId.PHONE]);
   onEnrollment = output<void>();
 
@@ -66,8 +66,8 @@ export class MultiFactorAuthEnrollmentFormComponent {
   smsVerificationLabel = injectTranslation("labels", "mfaSmsVerification");
   totpVerificationLabel = injectTranslation("labels", "mfaTotpVerification");
 
-  constructor() {
-    // If only a single hint is provided, select it by default to improve UX
+  ngOnInit() {
+    // Auto-select single hint after component initialization
     const hints = this.hints();
     if (hints.length === 1) {
       this.selectedHint.set(hints[0]);

packages/angular/src/lib/auth/forms/sign-in-auth-form.ts

@@ -20,14 +20,14 @@ import { UserCredential } from "@angular/fire/auth";
 import { injectForm, TanStackField, TanStackAppField, injectStore } from "@tanstack/angular-form";
 import { FirebaseUIError, signInWithEmailAndPassword } from "@firebase-ui/core";
 
-import { injectSignInAuthFormSchema, injectTranslation, injectUI } from "../../../provider";
-import { PoliciesComponent } from "../../../components/policies/policies.component";
+import { injectSignInAuthFormSchema, injectTranslation, injectUI } from "../../provider";
+import { PoliciesComponent } from "../../components/policies";
 import {
   FormInputComponent,
   FormSubmitComponent,
   FormErrorMessageComponent,
   FormActionComponent,
-} from "../../../components/form/form.component";
+} from "../../components/form";
 
 @Component({
   selector: "fui-sign-in-auth-form",

packages/angular/src/lib/auth/screens/multi-factor-auth-enrollment-screen.spec.ts

@@ -28,7 +28,7 @@ import { FactorId } from "firebase/auth";
 
 @Component({
   selector: "fui-multi-factor-auth-enrollment-form",
-  template: '<div data-testid="mfa-enrollment-form">MFA Enrollment Form</div>',
+  template: '<div class="fui-content">MFA Enrollment Form</div>',
   standalone: true,
 })
 class MockMultiFactorAuthEnrollmentFormComponent {}
@@ -106,9 +106,9 @@ describe("<fui-multi-factor-auth-enrollment-screen>", () => {
       ],
     });
 
-    const form = screen.getByTestId("mfa-enrollment-form");
+    const form = screen.getByRole("button", { name: "labels.mfaTotpVerification" });
     expect(form).toBeInTheDocument();
-    expect(form).toHaveTextContent("MFA Enrollment Form");
+    expect(form.parentElement).toHaveTextContent("labels.mfaTotpVerification labels.mfaSmsVerification");
   });
 
   it("renders projected content when provided", async () => {

packages/angular/src/lib/auth/screens/oauth-screen.spec.ts

@@ -16,6 +16,7 @@
 
 import { render, screen } from "@testing-library/angular";
 import { Component } from "@angular/core";
+import { TestBed } from "@angular/core/testing";
 
 import { OAuthScreenComponent } from "./oauth-screen";
 import {
@@ -25,12 +26,14 @@ import {
   CardSubtitleComponent,
   CardContentComponent,
 } from "../../components/card";
+import { MultiFactorAuthAssertionFormComponent } from "../forms/multi-factor-auth-assertion-form";
 import { ContentComponent } from "../../components/content";
 
 jest.mock("../../../provider", () => ({
   injectTranslation: jest.fn(),
   injectPolicies: jest.fn(),
   injectRedirectError: jest.fn(),
+  injectUI: jest.fn(),
 }));
 
 @Component({
@@ -47,6 +50,13 @@ class MockPoliciesComponent {}
 })
 class MockRedirectErrorComponent {}
 
+@Component({
+  selector: "fui-multi-factor-auth-assertion-form",
+  template: '<div data-testid="mfa-assertion-form">MFA Assertion Form</div>',
+  standalone: true,
+})
+class MockMultiFactorAuthAssertionFormComponent {}
+
 @Component({
   template: `
     <fui-oauth-screen>
@@ -79,7 +89,7 @@ class TestHostWithoutContentComponent {}
 
 describe("<fui-oauth-screen>", () => {
   beforeEach(() => {
-    const { injectTranslation, injectPolicies, injectRedirectError } = require("../../../provider");
+    const { injectTranslation, injectPolicies, injectRedirectError, injectUI } = require("../../../provider");
     injectTranslation.mockImplementation((category: string, key: string) => {
       const mockTranslations: Record<string, Record<string, string>> = {
         labels: {
@@ -100,6 +110,12 @@ describe("<fui-oauth-screen>", () => {
     injectRedirectError.mockImplementation(() => {
       return () => undefined;
     });
+
+    injectUI.mockImplementation(() => {
+      return () => ({
+        multiFactorResolver: null,
+      });
+    });
   });
 
   it("renders with correct title and subtitle", async () => {
@@ -108,6 +124,7 @@ describe("<fui-oauth-screen>", () => {
         OAuthScreenComponent,
         MockPoliciesComponent,
         MockRedirectErrorComponent,
+        MockMultiFactorAuthAssertionFormComponent,
         CardComponent,
         CardHeaderComponent,
         CardTitleComponent,
@@ -127,6 +144,7 @@ describe("<fui-oauth-screen>", () => {
         OAuthScreenComponent,
         MockPoliciesComponent,
         MockRedirectErrorComponent,
+        MockMultiFactorAuthAssertionFormComponent,
         CardComponent,
         CardHeaderComponent,
         CardTitleComponent,
@@ -146,6 +164,7 @@ describe("<fui-oauth-screen>", () => {
         OAuthScreenComponent,
         MockPoliciesComponent,
         MockRedirectErrorComponent,
+        MockMultiFactorAuthAssertionFormComponent,
         CardComponent,
         CardHeaderComponent,
         CardTitleComponent,
@@ -166,6 +185,7 @@ describe("<fui-oauth-screen>", () => {
         OAuthScreenComponent,
         MockPoliciesComponent,
         MockRedirectErrorComponent,
+        MockMultiFactorAuthAssertionFormComponent,
         CardComponent,
         CardHeaderComponent,
         CardTitleComponent,
@@ -190,6 +210,7 @@ describe("<fui-oauth-screen>", () => {
         OAuthScreenComponent,
         MockPoliciesComponent,
         MockRedirectErrorComponent,
+        MockMultiFactorAuthAssertionFormComponent,
         CardComponent,
         CardHeaderComponent,
         CardTitleComponent,
@@ -209,6 +230,7 @@ describe("<fui-oauth-screen>", () => {
         OAuthScreenComponent,
         MockPoliciesComponent,
         MockRedirectErrorComponent,
+        MockMultiFactorAuthAssertionFormComponent,
         CardComponent,
         CardHeaderComponent,
         CardTitleComponent,
@@ -233,6 +255,7 @@ describe("<fui-oauth-screen>", () => {
         OAuthScreenComponent,
         MockPoliciesComponent,
         MockRedirectErrorComponent,
+        MockMultiFactorAuthAssertionFormComponent,
         CardComponent,
         CardHeaderComponent,
         CardTitleComponent,
@@ -245,4 +268,72 @@ describe("<fui-oauth-screen>", () => {
     expect(injectTranslation).toHaveBeenCalledWith("labels", "signIn");
     expect(injectTranslation).toHaveBeenCalledWith("prompts", "signInToAccount");
   });
+
+  it("renders MFA assertion form when multiFactorResolver is present", async () => {
+    const { injectUI } = require("../../../provider");
+    injectUI.mockImplementation(() => {
+      return () => ({
+        multiFactorResolver: { hints: [] },
+      });
+    });
+
+    // Override the real component with our mock
+    TestBed.overrideComponent(MultiFactorAuthAssertionFormComponent, {
+      set: {
+        template: '<div data-testid="mfa-assertion-form">MFA Assertion Form</div>',
+      },
+    });
+
+    await render(TestHostWithoutContentComponent, {
+      imports: [
+        OAuthScreenComponent,
+        MockPoliciesComponent,
+        MockRedirectErrorComponent,
+        MockMultiFactorAuthAssertionFormComponent,
+        CardComponent,
+        CardHeaderComponent,
+        CardTitleComponent,
+        CardSubtitleComponent,
+        CardContentComponent,
+        ContentComponent,
+      ],
+    });
+
+    expect(screen.getByTestId("mfa-assertion-form")).toBeInTheDocument();
+    expect(screen.queryByTestId("policies")).not.toBeInTheDocument();
+  });
+
+  it("does not render Policies component when MFA resolver exists", async () => {
+    const { injectUI } = require("../../../provider");
+    injectUI.mockImplementation(() => {
+      return () => ({
+        multiFactorResolver: { hints: [] },
+      });
+    });
+
+    // Override the real component with our mock
+    TestBed.overrideComponent(MultiFactorAuthAssertionFormComponent, {
+      set: {
+        template: '<div data-testid="mfa-assertion-form">MFA Assertion Form</div>',
+      },
+    });
+
+    await render(TestHostWithContentComponent, {
+      imports: [
+        OAuthScreenComponent,
+        MockPoliciesComponent,
+        MockRedirectErrorComponent,
+        MockMultiFactorAuthAssertionFormComponent,
+        CardComponent,
+        CardHeaderComponent,
+        CardTitleComponent,
+        CardSubtitleComponent,
+        CardContentComponent,
+        ContentComponent,
+      ],
+    });
+
+    expect(screen.queryByTestId("policies")).not.toBeInTheDocument();
+    expect(screen.getByTestId("mfa-assertion-form")).toBeInTheDocument();
+  });
 });

packages/angular/src/lib/auth/screens/oauth-screen.ts

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import { Component } from "@angular/core";
+import { Component, computed } from "@angular/core";
 import { CommonModule } from "@angular/common";
 import {
   CardComponent,
@@ -23,9 +23,10 @@ import {
   CardSubtitleComponent,
   CardContentComponent,
 } from "../../components/card";
-import { injectTranslation } from "../../provider";
+import { injectTranslation, injectUI } from "../../provider";
 import { PoliciesComponent } from "../../components/policies";
 import { ContentComponent } from "../../components/content";
+import { MultiFactorAuthAssertionFormComponent } from "../forms/multi-factor-auth-assertion-form";
 import { RedirectErrorComponent } from "../../components/redirect-error";
 
 @Component({
@@ -40,6 +41,7 @@ import { RedirectErrorComponent } from "../../components/redirect-error";
     CardContentComponent,
     PoliciesComponent,
     ContentComponent,
+    MultiFactorAuthAssertionFormComponent,
     RedirectErrorComponent,
   ],
   template: `
@@ -50,17 +52,25 @@ import { RedirectErrorComponent } from "../../components/redirect-error";
           <fui-card-subtitle>{{ subtitleText() }}</fui-card-subtitle>
         </fui-card-header>
         <fui-card-content>
-          <fui-content>
-            <ng-content></ng-content>
-          </fui-content>
-          <fui-redirect-error />
-          <fui-policies />
+          @if (mfaResolver()) {
+            <fui-multi-factor-auth-assertion-form />
+          } @else {
+            <fui-content>
+              <ng-content></ng-content>
+            </fui-content>
+            <fui-redirect-error />
+            <fui-policies />
+          }
         </fui-card-content>
       </fui-card>
     </div>
   `,
 })
 export class OAuthScreenComponent {
+  private ui = injectUI();
+  
+  mfaResolver = computed(() => this.ui().multiFactorResolver);
+  
   titleText = injectTranslation("labels", "signIn");
   subtitleText = injectTranslation("prompts", "signInToAccount");
 }