refactor(core,react): Break out phone auth schemas

Ehesp · Ehesp · commit fba78c52cd2b · 2025-10-06T12:42:13.000+01:00
diff --git a/packages/core/src/schemas.test.ts b/packages/core/src/schemas.test.ts
@@ -3,7 +3,8 @@ import { createMockUI } from "~/tests/utils";
 import {
   createEmailLinkAuthFormSchema,
   createForgotPasswordAuthFormSchema,
-  createPhoneAuthFormSchema,
+  createPhoneAuthNumberFormSchema,
+  createPhoneAuthVerifyFormSchema,
   createSignInAuthFormSchema,
   createSignUpAuthFormSchema,
 } from "./schemas";
@@ -204,19 +205,19 @@ describe("createEmailLinkAuthFormSchema", () => {
   });
 });
 
-describe("createPhoneAuthFormSchema", () => {
-  it("should create a phone auth form schema and show missing phone number error", () => {
+describe("createPhoneAuthNumberFormSchema", () => {
+  it("should create a phone auth number form schema and show missing phone number error", () => {
     const testLocale = registerLocale("test", {
       errors: {
-        missingPhoneNumber: "createPhoneAuthFormSchema + missingPhoneNumber",
+        missingPhoneNumber: "createPhoneAuthNumberFormSchema + missingPhoneNumber",
       },
     });
 
     const mockUI = createMockUI({
       locale: testLocale,
     });
 
-    const schema = createPhoneAuthFormSchema(mockUI);
+    const schema = createPhoneAuthNumberFormSchema(mockUI);
 
     // Cause the schema to fail...
     // TODO(ehesp): If no value is provided, the schema error is just "Required" - should this also be translated?
@@ -227,59 +228,84 @@ describe("createPhoneAuthFormSchema", () => {
     expect(result.success).toBe(false);
     expect(result.error).toBeDefined();
 
-    expect(result.error?.issues[0]?.message).toBe("createPhoneAuthFormSchema + missingPhoneNumber");
+    expect(result.error?.issues[0]?.message).toBe("createPhoneAuthNumberFormSchema + missingPhoneNumber");
   });
 
-  it("should create a phone auth form schema and show an error if the phone number is too long", () => {
+  it("should create a phone auth number form schema and show an error if the phone number is too long", () => {
     const testLocale = registerLocale("test", {
       errors: {
-        invalidPhoneNumber: "createPhoneAuthFormSchema + invalidPhoneNumber",
+        invalidPhoneNumber: "createPhoneAuthNumberFormSchema + invalidPhoneNumber",
       },
     });
 
     const mockUI = createMockUI({
       locale: testLocale,
     });
 
-    const schema = createPhoneAuthFormSchema(mockUI);
+    const schema = createPhoneAuthNumberFormSchema(mockUI);
 
     // Cause the schema to fail...
     // TODO(ehesp): If no value is provided, the schema error is just "Required" - should this also be translated?
     const result = schema.safeParse({
       phoneNumber: "12345678901",
-      verificationCode: "123",
-      recaptchaVerifier: null,
     });
 
     expect(result.success).toBe(false);
     expect(result.error).toBeDefined();
 
-    expect(result.error?.issues[0]?.message).toBe("createPhoneAuthFormSchema + invalidPhoneNumber");
+    expect(result.error?.issues[0]?.message).toBe("createPhoneAuthNumberFormSchema + invalidPhoneNumber");
+  });
+});
+
+describe("createPhoneAuthVerifyFormSchema", () => {
+  it("should create a phone auth verify form schema and show missing verification ID error", () => {
+    const testLocale = registerLocale("test", {
+      errors: {
+        missingVerificationId: "createPhoneAuthVerifyFormSchema + missingVerificationId",
+      },
+    });
+
+    const mockUI = createMockUI({
+      locale: testLocale,
+    });
+
+    const schema = createPhoneAuthVerifyFormSchema(mockUI);
+
+    const result = schema.safeParse({
+      verificationId: "",
+      verificationCode: "123456",
+    });
+
+    expect(result.success).toBe(false);
+    expect(result.error).toBeDefined();
+
+    expect(result.error?.issues[0]?.message).toBe("createPhoneAuthVerifyFormSchema + missingVerificationId");
   });
 
-  it("should create a phone auth form schema and show an error if the verification code is too short", () => {
+  it("should create a phone auth verify form schema and show an error if the verification code is too short", () => {
     const testLocale = registerLocale("test", {
       errors: {
-        invalidVerificationCode: "createPhoneAuthFormSchema + invalidVerificationCode",
+        invalidVerificationCode: "createPhoneAuthVerifyFormSchema + invalidVerificationCode",
       },
     });
 
     const mockUI = createMockUI({
       locale: testLocale,
     });
 
-    const schema = createPhoneAuthFormSchema(mockUI);
+    const schema = createPhoneAuthVerifyFormSchema(mockUI);
 
     const result = schema.safeParse({
-      phoneNumber: "1234567890",
+      verificationId: "test-verification-id",
       verificationCode: "123",
-      recaptchaVerifier: {} as RecaptchaVerifier, // Workaround for RecaptchaVerifier failing with Node env.
     });
 
     expect(result.success).toBe(false);
     expect(result.error).toBeDefined();
     expect(
-      result.error?.issues.some((issue) => issue.message === "createPhoneAuthFormSchema + invalidVerificationCode")
+      result.error?.issues.some(
+        (issue) => issue.message === "createPhoneAuthVerifyFormSchema + invalidVerificationCode"
+      )
     ).toBe(true);
   });
 });
diff --git a/packages/core/src/schemas.ts b/packages/core/src/schemas.ts
@@ -15,7 +15,6 @@
  */
 
 import * as z from "zod";
-import { RecaptchaVerifier } from "firebase/auth";
 import { getTranslation } from "./translations";
 import { FirebaseUIConfiguration } from "./config";
 import { hasBehavior } from "./behaviors";
@@ -56,21 +55,27 @@ export function createEmailLinkAuthFormSchema(ui: FirebaseUIConfiguration) {
   });
 }
 
-export function createPhoneAuthFormSchema(ui: FirebaseUIConfiguration) {
+export function createPhoneAuthNumberFormSchema(ui: FirebaseUIConfiguration) {
   return z.object({
     phoneNumber: z
       .string()
       .min(1, getTranslation(ui, "errors", "missingPhoneNumber"))
       .max(10, getTranslation(ui, "errors", "invalidPhoneNumber")),
+  });
+}
+
+export function createPhoneAuthVerifyFormSchema(ui: FirebaseUIConfiguration) {
+  return z.object({
+    verificationId: z.string().min(1, getTranslation(ui, "errors", "missingVerificationId")),
     verificationCode: z.string().refine((val) => !val || val.length >= 6, {
       error: getTranslation(ui, "errors", "invalidVerificationCode"),
     }),
-    recaptchaVerifier: z.instanceof(RecaptchaVerifier),
   });
 }
 
 export type SignInAuthFormSchema = z.infer<ReturnType<typeof createSignInAuthFormSchema>>;
 export type SignUpAuthFormSchema = z.infer<ReturnType<typeof createSignUpAuthFormSchema>>;
 export type ForgotPasswordAuthFormSchema = z.infer<ReturnType<typeof createForgotPasswordAuthFormSchema>>;
 export type EmailLinkAuthFormSchema = z.infer<ReturnType<typeof createEmailLinkAuthFormSchema>>;
-export type PhoneAuthFormSchema = z.infer<ReturnType<typeof createPhoneAuthFormSchema>>;
+export type PhoneAuthNumberFormSchema = z.infer<ReturnType<typeof createPhoneAuthNumberFormSchema>>;
+export type PhoneAuthVerifyFormSchema = z.infer<ReturnType<typeof createPhoneAuthVerifyFormSchema>>;
diff --git a/packages/react/src/auth/forms/phone-auth-form.tsx b/packages/react/src/auth/forms/phone-auth-form.tsx
@@ -27,7 +27,7 @@ import {
 } from "@firebase-ui/core";
 import { RecaptchaVerifier, UserCredential } from "firebase/auth";
 import { useCallback, useRef, useState } from "react";
-import { usePhoneAuthFormSchema, useRecaptchaVerifier, useUI } from "~/hooks";
+import { usePhoneAuthNumberFormSchema, usePhoneAuthVerifyFormSchema, useRecaptchaVerifier, useUI } from "~/hooks";
 import { form } from "~/components/form";
 import { Policies } from "~/components/policies";
 import { CountrySelector } from "~/components/country-selector";
@@ -51,7 +51,7 @@ type UsePhoneNumberForm = {
 
 export function usePhoneNumberForm({ recaptchaVerifier, onSuccess, formatPhoneNumber }: UsePhoneNumberForm) {
   const action = usePhoneNumberFormAction();
-  const schema = usePhoneAuthFormSchema().pick({ phoneNumber: true });
+  const schema = usePhoneAuthNumberFormSchema();
 
   return form.useAppForm({
     defaultValues: {
@@ -146,19 +146,20 @@ type UseVerifyPhoneNumberForm = {
 };
 
 export function useVerifyPhoneNumberForm({ verificationId, onSuccess }: UseVerifyPhoneNumberForm) {
-  const schema = usePhoneAuthFormSchema().pick({ verificationCode: true });
+  const schema = usePhoneAuthVerifyFormSchema();
   const action = useVerifyPhoneNumberFormAction();
 
   return form.useAppForm({
     defaultValues: {
+      verificationId,
       verificationCode: "",
     },
     validators: {
       onSubmit: schema,
       onBlur: schema,
       onSubmitAsync: async ({ value }) => {
         try {
-          const credential = await action({ verificationId, verificationCode: value.verificationCode });
+          const credential = await action(value);
           return onSuccess(credential);
         } catch (error) {
           return error instanceof FirebaseUIError ? error.message : String(error);
diff --git a/packages/react/src/hooks.test.tsx b/packages/react/src/hooks.test.tsx
@@ -22,7 +22,8 @@ import {
   useSignUpAuthFormSchema,
   useForgotPasswordAuthFormSchema,
   useEmailLinkAuthFormSchema,
-  usePhoneAuthFormSchema,
+  usePhoneAuthNumberFormSchema,
+  usePhoneAuthVerifyFormSchema,
 } from "./hooks";
 import { createFirebaseUIProvider, createMockUI } from "~/tests/utils";
 import { registerLocale, enUs } from "@firebase-ui/translations";
@@ -508,7 +509,7 @@ describe("useEmailLinkAuthFormSchema", () => {
   });
 });
 
-describe("usePhoneAuthFormSchema", () => {
+describe("usePhoneAuthNumberFormSchema", () => {
   beforeEach(() => {
     vi.clearAllMocks();
     cleanup();
@@ -517,7 +518,7 @@ describe("usePhoneAuthFormSchema", () => {
   it("returns schema with default English error messages", () => {
     const mockUI = createMockUI();
 
-    const { result } = renderHook(() => usePhoneAuthFormSchema(), {
+    const { result } = renderHook(() => usePhoneAuthNumberFormSchema(), {
       wrapper: ({ children }) => createFirebaseUIProvider({ children, ui: mockUI }),
     });
 
@@ -540,7 +541,7 @@ describe("usePhoneAuthFormSchema", () => {
     const customLocale = registerLocale("es-ES", customTranslations);
     const mockUI = createMockUI({ locale: customLocale });
 
-    const { result } = renderHook(() => usePhoneAuthFormSchema(), {
+    const { result } = renderHook(() => usePhoneAuthNumberFormSchema(), {
       wrapper: ({ children }) => createFirebaseUIProvider({ children, ui: mockUI }),
     });
 
@@ -556,7 +557,7 @@ describe("usePhoneAuthFormSchema", () => {
   it("returns stable reference when UI hasn't changed", () => {
     const mockUI = createMockUI();
 
-    const { result, rerender } = renderHook(() => usePhoneAuthFormSchema(), {
+    const { result, rerender } = renderHook(() => usePhoneAuthNumberFormSchema(), {
       wrapper: ({ children }) => createFirebaseUIProvider({ children, ui: mockUI }),
     });
 
@@ -570,7 +571,7 @@ describe("usePhoneAuthFormSchema", () => {
   it("returns new schema when locale changes", () => {
     const mockUI = createMockUI();
 
-    const { result, rerender } = renderHook(() => usePhoneAuthFormSchema(), {
+    const { result, rerender } = renderHook(() => usePhoneAuthNumberFormSchema(), {
       wrapper: ({ children }) => createFirebaseUIProvider({ children, ui: mockUI }),
     });
 
@@ -599,3 +600,95 @@ describe("usePhoneAuthFormSchema", () => {
     }
   });
 });
+
+describe("usePhoneAuthVerifyFormSchema", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    cleanup();
+  });
+
+  it("returns schema with default English error messages", () => {
+    const mockUI = createMockUI();
+
+    const { result } = renderHook(() => usePhoneAuthVerifyFormSchema(), {
+      wrapper: ({ children }) => createFirebaseUIProvider({ children, ui: mockUI }),
+    });
+
+    const schema = result.current;
+
+    const verifyResult = schema.safeParse({ verificationId: "test-id", verificationCode: "123" });
+    expect(verifyResult.success).toBe(false);
+    if (!verifyResult.success) {
+      expect(verifyResult.error.issues[0]!.message).toBe(enUs.translations.errors!.invalidVerificationCode);
+    }
+  });
+
+  it("returns schema with custom error messages when locale changes", () => {
+    const customTranslations = {
+      errors: {
+        invalidVerificationCode: "Por favor ingresa un código de verificación válido",
+      },
+    };
+
+    const customLocale = registerLocale("es-ES", customTranslations);
+    const mockUI = createMockUI({ locale: customLocale });
+
+    const { result } = renderHook(() => usePhoneAuthVerifyFormSchema(), {
+      wrapper: ({ children }) => createFirebaseUIProvider({ children, ui: mockUI }),
+    });
+
+    const schema = result.current;
+
+    const verifyResult = schema.safeParse({ verificationId: "test-id", verificationCode: "123" });
+    expect(verifyResult.success).toBe(false);
+    if (!verifyResult.success) {
+      expect(verifyResult.error.issues[0]!.message).toBe("Por favor ingresa un código de verificación válido");
+    }
+  });
+
+  it("returns stable reference when UI hasn't changed", () => {
+    const mockUI = createMockUI();
+
+    const { result, rerender } = renderHook(() => usePhoneAuthVerifyFormSchema(), {
+      wrapper: ({ children }) => createFirebaseUIProvider({ children, ui: mockUI }),
+    });
+
+    const initialSchema = result.current;
+
+    rerender();
+
+    expect(result.current).toBe(initialSchema);
+  });
+
+  it("returns new schema when locale changes", () => {
+    const mockUI = createMockUI();
+
+    const { result, rerender } = renderHook(() => usePhoneAuthVerifyFormSchema(), {
+      wrapper: ({ children }) => createFirebaseUIProvider({ children, ui: mockUI }),
+    });
+
+    const initialSchema = result.current;
+
+    const customTranslations = {
+      errors: {
+        invalidVerificationCode: "Custom verification error",
+      },
+    };
+    const customLocale = registerLocale("fr-FR", customTranslations);
+
+    act(() => {
+      mockUI.setKey("locale", customLocale);
+    });
+
+    rerender();
+
+    expect(result.current).not.toBe(initialSchema);
+
+    const verifyResult = result.current.safeParse({ verificationId: "test-id", verificationCode: "123" });
+    expect(verifyResult.success).toBe(false);
+
+    if (!verifyResult.success) {
+      expect(verifyResult.error.issues[0]!.message).toBe("Custom verification error");
+    }
+  });
+});
diff --git a/packages/react/src/hooks.ts b/packages/react/src/hooks.ts
@@ -18,7 +18,8 @@ import { useContext, useMemo, useEffect } from "react";
 import {
   createEmailLinkAuthFormSchema,
   createForgotPasswordAuthFormSchema,
-  createPhoneAuthFormSchema,
+  createPhoneAuthNumberFormSchema,
+  createPhoneAuthVerifyFormSchema,
   createSignInAuthFormSchema,
   createSignUpAuthFormSchema,
   getBehavior,
@@ -61,9 +62,14 @@ export function useEmailLinkAuthFormSchema() {
   return useMemo(() => createEmailLinkAuthFormSchema(ui), [ui]);
 }
 
-export function usePhoneAuthFormSchema() {
+export function usePhoneAuthNumberFormSchema() {
   const ui = useUI();
-  return useMemo(() => createPhoneAuthFormSchema(ui), [ui]);
+  return useMemo(() => createPhoneAuthNumberFormSchema(ui), [ui]);
+}
+
+export function usePhoneAuthVerifyFormSchema() {
+  const ui = useUI();
+  return useMemo(() => createPhoneAuthVerifyFormSchema(ui), [ui]);
 }
 
 export function useRecaptchaVerifier(ref: React.RefObject<HTMLDivElement | null>) {
