Merge pull request #1238 from firebase/@invertase/bb-19

Author: Ehesp

packages/react/src/hooks.test.tsx

@@ -15,7 +15,8 @@
  */
 
 import { describe, it, expect, vi, beforeEach } from "vitest";
-import { renderHook, act, cleanup } from "@testing-library/react";
+import { renderHook, act, cleanup, waitFor } from "@testing-library/react";
+import React from "react";
 import {
   useUI,
   useRedirectError,
@@ -25,12 +26,29 @@ import {
   useEmailLinkAuthFormSchema,
   usePhoneAuthNumberFormSchema,
   usePhoneAuthVerifyFormSchema,
+  useRecaptchaVerifier,
 } from "./hooks";
 import { createFirebaseUIProvider, createMockUI } from "~/tests/utils";
 import { registerLocale, enUs } from "@firebase-ui/translations";
+import type { RecaptchaVerifier } from "firebase/auth";
+
+// Mock RecaptchaVerifier from firebase/auth
+const mockRender = vi.fn();
+const mockVerifier = {
+  render: mockRender,
+} as unknown as RecaptchaVerifier;
+
+vi.mock("firebase/auth", async () => {
+  const actual = await vi.importActual<typeof import("firebase/auth")>("firebase/auth");
+  return {
+    ...actual,
+    RecaptchaVerifier: vi.fn().mockImplementation(() => mockVerifier),
+  };
+});
 
 beforeEach(() => {
   vi.clearAllMocks();
+  mockRender.mockClear();
 });
 
 describe("useUI", () => {
@@ -825,3 +843,91 @@ describe("useRedirectError", () => {
     expect(result.current).toBeUndefined();
   });
 });
+
+describe("useRecaptchaVerifier", () => {
+  beforeEach(() => {
+    cleanup();
+  });
+
+  it("creates verifier when element is available", async () => {
+    const mockUI = createMockUI();
+    const element = document.createElement("div");
+    const ref = { current: element };
+
+    const { result } = renderHook(() => useRecaptchaVerifier(ref), {
+      wrapper: ({ children }) => createFirebaseUIProvider({ children, ui: mockUI }),
+    });
+
+    await waitFor(() => {
+      expect(result.current).toBe(mockVerifier);
+    });
+
+    expect(mockRender).toHaveBeenCalledTimes(1);
+  });
+
+  it("returns null when element is not available", () => {
+    const mockUI = createMockUI();
+    const ref = { current: null };
+
+    const { result } = renderHook(() => useRecaptchaVerifier(ref), {
+      wrapper: ({ children }) => createFirebaseUIProvider({ children, ui: mockUI }),
+    });
+
+    expect(result.current).toBeNull();
+    expect(mockRender).not.toHaveBeenCalled();
+  });
+
+  it("does not recreate verifier when ui changes", async () => {
+    const mockUI = createMockUI();
+    const element = document.createElement("div");
+    const ref = { current: element };
+
+    const { result, rerender } = renderHook(() => useRecaptchaVerifier(ref), {
+      wrapper: ({ children }) => createFirebaseUIProvider({ children, ui: mockUI }),
+    });
+
+    await waitFor(() => {
+      expect(result.current).toBe(mockVerifier);
+    });
+
+    const firstVerifier = result.current;
+    expect(mockRender).toHaveBeenCalledTimes(1);
+
+    act(() => {
+      mockUI.get().setState("pending");
+    });
+
+    rerender();
+
+    expect(result.current).toBe(firstVerifier);
+    expect(mockRender).toHaveBeenCalledTimes(1);
+  });
+
+  it("recreates verifier when element changes", async () => {
+    const mockUI = createMockUI();
+    const element1 = document.createElement("div");
+    const element2 = document.createElement("div");
+
+    const { result, rerender } = renderHook((props) => useRecaptchaVerifier(props.ref), {
+      initialProps: { ref: { current: element1 } },
+      wrapper: ({ children }) => createFirebaseUIProvider({ children, ui: mockUI }),
+    });
+
+    await waitFor(() => {
+      expect(result.current).toBe(mockVerifier);
+    });
+
+    expect(mockRender).toHaveBeenCalledTimes(1);
+
+    act(() => {
+      rerender({ ref: { current: element2 } });
+    });
+
+    // Verifier should be recreated - wait for effect to run
+    await waitFor(() => {
+      expect(mockRender).toHaveBeenCalledTimes(2);
+    });
+
+    expect(result.current).toBe(mockVerifier);
+  });
+});

packages/react/src/hooks.ts

@@ -14,7 +14,8 @@
  * limitations under the License.
  */
 
-import { useContext, useMemo, useEffect } from "react";
+import { useContext, useMemo, useEffect, useRef } from "react";
+import type { RecaptchaVerifier } from "firebase/auth";
 import {
   createEmailLinkAuthFormSchema,
   createForgotPasswordAuthFormSchema,
@@ -27,7 +28,6 @@ import {
   createSignInAuthFormSchema,
   createSignUpAuthFormSchema,
   getBehavior,
-  hasBehavior,
 } from "@firebase-ui/core";
 import { FirebaseUIContext } from "./context";
 
@@ -109,18 +109,26 @@ export function useMultiFactorTotpAuthVerifyFormSchema() {
 
 export function useRecaptchaVerifier(ref: React.RefObject<HTMLDivElement | null>) {
   const ui = useUI();
+  const verifierRef = useRef<RecaptchaVerifier | null>(null);
+  const uiRef = useRef(ui);
+  const prevElementRef = useRef<HTMLDivElement | null>(null);
 
-  const verifier = useMemo(() => {
-    return ref.current && hasBehavior(ui, "recaptchaVerification")
-      ? getBehavior(ui, "recaptchaVerification")(ui, ref.current)
-      : null;
-  }, [ref, ui]);
+  uiRef.current = ui;
 
   useEffect(() => {
-    if (verifier) {
-      verifier.render();
+    const currentElement = ref.current;
+    const currentUI = uiRef.current;
+
+    if (currentElement !== prevElementRef.current) {
+      prevElementRef.current = currentElement;
+      if (currentElement) {
+        verifierRef.current = getBehavior(currentUI, "recaptchaVerification")(currentUI, currentElement);
+        verifierRef.current.render();
+      } else {
+        verifierRef.current = null;
+      }
     }
-  }, [verifier]);
+  }, [ref]);
 
-  return verifier;
+  return verifierRef.current;
 }