fix the useRecaptchaVerifier hook async condition

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

@@ -110,7 +110,9 @@ function SmsMultiFactorAssertionPhoneForm(props: SmsMultiFactorAssertionPhoneFor
       onSubmit={async (e) => {
         e.preventDefault();
         e.stopPropagation();
-        await form.handleSubmit();
+        if (recaptchaVerifier) {
+          await form.handleSubmit();
+        }
       }}
     >
       <form.AppForm>
@@ -127,7 +129,9 @@ function SmsMultiFactorAssertionPhoneForm(props: SmsMultiFactorAssertionPhoneFor
           <div className="fui-recaptcha-container" ref={recaptchaContainerRef} />
         </fieldset>
         <fieldset>
-          <form.SubmitButton>{getTranslation(ui, "labels", "sendCode")}</form.SubmitButton>
+          <form.SubmitButton disabled={!recaptchaVerifier}>
+            {getTranslation(ui, "labels", "sendCode")}
+          </form.SubmitButton>
           <form.ErrorMessage />
         </fieldset>
       </form.AppForm>

packages/react/src/auth/forms/mfa/sms-multi-factor-enrollment-form.tsx

@@ -114,7 +114,9 @@ function MultiFactorEnrollmentPhoneNumberForm(props: MultiFactorEnrollmentPhoneN
       onSubmit={async (e) => {
         e.preventDefault();
         e.stopPropagation();
-        await form.handleSubmit();
+        if (recaptchaVerifier) {
+          await form.handleSubmit();
+        }
       }}
     >
       <form.AppForm>
@@ -138,7 +140,9 @@ function MultiFactorEnrollmentPhoneNumberForm(props: MultiFactorEnrollmentPhoneN
           <div className="fui-recaptcha-container" ref={recaptchaContainerRef} />
         </fieldset>
         <fieldset>
-          <form.SubmitButton>{getTranslation(ui, "labels", "sendCode")}</form.SubmitButton>
+          <form.SubmitButton disabled={!recaptchaVerifier}>
+            {getTranslation(ui, "labels", "sendCode")}
+          </form.SubmitButton>
           <form.ErrorMessage />
         </fieldset>
       </form.AppForm>

packages/react/src/auth/forms/phone-auth-form.test.tsx

@@ -78,6 +78,7 @@ import { verifyPhoneNumber, confirmPhoneNumber } from "@firebase-oss/ui-core";
 import { createFirebaseUIProvider, createMockUI } from "~/tests/utils";
 import { registerLocale } from "@firebase-oss/ui-translations";
 import { FirebaseUIProvider } from "~/context";
+import { useRecaptchaVerifier } from "~/hooks";
 
 vi.mock("~/components/country-selector", () => ({
   CountrySelector: vi.fn().mockImplementation(({ value, onChange, ref }: any) => {
@@ -578,6 +579,18 @@ describe("<PhoneAuthForm />", () => {
     const mockVerificationId = "test-verification-id";
     vi.mocked(verifyPhoneNumber).mockResolvedValue(mockVerificationId);
 
+    // Create a mock verifier that simulates async render()
+    const mockVerifier = {
+      render: vi.fn().mockResolvedValue(123),
+      clear: vi.fn(),
+      verify: vi.fn().mockResolvedValue("verification-token"),
+    };
+
+    // Override the global mock to return our specific verifier
+    vi.mocked(useRecaptchaVerifier).mockReturnValue(
+      mockVerifier as unknown as import("firebase/auth").RecaptchaVerifier
+    );
+
     const { container } = render(
       <FirebaseUIProvider ui={mockUI}>
         <PhoneAuthForm />
@@ -591,9 +604,34 @@ describe("<PhoneAuthForm />", () => {
 
     await act(async () => {
       fireEvent.change(phoneInput, { target: { value: "1234567890" } });
+    });
+
+    // Check if there are any validation errors before submitting
+    const errorBeforeSubmit = screen.queryByTestId("error-message");
+    if (errorBeforeSubmit) {
+      throw new Error(`Form has validation error before submit: ${errorBeforeSubmit.textContent}`);
+    }
+
+    await act(async () => {
       fireEvent.click(sendCodeButton);
     });
 
+    // Wait for the async form submission to complete
+    await waitFor(
+      () => {
+        expect(verifyPhoneNumber).toHaveBeenCalled();
+      },
+      { timeout: 3000 }
+    );
+
+    // Verify that verifyPhoneNumber was called with the verifier
+    // Note: The phone number gets formatted, so we check for the formatted version
+    expect(verifyPhoneNumber).toHaveBeenCalledWith(
+      expect.anything(),
+      expect.stringMatching(/1.*234.*567.*890/), // Matches formatted phone number like "1(234)567-890" or "+11234567890"
+      mockVerifier
+    );
+
     const verificationInput = await waitFor(() => {
       return screen.getByRole("textbox", { name: /verificationCode/i });
     });

packages/react/src/auth/forms/phone-auth-form.tsx

@@ -103,6 +103,7 @@ export function PhoneNumberForm(props: PhoneNumberFormProps) {
   const recaptchaContainerRef = useRef<HTMLDivElement>(null);
   const recaptchaVerifier = useRecaptchaVerifier(recaptchaContainerRef);
   const countrySelector = useRef<CountrySelectorRef>(null);
+
   const form = usePhoneNumberForm({
     recaptchaVerifier: recaptchaVerifier!,
     onSuccess: props.onSubmit,
@@ -115,7 +116,9 @@ export function PhoneNumberForm(props: PhoneNumberFormProps) {
       onSubmit={async (e) => {
         e.preventDefault();
         e.stopPropagation();
-        await form.handleSubmit();
+        if (recaptchaVerifier) {
+          await form.handleSubmit();
+        }
       }}
     >
       <form.AppForm>
@@ -135,7 +138,9 @@ export function PhoneNumberForm(props: PhoneNumberFormProps) {
         </fieldset>
         <Policies />
         <fieldset>
-          <form.SubmitButton>{getTranslation(ui, "labels", "sendCode")}</form.SubmitButton>
+          <form.SubmitButton disabled={!recaptchaVerifier}>
+            {getTranslation(ui, "labels", "sendCode")}
+          </form.SubmitButton>
           <form.ErrorMessage />
         </fieldset>
       </form.AppForm>

packages/react/src/hooks.ts

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import { useContext, useMemo, useEffect, useRef } from "react";
+import { useContext, useMemo, useEffect, useRef, useState } from "react";
 import type { RecaptchaVerifier, User } from "firebase/auth";
 import {
   createEmailLinkAuthFormSchema,
@@ -200,7 +200,7 @@ export function useMultiFactorTotpAuthVerifyFormSchema() {
  */
 export function useRecaptchaVerifier(ref: React.RefObject<HTMLDivElement | null>) {
   const ui = useUI();
-  const verifierRef = useRef<RecaptchaVerifier | null>(null);
+  const [verifier, setVerifier] = useState<RecaptchaVerifier | null>(null);
   const uiRef = useRef(ui);
   const prevElementRef = useRef<HTMLDivElement | null>(null);
 
@@ -213,13 +213,19 @@ export function useRecaptchaVerifier(ref: React.RefObject<HTMLDivElement | null>
     if (currentElement !== prevElementRef.current) {
       prevElementRef.current = currentElement;
       if (currentElement) {
-        verifierRef.current = getBehavior(currentUI, "recaptchaVerification")(currentUI, currentElement);
-        verifierRef.current.render();
+        try {
+          const newVerifier = getBehavior(currentUI, "recaptchaVerification")(currentUI, currentElement);
+          newVerifier.render();
+          setVerifier(newVerifier);
+        } catch (error) {
+          console.error("[useRecaptchaVerifier] Failed to create/render verifier:", error);
+          setVerifier(null);
+        }
       } else {
-        verifierRef.current = null;
+        setVerifier(null);
       }
     }
   }, [ref]);
 
-  return verifierRef.current;
+  return verifier;
 }