fix(react,shadcn): Add description to SMS verification code input

Author: Ehesp

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

@@ -15,7 +15,7 @@
  */
 
 import { describe, it, expect, vi, beforeEach, afterEach } from "vitest";
-import { render, screen, fireEvent, renderHook, cleanup } from "@testing-library/react";
+import { render, screen, fireEvent, renderHook, cleanup, waitFor } from "@testing-library/react";
 import {
   PhoneAuthForm,
   usePhoneNumberFormAction,
@@ -80,25 +80,39 @@ import { registerLocale } from "@invertase/firebaseui-translations";
 import { FirebaseUIProvider } from "~/context";
 
 vi.mock("~/components/country-selector", () => ({
-  CountrySelector: vi.fn().mockImplementation(({ value, onChange }) => (
-    <div data-testid="country-selector">
-      <select
-        onChange={(e) =>
-          onChange &&
-          onChange({
-            code: e.target.value,
-            name: e.target.value === "US" ? "United States" : "United Kingdom",
-            dialCode: e.target.value === "US" ? "+1" : "+44",
-            emoji: e.target.value === "US" ? "🇺🇸" : "🇬🇧",
-          })
-        }
-        value={value?.code}
-      >
-        <option value="US">United States</option>
-        <option value="GB">United Kingdom</option>
-      </select>
-    </div>
-  )),
+  CountrySelector: vi.fn().mockImplementation(({ value, onChange, ref }: any) => {
+    if (ref && typeof ref === "object" && "current" in ref) {
+      ref.current = {
+        getCountry: () => ({
+          code: "US",
+          name: "United States",
+          dialCode: "+1",
+          emoji: "🇺🇸",
+        }),
+        setCountry: () => {},
+      };
+    }
+
+    return (
+      <div data-testid="country-selector">
+        <select
+          onChange={(e) =>
+            onChange &&
+            onChange({
+              code: e.target.value,
+              name: e.target.value === "US" ? "United States" : "United Kingdom",
+              dialCode: e.target.value === "US" ? "+1" : "+44",
+              emoji: e.target.value === "US" ? "🇺🇸" : "🇬🇧",
+            })
+          }
+          value={value?.code}
+        >
+          <option value="US">United States</option>
+          <option value="GB">United Kingdom</option>
+        </select>
+      </div>
+    );
+  }),
 }));
 
 describe("usePhoneNumberFormAction", () => {
@@ -545,4 +559,48 @@ describe("<PhoneAuthForm />", () => {
     expect(screen.getByRole("button", { name: "sendCode" })).toBeInTheDocument();
     expect(screen.getByTestId("country-selector")).toBeInTheDocument();
   });
+
+  it("should render the verification code form with description after phone number submission", async () => {
+    const mockUI = createMockUI({
+      locale: registerLocale("test", {
+        labels: {
+          phoneNumber: "Phone Number",
+          sendCode: "Send Code",
+          verificationCode: "verificationCode",
+          verifyCode: "verifyCode",
+        },
+        prompts: {
+          smsVerificationPrompt: "Enter the verification code sent to your phone number",
+        },
+      }),
+    });
+
+    const mockVerificationId = "test-verification-id";
+    vi.mocked(verifyPhoneNumber).mockResolvedValue(mockVerificationId);
+
+    const { container } = render(
+      <FirebaseUIProvider ui={mockUI}>
+        <PhoneAuthForm />
+      </FirebaseUIProvider>
+    );
+
+    const phoneInput = screen.getByRole("textbox", { name: /phone number/i });
+    expect(phoneInput).toBeInTheDocument();
+
+    const sendCodeButton = screen.getByRole("button", { name: /send code/i });
+
+    await act(async () => {
+      fireEvent.change(phoneInput, { target: { value: "1234567890" } });
+      fireEvent.click(sendCodeButton);
+    });
+
+    const verificationInput = await waitFor(() => {
+      return screen.getByRole("textbox", { name: /verificationCode/i });
+    });
+    expect(verificationInput).toBeInTheDocument();
+
+    const description = container.querySelector("[data-input-description]");
+    expect(description).toBeInTheDocument();
+    expect(description).toHaveTextContent("Enter the verification code sent to your phone number");
+  });
 });

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

@@ -179,7 +179,13 @@ function VerifyPhoneNumberForm(props: VerifyPhoneNumberFormProps) {
       <form.AppForm>
         <fieldset>
           <form.AppField name="verificationCode">
-            {(field) => <field.Input label={getTranslation(ui, "labels", "verificationCode")} type="text" />}
+            {(field) => (
+              <field.Input
+                label={getTranslation(ui, "labels", "verificationCode")}
+                description={getTranslation(ui, "prompts", "smsVerificationPrompt")}
+                type="text"
+              />
+            )}
           </form.AppField>
         </fieldset>
         <fieldset>

packages/shadcn/src/components/phone-auth-form.test.tsx

@@ -41,6 +41,7 @@ vi.mock("@invertase/firebaseui-core", async (importOriginal) => {
       if (category === "labels" && key === "phoneNumber") return "Phone Number";
       if (category === "labels" && key === "verificationCode") return "Verification Code";
       if (category === "labels" && key === "verifyCode") return "Verify Code";
+      if (category === "prompts" && key === "smsVerificationPrompt") return "Enter the verification code sent to your phone number";
       if (category === "errors" && key === "invalidPhoneNumber") return "Error: Invalid phone number format";
       if (category === "errors" && key === "missingPhoneNumber") return "Phone number is required";
       return key;
@@ -174,6 +175,60 @@ describe("<PhoneAuthForm />", () => {
     expect(container.querySelector("input[name='phoneNumber']")).not.toBeInTheDocument();
   });
 
+  it("should render the verification code form with description after phone number submission", async () => {
+    const mockVerificationId = "test-verification-id";
+    const mockAction = vi.fn().mockResolvedValue(mockVerificationId);
+    vi.mocked(usePhoneNumberFormAction).mockReturnValue(mockAction);
+
+    const mockUI = createMockUI({
+      locale: registerLocale("test", {
+        labels: {
+          sendCode: "Send Code",
+          phoneNumber: "Phone Number",
+          verificationCode: "Verification Code",
+          verifyCode: "Verify Code",
+        },
+        prompts: {
+          smsVerificationPrompt: "Enter the verification code sent to your phone number",
+        },
+      }),
+    });
+
+    const { container } = render(
+      <FirebaseUIProvider ui={mockUI}>
+        <PhoneAuthForm />
+      </FirebaseUIProvider>
+    );
+
+    // Initially should show phone number form
+    expect(container.querySelector("input[name='phoneNumber']")).toBeInTheDocument();
+
+    const phoneInput = container.querySelector("input[name='phoneNumber']")!;
+    const submitButton = container.querySelector("button[type='submit']")!;
+
+    act(() => {
+      fireEvent.change(phoneInput, { target: { value: "1234567890" } });
+    });
+
+    await act(async () => {
+      fireEvent.click(submitButton);
+    });
+
+    await waitFor(() => {
+      expect(mockAction).toHaveBeenCalled();
+    });
+
+    // Wait for verification form to appear
+    await waitFor(() => {
+      expect(container.querySelector("input[name='verificationCode']")).toBeInTheDocument();
+    });
+
+    // Check for description
+    const description = container.querySelector('[data-slot="form-description"]');
+    expect(description).toBeInTheDocument();
+    expect(description).toHaveTextContent("Enter the verification code sent to your phone number");
+  });
+
   it("should call onSignIn callback when verification is successful", async () => {
     const mockVerificationId = "test-verification-id";
     const mockCredential = { credential: true } as unknown as UserCredential;

packages/shadcn/src/components/phone-auth-form.tsx

@@ -22,7 +22,7 @@ import {
   type PhoneAuthVerifyFormSchema,
 } from "@invertase/firebaseui-core";
 
-import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from "@/components/ui/form";
+import { Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage } from "@/components/ui/form";
 import { Input } from "@/components/ui/input";
 import { Button } from "@/components/ui/button";
 import { Policies } from "@/components/policies";
@@ -66,6 +66,7 @@ function VerifyPhoneNumberForm(props: VerifyPhoneNumberFormProps) {
           render={({ field }) => (
             <FormItem>
               <FormLabel>{getTranslation(ui, "labels", "verificationCode")}</FormLabel>
+              <FormDescription>{getTranslation(ui, "prompts", "smsVerificationPrompt")}</FormDescription>
               <FormControl>
                 <InputOTP maxLength={6} {...field}>
                   <InputOTPGroup>