chore(*): merged latest

Author: dackers86

examples/react/src/App.tsx

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import { useUI } from "@invertase/firebaseui-react";
+import { MultiFactorAuthAssertionScreen, useUI } from "@invertase/firebaseui-react";
 import { multiFactor, sendEmailVerification, signOut } from "firebase/auth";
 import { Link, useNavigate } from "react-router";
 import { auth } from "./firebase/firebase";

examples/react/src/components/header.tsx

@@ -15,10 +15,10 @@
  */
 
 export const firebaseConfig = {
-  apiKey: "AIzaSyA7xdkFMs7iUC6XWFYjjSxf_XbVV4F1mX4",
-  authDomain: "fir-ui-2025.firebaseapp.com",
-  projectId: "fir-ui-2025",
-  storageBucket: "fir-ui-2025.firebasestorage.app",
-  messagingSenderId: "616577669988",
-  appId: "1:616577669988:web:7e67401f952fa9288df871",
+  apiKey: "AIzaSyCvMftIUCD9lUQ3BzIrimfSfBbCUQYZf-I",
+  authDomain: "fir-ui-rework.firebaseapp.com",
+  projectId: "fir-ui-rework",
+  storageBucket: "fir-ui-rework.firebasestorage.app",
+  messagingSenderId: "200312857118",
+  appId: "1:200312857118:web:94e3f69b0e0a4a863f040f",
 };

examples/react/src/firebase/config.ts

@@ -17,10 +17,12 @@
 import { BrowserRouter, Routes, Route, Outlet, NavLink } from "react-router";
 
 import ReactDOM from "react-dom/client";
-import { FirebaseUIProvider } from "@invertase/firebaseui-react";
+import { FirebaseUIProvider, useUI } from "@invertase/firebaseui-react";
 import { ui, auth } from "./firebase/firebase";
 import App from "./App";
 import { hiddenRoutes, routes } from "./routes";
+import { enUs } from "@invertase/firebaseui-translations";
+import { pirate } from "./pirate";
 
 const root = document.getElementById("root")!;
 
@@ -38,6 +40,7 @@ auth.authStateReady().then(() => {
         }}
       >
         <ThemeToggle />
+        <PirateToggle />
         <Routes>
           <Route path="/" element={<App />} />
           <Route element={<ScreenRoute />}>
@@ -70,7 +73,7 @@ function ScreenRoute() {
 function ThemeToggle() {
   return (
     <button
-      className="fixed z-10 top-8 right-8 border border-gray-300 dark:border-gray-700 rounded-md p-2 group/toggle extend-touch-target"
+      className="fixed z-10 size-10 top-8 right-8 border border-gray-300 dark:border-gray-700 rounded-md p-2 group/toggle extend-touch-target"
       onClick={() => {
         document.documentElement.classList.toggle("dark", !document.documentElement.classList.contains("dark"));
         localStorage.theme = document.documentElement.classList.contains("dark") ? "dark" : "light";
@@ -100,3 +103,23 @@ function ThemeToggle() {
     </button>
   );
 }
+
+function PirateToggle() {
+  const ui = useUI();
+  const isPirate = ui.locale.locale === "pirate";
+
+  return (
+    <button
+      className="fixed z-10 size-10 top-8 right-20 border border-gray-300 dark:border-gray-700 rounded-md p-2 group/toggle extend-touch-target"
+      onClick={() => {
+        if (isPirate) {
+          ui.setLocale(enUs);
+        } else {
+          ui.setLocale(pirate);
+        }
+      }}
+    >
+      {isPirate ? "🇺🇸" : "🏴‍☠️"}
+    </button>
+  );
+}

examples/react/src/main.tsx

@@ -0,0 +1,95 @@
+import { registerLocale } from "@invertase/firebaseui-translations";
+
+export const pirate = registerLocale("pirate", {
+  errors: {
+    userNotFound: "Arrr! No account found with this email address, matey",
+    wrongPassword: "Arrr! Incorrect password, ye scallywag",
+    invalidEmail: "Avast! Enter a valid email address, ye bilge rat",
+    userDisabled: "This account has been marooned, arrr!",
+    networkRequestFailed: "Can't connect to the server, ye land lubber! Check yer internet connection",
+    tooManyRequests: "Too many failed attempts, ye scurvy dog! Try again later",
+    missingVerificationCode: "Enter the verification code, ye scallywag",
+    emailAlreadyInUse: "An account already exists with this email, arrr!",
+    invalidCredential: "The credentials ye provided be invalid, matey",
+    weakPassword: "Ye password ain't long enough! It should be at least 8 characters",
+    unverifiedEmail: "Verify yer email address to continue, ye scallywag",
+    operationNotAllowed: "This operation ain't allowed, arrr! Contact support, matey",
+    invalidPhoneNumber: "The phone number be invalid, ye bilge rat",
+    missingPhoneNumber: "Provide a phone number, ye scallywag",
+    quotaExceeded: "SMS quota exceeded, arrr! Try again later, matey",
+    codeExpired: "The verification code has expired, ye scurvy dog",
+    captchaCheckFailed: "reCAPTCHA verification failed, arrr! Try again, matey",
+    missingVerificationId: "Complete the reCAPTCHA verification first, ye scallywag",
+    missingEmail: "Provide an email address, ye bilge rat",
+    invalidActionCode: "The password reset link be invalid or has expired, arrr!",
+    credentialAlreadyInUse: "An account already exists with this email, arrr! Sign in with that account, matey",
+    requiresRecentLogin: "This operation requires a recent login, ye scallywag! Sign in again",
+    providerAlreadyLinked: "This phone number be already linked to another account, arrr!",
+    invalidVerificationCode: "Invalid verification code, ye scurvy dog! Try again",
+    unknownError: "An unexpected error occurred, arrr!",
+    popupClosed: "The sign-in popup was closed, ye scallywag! Try again",
+    accountExistsWithDifferentCredential:
+      "An account already exists with this email, arrr! Sign in with the original provider, matey",
+    displayNameRequired: "Provide a display name, ye bilge rat",
+    secondFactorAlreadyInUse: "This phone number be already enrolled with this account, arrr!",
+  },
+  messages: {
+    passwordResetEmailSent: "Password reset email sent successfully, arrr!",
+    signInLinkSent: "Sign-in link sent successfully, matey!",
+    verificationCodeFirst: "Request a verification code first, ye scallywag",
+    checkEmailForReset: "Check yer email for password reset instructions, ye bilge rat",
+    dividerOr: "or",
+    termsAndPrivacy: "By continuing, ye agree to our {tos} and {privacy}, arrr!",
+    mfaSmsAssertionPrompt:
+      "A verification code will be sent to {phoneNumber} to complete the authentication process, matey.",
+  },
+  labels: {
+    emailAddress: "Email Address, ye bilge rat",
+    password: "Password, ye scallywag",
+    displayName: "Display Name, ye bilge rat",
+    forgotPassword: "Forgot Password, ye scallywag?",
+    signUp: "Sign Up, Matey",
+    signIn: "Sign In, Matey",
+    resetPassword: "Reset Password, ye scallywag",
+    createAccount: "Create Account, ye bilge rat",
+    backToSignIn: "Back to Sign In, ye scallywag",
+    signInWithPhone: "Sign in with Phone, ye scallywag",
+    phoneNumber: "Phone Number, ye bilge rat",
+    verificationCode: "Verification Code, ye scallywag",
+    sendCode: "Send Code, ye scallywag",
+    verifyCode: "Verify Code, ye scallywag",
+    signInWithGoogle: "Sign in with ye Google Account",
+    signInWithFacebook: "Sign in with ye Facebook Account",
+    signInWithApple: "Sign in with ye Apple Account",
+    signInWithMicrosoft: "Sign in with ye Microsoft Account",
+    signInWithGitHub: "Sign in with ye GitHub Account",
+    signInWithTwitter: "Sign in with ye X Account",
+    signInWithEmailLink: "Sign in with Email Link",
+    sendSignInLink: "Send Sign-in Link",
+    termsOfService: "Terms of Service",
+    privacyPolicy: "Privacy Policy",
+    resendCode: "Resend ye Code",
+    sending: "Firing...",
+    multiFactorEnrollment: "Multi-factor Enrrrrrrollment!",
+    multiFactorAssertion: "Multi-factor Authentication, arrr!",
+    mfaTotpVerification: "TOTP Verification, arrr!",
+    mfaSmsVerification: "SMS Verification, arrr!",
+    generateQrCode: "Generate ye QR Code",
+  },
+  prompts: {
+    noAccount: "Don't have an account, ye scallywag?",
+    haveAccount: "Already have an account, matey?",
+    enterEmailToReset: "Enter yer email address to reset yer password, ye bilge rat",
+    signInToAccount: "Sign in to yer account, matey",
+    smsVerificationPrompt: "Enter the verification code sent to yer phone number, ye scallywag",
+    enterDetailsToCreate: "Enter yer details to create a new account, ye bilge rat",
+    enterPhoneNumber: "Enter yer phone number, matey",
+    enterVerificationCode: "Enter the verification code, ye scallywag",
+    enterEmailForLink: "Enter yer email to receive a sign-in link, ye bilge rat",
+    mfaEnrollmentPrompt: "Select a new multi-factor enrollment method, arrr!",
+    mfaAssertionPrompt: "Complete the multi-factor authentication process, ye scallywag",
+    mfaAssertionFactorPrompt: "Choose a multi-factor authentication method, matey",
+    mfaTotpQrCodePrompt: "Scan this QR code with yer authenticator app, ye bilge rat",
+    mfaTotpEnrollmentVerificationPrompt: "Add the code generated by yer authenticator app, arrr!",
+  },
+});

examples/react/src/pirate.ts

@@ -24,6 +24,26 @@ describe("getTranslation", () => {
     const translation = getTranslation(mockUI, "errors", "userNotFound");
 
     expect(translation).toBe("test + userNotFound");
-    expect(_getTranslation).toHaveBeenCalledWith(testLocale, "errors", "userNotFound");
+    expect(_getTranslation).toHaveBeenCalledWith(testLocale, "errors", "userNotFound", undefined);
+  });
+
+  it("should pass replacements to the underlying getTranslation function", () => {
+    const testLocale = registerLocale("test", {
+      messages: {
+        termsAndPrivacy: "By continuing, you agree to our {tos} and {privacy}.",
+      },
+    });
+
+    vi.mocked(_getTranslation).mockReturnValue("By continuing, you agree to our Terms of Service and Privacy Policy.");
+
+    const mockUI = createMockUI({ locale: testLocale });
+    const replacements = {
+      tos: "Terms of Service",
+      privacy: "Privacy Policy",
+    };
+    const translation = getTranslation(mockUI, "messages", "termsAndPrivacy", replacements);
+
+    expect(translation).toBe("By continuing, you agree to our Terms of Service and Privacy Policy.");
+    expect(_getTranslation).toHaveBeenCalledWith(testLocale, "messages", "termsAndPrivacy", replacements);
   });
 });

packages/core/src/translations.test.ts

@@ -21,6 +21,11 @@ import {
 } from "@invertase/firebaseui-translations";
 import { type FirebaseUI } from "./config";
 
-export function getTranslation<T extends TranslationCategory>(ui: FirebaseUI, category: T, key: TranslationKey<T>) {
-  return _getTranslation(ui.locale, category, key);
+export function getTranslation<T extends TranslationCategory>(
+  ui: FirebaseUI,
+  category: T,
+  key: TranslationKey<T>,
+  replacements?: Record<string, string>
+) {
+  return _getTranslation(ui.locale, category, key, replacements);
 }

packages/core/src/translations.ts

@@ -173,7 +173,10 @@ describe("<SmsMultiFactorAssertionForm />", () => {
       locale: registerLocale("test", {
         labels: {
           sendCode: "sendCode",
-          phoneNumber: "phoneNumber",
+        },
+        messages: {
+          mfaSmsAssertionPrompt:
+            "A verification code will be sent to {phoneNumber} to complete the authentication process.",
         },
       }),
     });
@@ -195,8 +198,9 @@ describe("<SmsMultiFactorAssertionForm />", () => {
     const form = container.querySelectorAll("form.fui-form");
     expect(form.length).toBe(1);
 
-    expect(screen.getByRole("textbox", { name: /phoneNumber/i })).toBeInTheDocument();
-    expect(screen.getByRole("textbox", { name: /phoneNumber/i })).toHaveValue("+1234567890");
+    expect(
+      screen.getByText("A verification code will be sent to +1234567890 to complete the authentication process.")
+    ).toBeInTheDocument();
 
     const sendCodeButton = screen.getByRole("button", { name: "sendCode" });
     expect(sendCodeButton).toBeInTheDocument();
@@ -208,8 +212,9 @@ describe("<SmsMultiFactorAssertionForm />", () => {
   it("should display phone number from hint", () => {
     const mockUI = createMockUI({
       locale: registerLocale("test", {
-        labels: {
-          phoneNumber: "phoneNumber",
+        messages: {
+          mfaSmsAssertionPrompt:
+            "A verification code will be sent to {phoneNumber} to complete the authentication process.",
         },
       }),
     });
@@ -228,15 +233,17 @@ describe("<SmsMultiFactorAssertionForm />", () => {
       })
     );
 
-    const phoneInput = screen.getByRole("textbox", { name: /phoneNumber/i });
-    expect(phoneInput).toHaveValue("+1234567890");
+    expect(
+      screen.getByText("A verification code will be sent to +1234567890 to complete the authentication process.")
+    ).toBeInTheDocument();
   });
 
   it("should handle missing phone number in hint", () => {
     const mockUI = createMockUI({
       locale: registerLocale("test", {
-        labels: {
-          phoneNumber: "phoneNumber",
+        messages: {
+          mfaSmsAssertionPrompt:
+            "A verification code will be sent to {phoneNumber} to complete the authentication process.",
         },
       }),
     });
@@ -254,15 +261,18 @@ describe("<SmsMultiFactorAssertionForm />", () => {
       })
     );
 
-    const phoneInput = screen.getByRole("textbox", { name: /phoneNumber/i });
-    expect(phoneInput).toHaveValue("");
+    // When phone number is missing, the placeholder remains because empty string is falsy in the replacement logic
+    expect(
+      screen.getByText("A verification code will be sent to {phoneNumber} to complete the authentication process.")
+    ).toBeInTheDocument();
   });
 
   it("should accept onSuccess callback prop", () => {
     const mockUI = createMockUI({
       locale: registerLocale("test", {
-        labels: {
-          phoneNumber: "phoneNumber",
+        messages: {
+          mfaSmsAssertionPrompt:
+            "A verification code will be sent to {phoneNumber} to complete the authentication process.",
         },
       }),
     });
@@ -290,10 +300,13 @@ describe("<SmsMultiFactorAssertionForm />", () => {
       locale: registerLocale("test", {
         labels: {
           sendCode: "sendCode",
-          phoneNumber: "phoneNumber",
           verificationCode: "verificationCode",
           verifyCode: "verifyCode",
         },
+        messages: {
+          mfaSmsAssertionPrompt:
+            "A verification code will be sent to {phoneNumber} to complete the authentication process.",
+        },
       }),
     });
 
@@ -304,9 +317,7 @@ describe("<SmsMultiFactorAssertionForm />", () => {
       enrollmentTime: "2023-01-01T00:00:00Z",
     };
 
-    // First step returns a verificationId
     vi.mocked(verifyPhoneNumber).mockResolvedValue("vid-123");
-    // Second step returns a credential from MFA assertion
     const mockCredential = { user: { uid: "sms-cred-user" } } as any;
     vi.mocked(signInWithMultiFactorAssertion).mockResolvedValue(mockCredential);