fix(angular): Ensure recaptcha container is deferred until view child is ready

Author: Ehesp

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

@@ -34,6 +34,7 @@ describe("<fui-sms-multi-factor-assertion-form>", () => {
       injectUI,
       injectMultiFactorPhoneAuthNumberFormSchema,
       injectMultiFactorPhoneAuthVerifyFormSchema,
+      injectRecaptchaVerifier,
     } = require("../../../tests/test-helpers");
 
     injectTranslation.mockImplementation((category: string, key: string) => {
@@ -74,6 +75,14 @@ describe("<fui-sms-multi-factor-assertion-form>", () => {
     verifyPhoneNumber.mockResolvedValue("test-verification-id");
     signInWithMultiFactorAssertion.mockResolvedValue({});
 
+    injectRecaptchaVerifier.mockImplementation(() => {
+      return () => ({
+        clear: jest.fn(),
+        render: jest.fn(),
+        verify: jest.fn(),
+      });
+    });
+
     const { PhoneAuthProvider, PhoneMultiFactorGenerator } = require("firebase/auth");
     PhoneAuthProvider.credential = jest.fn().mockReturnValue({});
     PhoneMultiFactorGenerator.assertion = jest.fn().mockReturnValue({});

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

@@ -84,7 +84,7 @@ export class SmsMultiFactorAssertionPhoneFormComponent {
     return hint.phoneNumber || "";
   });
 
-  recaptchaVerifier = injectRecaptchaVerifier(this.recaptchaContainer());
+  recaptchaVerifier = injectRecaptchaVerifier(() => this.recaptchaContainer());
 
   form = injectForm({
     defaultValues: {
@@ -107,13 +107,12 @@ export class SmsMultiFactorAssertionPhoneFormComponent {
           onSubmit: this.formSchema(),
           onSubmitAsync: async () => {
             try {
-              const verificationId = await verifyPhoneNumber(
-                this.ui(),
-                "",
-                this.recaptchaVerifier(),
-                undefined,
-                this.hint()
-              );
+              const verifier = this.recaptchaVerifier();
+              if (!verifier) {
+                return this.unknownErrorLabel();
+              }
+
+              const verificationId = await verifyPhoneNumber(this.ui(), "", verifier, undefined, this.hint());
               this.onSubmit.emit(verificationId);
               return;
             } catch (error) {
@@ -130,7 +129,9 @@ export class SmsMultiFactorAssertionPhoneFormComponent {
     effect((onCleanup) => {
       const verifier = this.recaptchaVerifier();
       onCleanup(() => {
-        verifier.clear();
+        if (verifier) {
+          verifier.clear();
+        }
       });
     });
   }

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

@@ -42,6 +42,7 @@ describe("<fui-sms-multi-factor-enrollment-form />", () => {
       injectMultiFactorPhoneAuthNumberFormSchema,
       injectMultiFactorPhoneAuthVerifyFormSchema,
       injectDefaultCountry,
+      injectRecaptchaVerifier,
     } = require("../../../tests/test-helpers");
     const { PhoneAuthProvider, PhoneMultiFactorGenerator, multiFactor } = require("../../../tests/test-helpers");
 
@@ -88,6 +89,14 @@ describe("<fui-sms-multi-factor-enrollment-form />", () => {
     injectDefaultCountry.mockImplementation(() => {
       return () => ({ code: "US" });
     });
+
+    injectRecaptchaVerifier.mockImplementation(() => {
+      return () => ({
+        clear: jest.fn(),
+        render: jest.fn(),
+        verify: jest.fn(),
+      });
+    });
   });
 
   afterEach(() => {

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

@@ -127,7 +127,7 @@ export class SmsMultiFactorEnrollmentFormComponent {
 
   recaptchaContainer = viewChild.required<ElementRef<HTMLDivElement>>("recaptchaContainer");
 
-  recaptchaVerifier = injectRecaptchaVerifier(this.recaptchaContainer());
+  recaptchaVerifier = injectRecaptchaVerifier(() => this.recaptchaContainer());
 
   phoneForm = injectForm({
     defaultValues: {
@@ -158,14 +158,14 @@ export class SmsMultiFactorEnrollmentFormComponent {
                 throw new Error("User must be authenticated to enroll with multi-factor authentication");
               }
 
+              const verifier = this.recaptchaVerifier();
+              if (!verifier) {
+                return this.unknownErrorLabel();
+              }
+
               const mfaUser = multiFactor(currentUser);
               const formattedPhoneNumber = formatPhoneNumber(value.phoneNumber, this.defaultCountry());
-              const verificationId = await verifyPhoneNumber(
-                this.ui(),
-                formattedPhoneNumber,
-                this.recaptchaVerifier(),
-                mfaUser
-              );
+              const verificationId = await verifyPhoneNumber(this.ui(), formattedPhoneNumber, verifier, mfaUser);
 
               this.displayName.set(value.displayName);
               this.verificationId.set(verificationId);

packages/angular/src/lib/auth/forms/phone-auth-form.spec.ts

@@ -34,10 +34,19 @@ describe("<fui-phone-auth-form />", () => {
 
   beforeEach(() => {
     const { verifyPhoneNumber, confirmPhoneNumber, formatPhoneNumber, FirebaseUIError } = require("@firebase-ui/core");
+    const { injectRecaptchaVerifier } = require("../../tests/test-helpers");
     mockVerifyPhoneNumber = verifyPhoneNumber;
     mockConfirmPhoneNumber = confirmPhoneNumber;
     mockFormatPhoneNumber = formatPhoneNumber;
     mockFirebaseUIError = FirebaseUIError;
+
+    injectRecaptchaVerifier.mockImplementation(() => {
+      return () => ({
+        clear: jest.fn(),
+        render: jest.fn(),
+        verify: jest.fn(),
+      });
+    });
   });
 
   afterEach(() => {

packages/angular/src/lib/auth/forms/phone-auth-form.ts

@@ -86,7 +86,7 @@ export class PhoneNumberFormComponent {
   unknownErrorLabel = injectTranslation("errors", "unknownError");
 
   recaptchaContainer = viewChild.required<ElementRef<HTMLDivElement>>("recaptchaContainer");
-  recaptchaVerifier = injectRecaptchaVerifier(this.recaptchaContainer());
+  recaptchaVerifier = injectRecaptchaVerifier(() => this.recaptchaContainer());
 
   form = injectForm({
     defaultValues: {
@@ -107,7 +107,11 @@ export class PhoneNumberFormComponent {
             const formattedNumber = formatPhoneNumber(value.phoneNumber, selectedCountry!);
 
             try {
-              const verificationId = await verifyPhoneNumber(this.ui(), formattedNumber, this.recaptchaVerifier());
+              const verifier = this.recaptchaVerifier();
+              if (!verifier) {
+                return this.unknownErrorLabel();
+              }
+              const verificationId = await verifyPhoneNumber(this.ui(), formattedNumber, verifier);
               this.onSubmit.emit({ verificationId, phoneNumber: formattedNumber });
               return;
             } catch (error) {
@@ -126,7 +130,9 @@ export class PhoneNumberFormComponent {
       const verifier = this.recaptchaVerifier();
 
       onCleanup(() => {
-        verifier.clear();
+        if (verifier) {
+          verifier.clear();
+        }
       });
     });
   }

packages/angular/src/lib/provider.ts

@@ -89,13 +89,20 @@ export function injectUI() {
   return ui.asReadonly();
 }
 
-export function injectRecaptchaVerifier(element: ElementRef<HTMLDivElement>) {
+export function injectRecaptchaVerifier(element: () => ElementRef<HTMLDivElement>) {
   const ui = injectUI();
-  const verifier = computed(() => getBehavior(ui(), "recaptchaVerification")(ui(), element.nativeElement));
+  const verifier = computed(() => {
+    const elementRef = element();
+    if (!elementRef) {
+      return null;
+    }
+    return getBehavior(ui(), "recaptchaVerification")(ui(), elementRef.nativeElement);
+  });
 
   effect(() => {
-    if (verifier()) {
-      verifier().render();
+    const verifierInstance = verifier();
+    if (verifierInstance) {
+      verifierInstance.render();
     }
   });
 

packages/angular/src/lib/tests/test-helpers.ts

@@ -273,6 +273,14 @@ export const injectMultiFactorTotpAuthEnrollmentFormSchema = jest.fn().mockRetur
 export const injectCountries = jest.fn().mockReturnValue(() => countryData);
 export const injectDefaultCountry = jest.fn().mockReturnValue(() => "US");
 
+export const injectRecaptchaVerifier = jest.fn().mockImplementation(() => {
+  return () => ({
+    clear: jest.fn(),
+    render: jest.fn(),
+    verify: jest.fn(),
+  });
+});
+
 export const RecaptchaVerifier = jest.fn().mockImplementation(() => ({
   clear: jest.fn(),
   render: jest.fn(),