chore: Add pirate locale to react example

Author: Ehesp

examples/react/src/App.tsx

@@ -19,7 +19,7 @@ import { routes } from "./routes";
 import { useUser } from "./firebase/hooks";
 import { auth } from "./firebase/firebase";
 import { multiFactor, sendEmailVerification, signOut } from "firebase/auth";
-import { useUI } from "@invertase/firebaseui-react";
+import { MultiFactorAuthAssertionScreen, useUI } from "@invertase/firebaseui-react";
 
 function App() {
   const user = useUser();
@@ -35,9 +35,9 @@ function UnauthenticatedApp() {
   const ui = useUI();
 
   // This can trigger if the user is not on a screen already, and gets an MFA challenge - e.g. on One-Tap sign in.
-  // if (ui.multiFactorResolver) {
-  //   return <MultiFactorAuthAssertionScreen />;
-  // }
+  if (ui.multiFactorResolver) {
+    return <MultiFactorAuthAssertionScreen />;
+  }
 
   return (
     <div className="max-w-sm mx-auto pt-36 space-y-6 pb-36">

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!",
+  },
+});