fix(angular): Use recaptcha verifier behavior

Author: Ehesp

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

@@ -19,6 +19,7 @@ import { injectForm, injectStore, TanStackAppField, TanStackField } from "@tanst
 import {
   injectMultiFactorPhoneAuthNumberFormSchema,
   injectMultiFactorPhoneAuthVerifyFormSchema,
+  injectRecaptchaVerifier,
   injectTranslation,
   injectUI,
 } from "../../../provider";
@@ -87,11 +88,7 @@ export class SmsMultiFactorAssertionPhoneFormComponent {
     return hint.phoneNumber || "";
   });
 
-  recaptchaVerifier = computed(() => {
-    return new RecaptchaVerifier(this.ui().auth, this.recaptchaContainer().nativeElement, {
-      size: "normal",
-    });
-  });
+  recaptchaVerifier = injectRecaptchaVerifier(this.recaptchaContainer());
 
   form = injectForm({
     defaultValues: {

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

@@ -36,6 +36,7 @@ import {
   injectMultiFactorPhoneAuthNumberFormSchema,
   injectMultiFactorPhoneAuthVerifyFormSchema,
   injectDefaultCountry,
+  injectRecaptchaVerifier,
 } from "../../../provider";
 
 @Component({
@@ -126,11 +127,7 @@ export class SmsMultiFactorEnrollmentFormComponent {
 
   recaptchaContainer = viewChild.required<ElementRef<HTMLDivElement>>("recaptchaContainer");
 
-  recaptchaVerifier = computed(() => {
-    return new RecaptchaVerifier(this.ui().auth, this.recaptchaContainer().nativeElement, {
-      size: "normal",
-    });
-  });
+  recaptchaVerifier = injectRecaptchaVerifier(this.recaptchaContainer());
 
   phoneForm = injectForm({
     defaultValues: {

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

@@ -20,6 +20,7 @@ import { injectForm, injectStore, TanStackAppField, TanStackField } from "@tanst
 import {
   injectPhoneAuthFormSchema,
   injectPhoneAuthVerifyFormSchema,
+  injectRecaptchaVerifier,
   injectTranslation,
   injectUI,
 } from "../../provider";
@@ -85,12 +86,7 @@ export class PhoneNumberFormComponent {
   unknownErrorLabel = injectTranslation("errors", "unknownError");
 
   recaptchaContainer = viewChild.required<ElementRef<HTMLDivElement>>("recaptchaContainer");
-
-  recaptchaVerifier = computed(() => {
-    return new RecaptchaVerifier(this.ui().auth, this.recaptchaContainer().nativeElement, {
-      size: "normal", // TODO(ehesp): Get this from the ui behavior
-    });
-  });
+  recaptchaVerifier = injectRecaptchaVerifier(this.recaptchaContainer());
 
   form = injectForm({
     defaultValues: {

packages/angular/src/lib/provider.ts

@@ -24,6 +24,7 @@ import {
   computed,
   effect,
   Signal,
+  ElementRef,
 } from "@angular/core";
 import { FirebaseApps } from "@angular/fire/app";
 import {
@@ -77,7 +78,6 @@ export function provideFirebaseUIPolicies(factory: () => PolicyConfig) {
   return makeEnvironmentProviders(providers);
 }
 
-// Provides a signal with a subscription to the FirebaseUIStore
 export function injectUI() {
   const store = inject(FIREBASE_UI_STORE);
   const ui = signal<FirebaseUIType>(store.get());
@@ -89,6 +89,20 @@ export function injectUI() {
   return ui.asReadonly();
 }
 
+export function injectRecaptchaVerifier(element: ElementRef<HTMLDivElement>) {
+  const ui = injectUI();
+  const verifier = computed(() => getBehavior(ui(), "recaptchaVerification")(ui(), element.nativeElement));
+
+  effect(() => {
+    if (verifier()) {
+      verifier().render();
+    }
+  });
+
+  return verifier;
+
+}
+
 export function injectTranslation(category: string, key: string) {
   const ui = injectUI();
   return computed(() => getTranslation(ui(), category as any, key as any));