refactor: Align PhoneAuth{Screen,Form} with API spec

Author: Ehesp

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

@@ -16,7 +16,7 @@
 
 import { describe, it, expect, vi, beforeEach } from "vitest";
 import { render, screen, fireEvent } from "@testing-library/react";
-import { PhoneForm } from "../../../../src/auth/forms/phone-form";
+import { PhoneAuthForm } from "./phone-auth-form";
 import { act } from "react";
 
 // Mock Firebase Auth
@@ -156,7 +156,7 @@ vi.mock("../../../../src/components/country-selector", () => ({
 // Import the actual functions after mocking
 import { signInWithPhoneNumber } from "@firebase-ui/core";
 
-describe("PhoneForm", () => {
+describe("PhoneAuthForm", () => {
   beforeEach(() => {
     vi.clearAllMocks();
     // Reset the global state
@@ -165,7 +165,7 @@ describe("PhoneForm", () => {
   });
 
   it("renders the phone number form initially", () => {
-    render(<PhoneForm />);
+    render(<PhoneAuthForm />);
 
     expect(screen.getByRole("textbox", { name: /phone number/i })).toBeInTheDocument();
     expect(screen.getByTestId("country-selector")).toBeInTheDocument();
@@ -174,7 +174,7 @@ describe("PhoneForm", () => {
   });
 
   it("attempts to send verification code when phone number is submitted", async () => {
-    render(<PhoneForm />);
+    render(<PhoneAuthForm />);
 
     // Get the submit button
     const submitButton = screen.getByTestId("submit-button");
@@ -208,7 +208,7 @@ describe("PhoneForm", () => {
     (mockError as any).code = "auth/invalid-phone-number";
     (signInWithPhoneNumber as unknown as ReturnType<typeof vi.fn>).mockRejectedValueOnce(mockError);
 
-    render(<PhoneForm />);
+    render(<PhoneAuthForm />);
 
     // Get the submit button
     const submitButton = screen.getByTestId("submit-button");
@@ -236,7 +236,7 @@ describe("PhoneForm", () => {
   });
 
   it("validates on blur for the first time", async () => {
-    render(<PhoneForm />);
+    render(<PhoneAuthForm />);
 
     const phoneInput = screen.getByRole("textbox", { name: /phone number/i });
 
@@ -249,7 +249,7 @@ describe("PhoneForm", () => {
   });
 
   it("validates on input after first blur", async () => {
-    render(<PhoneForm />);
+    render(<PhoneAuthForm />);
 
     const phoneInput = screen.getByRole("textbox", { name: /phone number/i });
 

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

@@ -30,7 +30,7 @@ import { useForm } from "@tanstack/react-form";
 import { ConfirmationResult, RecaptchaVerifier } from "firebase/auth";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { z } from "zod";
-import { useAuth, useUI } from "~/hooks";
+import { useUI } from "~/hooks";
 import { Button } from "../../components/button";
 import { CountrySelector } from "../../components/country-selector";
 import { FieldInfo } from "../../components/field-info";
@@ -46,6 +46,7 @@ interface PhoneNumberFormProps {
 function PhoneNumberForm({ onSubmit, formError, recaptchaVerifier, recaptchaContainerRef }: PhoneNumberFormProps) {
   const ui = useUI();
 
+  // TODO(ehesp): How does this support allowed countries?
   const [selectedCountry, setSelectedCountry] = useState<CountryData>(countryData[0]);
   const [firstValidationOccured, setFirstValidationOccured] = useState(false);
 
@@ -71,6 +72,8 @@ function PhoneNumberForm({ onSubmit, formError, recaptchaVerifier, recaptchaCont
     },
   });
 
+  // TODO(ehesp): Country data onChange types are not matching
+
   return (
     <form
       className="fui-form"
@@ -91,7 +94,7 @@ function PhoneNumberForm({ onSubmit, formError, recaptchaVerifier, recaptchaCont
                 <div className="fui-phone-input">
                   <CountrySelector
                     value={selectedCountry}
-                    onChange={setSelectedCountry}
+                    onChange={(country) => setSelectedCountry(country as CountryData)}
                     className="fui-phone-input__country-selector"
                   />
                   <input
@@ -291,13 +294,12 @@ function VerificationForm({
   );
 }
 
-export interface PhoneFormProps {
+export type PhoneAuthFormProps = {
   resendDelay?: number;
 }
 
-export function PhoneForm({ resendDelay = 30 }: PhoneFormProps) {
+export function PhoneAuthForm({ resendDelay = 30 }: PhoneAuthFormProps) {
   const ui = useUI();
-  const auth = useAuth(ui);
 
   const [formError, setFormError] = useState<string | null>(null);
   const [confirmationResult, setConfirmationResult] = useState<ConfirmationResult | null>(null);
@@ -310,8 +312,9 @@ export function PhoneForm({ resendDelay = 30 }: PhoneFormProps) {
   useEffect(() => {
     if (!recaptchaContainerRef.current) return;
 
-    const verifier = new RecaptchaVerifier(auth, recaptchaContainerRef.current, {
-      size: ui.recaptchaMode ?? "normal",
+    const verifier = new RecaptchaVerifier(ui.auth, recaptchaContainerRef.current, {
+      // size: ui.recaptchaMode ?? "normal", TODO(ehesp): Get this from the useRecaptchaVerifier hook once implemented
+      size: "normal",
     });
 
     setRecaptchaVerifier(verifier);
@@ -320,7 +323,7 @@ export function PhoneForm({ resendDelay = 30 }: PhoneFormProps) {
       verifier.clear();
       setRecaptchaVerifier(null);
     };
-  }, [auth, ui.recaptchaMode]);
+  }, [ui]);
 
   const handlePhoneSubmit = async (number: string) => {
     setFormError(null);
@@ -356,8 +359,9 @@ export function PhoneForm({ resendDelay = 30 }: PhoneFormProps) {
         recaptchaVerifier.clear();
       }
 
-      const verifier = new RecaptchaVerifier(auth, recaptchaContainerRef.current, {
-        size: ui.recaptchaMode ?? "normal",
+      const verifier = new RecaptchaVerifier(ui.auth, recaptchaContainerRef.current, {
+        // size: ui.recaptchaMode ?? "normal", // TODO(ehesp): Get this from the useRecaptchaVerifier hook once implemented
+        size: "normal",
       });
       setRecaptchaVerifier(verifier);
 

packages/react/src/auth/screens/phone-auth-screen.tsx

@@ -18,14 +18,12 @@ import type { PropsWithChildren } from "react";
 import { getTranslation } from "@firebase-ui/core";
 import { Divider } from "~/components/divider";
 import { useUI } from "~/hooks";
-import { Card, CardHeader, CardSubtitle, CardTitle } from "../../components/card";
-import { PhoneForm } from "../forms/phone-form";
+import { Card, CardContent, CardHeader, CardSubtitle, CardTitle } from "../../components/card";
+import { PhoneAuthForm, type PhoneAuthFormProps } from "../forms/phone-auth-form";
 
-export type PhoneAuthScreenProps = PropsWithChildren<{
-  resendDelay?: number;
-}>;
+export type PhoneAuthScreenProps = PropsWithChildren<PhoneAuthFormProps>;
 
-export function PhoneAuthScreen({ children, resendDelay }: PhoneAuthScreenProps) {
+export function PhoneAuthScreen({ children, ...props }: PhoneAuthScreenProps) {
   const ui = useUI();
 
   const titleText = getTranslation(ui, "labels", "signIn");
@@ -38,13 +36,15 @@ export function PhoneAuthScreen({ children, resendDelay }: PhoneAuthScreenProps)
           <CardTitle>{titleText}</CardTitle>
           <CardSubtitle>{subtitleText}</CardSubtitle>
         </CardHeader>
-        <PhoneForm resendDelay={resendDelay} />
-        {children ? (
-          <>
-            <Divider>{getTranslation(ui, "messages", "dividerOr")}</Divider>
-            <div className="space-y-4">{children}</div>
-          </>
-        ) : null}
+        <CardContent>
+          <PhoneAuthForm {...props} />
+          {children ? (
+            <>
+              <Divider>{getTranslation(ui, "messages", "dividerOr")}</Divider>
+              <div className="space-y-4">{children}</div>
+            </>
+          ) : null}
+        </CardContent>
       </Card>
     </div>
   );