feat(core,react,styles,translations): Add MFA enrollment screens/forms

Author: Ehesp

examples/react/package.json

@@ -18,15 +18,15 @@
     "@firebase-ui/styles": "workspace:*",
     "@firebase-ui/translations": "workspace:*",
     "firebase": "^11.6.0",
-    "react": "^19.0.0",
-    "react-dom": "^19.0.0",
+    "react": "catalog:",
+    "react-dom": "catalog:",
     "react-router": "^7.5.1"
   },
   "devDependencies": {
     "@tailwindcss/vite": "^4.1.4",
     "@eslint/js": "^9.22.0",
-    "@types/react": "^19.0.10",
-    "@types/react-dom": "^19.0.4",
+    "@types/react": "catalog:",
+    "@types/react-dom": "catalog:",
     "@vitejs/plugin-react": "^4.3.4",
     "eslint": "^9.22.0",
     "eslint-plugin-react-hooks": "^5.2.0",

examples/react/src/App.tsx

@@ -82,6 +82,11 @@ function App() {
               Password Reset Screen
             </NavLink>
           </li>
+          <li>
+            <NavLink to="/screens/mfa-enrollment-screen" className="text-blue-500 hover:underline">
+              MFA Enrollment Screen
+            </NavLink>
+          </li>
         </ul>
       </div>
     </div>

examples/react/src/firebase/config.ts

@@ -14,4 +14,11 @@
  * limitations under the License.
  */
 
-export const firebaseConfig = {};
+export const firebaseConfig = {
+  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/main.tsx

@@ -47,6 +47,9 @@ import OAuthScreenPage from "./screens/oauth-screen";
 /** Password Reset */
 import ForgotPasswordPage from "./screens/forgot-password-screen";
 
+/** MFA Enrollment */
+import MultiFactorAuthEnrollmentScreenPage from "./screens/mfa-enrollment-screen";
+
 const root = document.getElementById("root")!;
 
 ReactDOM.createRoot(root).render(
@@ -72,6 +75,7 @@ ReactDOM.createRoot(root).render(
         <Route path="/screens/sign-up-auth-screen-w-oauth" element={<SignUpAuthScreenWithOAuthPage />} />
         <Route path="/screens/oauth-screen" element={<OAuthScreenPage />} />
         <Route path="/screens/forgot-password-screen" element={<ForgotPasswordPage />} />
+        <Route path="/screens/mfa-enrollment-screen" element={<MultiFactorAuthEnrollmentScreenPage />} />
       </Routes>
     </FirebaseUIProvider>
   </BrowserRouter>

examples/react/src/screens/mfa-enrollment-screen.tsx

@@ -0,0 +1,29 @@
+/**
+ * Copyright 2025 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+"use client";
+
+import { MultiFactorAuthEnrollmentScreen } from "@firebase-ui/react";
+import { FactorId } from "firebase/auth";
+
+export default function MultiFactorAuthEnrollmentScreenPage() {
+  return <MultiFactorAuthEnrollmentScreen 
+    hints={[FactorId.TOTP, FactorId.PHONE]}
+    onEnrollment={() => {
+      console.log("Enrollment successful");
+    }}
+  />;
+}

packages/core/src/schemas.ts

@@ -76,8 +76,7 @@ export function createPhoneAuthVerifyFormSchema(ui: FirebaseUI) {
 export function createMultiFactorPhoneAuthNumberFormSchema(ui: FirebaseUI) {
   const base = createPhoneAuthNumberFormSchema(ui);
   return base.extend({
-    // TODO(ehesp): Translation...
-    displayName: z.string().min(1, "TODO!"),
+    displayName: z.string().min(1, getTranslation(ui, "errors", "displayNameRequired")),
   });
 }