feat(react): Handle mfa error in screens

Author: Ehesp

examples/react/src/firebase/config.ts

@@ -14,5 +14,4 @@
  * limitations under the License.
  */
 
-export const firebaseConfig = {
-};
+export const firebaseConfig = {};

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

@@ -20,10 +20,12 @@ 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");
-    }}
-  />;
+  return (
+    <MultiFactorAuthEnrollmentScreen
+      hints={[FactorId.TOTP, FactorId.PHONE]}
+      onEnrollment={() => {
+        console.log("Enrollment successful");
+      }}
+    />
+  );
 }

packages/core/src/auth.ts

@@ -57,13 +57,18 @@ async function handlePendingCredential(_ui: FirebaseUI, user: UserCredential): P
   }
 }
 
+function setPendingState(ui: FirebaseUI) {
+  ui.setRedirectError(undefined);
+  ui.setState("pending");
+}
+
 export async function signInWithEmailAndPassword(
   ui: FirebaseUI,
   email: string,
   password: string
 ): Promise<UserCredential> {
   try {
-    ui.setState("pending");
+    setPendingState(ui);
     const credential = EmailAuthProvider.credential(email, password);
 
     if (hasBehavior(ui, "autoUpgradeAnonymousCredential")) {
@@ -90,7 +95,7 @@ export async function createUserWithEmailAndPassword(
   displayName?: string
 ): Promise<UserCredential> {
   try {
-    ui.setState("pending");
+    setPendingState(ui);
     const credential = EmailAuthProvider.credential(email, password);
 
     if (hasBehavior(ui, "requireDisplayName") && !displayName) {
@@ -130,7 +135,7 @@ export async function verifyPhoneNumber(
   mfaUser?: MultiFactorUser
 ): Promise<string> {
   try {
-    ui.setState("pending");
+    setPendingState(ui);
     const provider = new PhoneAuthProvider(ui.auth);
     const session = await mfaUser?.getSession();
     return await provider.verifyPhoneNumber(
@@ -155,7 +160,7 @@ export async function confirmPhoneNumber(
   verificationCode: string
 ): Promise<UserCredential> {
   try {
-    ui.setState("pending");
+    setPendingState(ui);
     const currentUser = ui.auth.currentUser;
     const credential = PhoneAuthProvider.credential(verificationId, verificationCode);
 
@@ -178,7 +183,7 @@ export async function confirmPhoneNumber(
 
 export async function sendPasswordResetEmail(ui: FirebaseUI, email: string): Promise<void> {
   try {
-    ui.setState("pending");
+    setPendingState(ui);
     await _sendPasswordResetEmail(ui.auth, email);
   } catch (error) {
     handleFirebaseError(ui, error);
@@ -189,7 +194,7 @@ export async function sendPasswordResetEmail(ui: FirebaseUI, email: string): Pro
 
 export async function sendSignInLinkToEmail(ui: FirebaseUI, email: string): Promise<void> {
   try {
-    ui.setState("pending");
+    setPendingState(ui);
     const actionCodeSettings = {
       url: window.location.href,
       // TODO(ehesp): Check this...
@@ -213,7 +218,7 @@ export async function signInWithEmailLink(ui: FirebaseUI, email: string, link: s
 
 export async function signInWithCredential(ui: FirebaseUI, credential: AuthCredential): Promise<UserCredential> {
   try {
-    ui.setState("pending");
+    setPendingState(ui);
     if (hasBehavior(ui, "autoUpgradeAnonymousCredential")) {
       const userCredential = await getBehavior(ui, "autoUpgradeAnonymousCredential")(ui, credential);
 
@@ -235,7 +240,7 @@ export async function signInWithCredential(ui: FirebaseUI, credential: AuthCrede
 
 export async function signInAnonymously(ui: FirebaseUI): Promise<UserCredential> {
   try {
-    ui.setState("pending");
+    setPendingState(ui);
     const result = await _signInAnonymously(ui.auth);
     return handlePendingCredential(ui, result);
   } catch (error) {
@@ -247,7 +252,7 @@ export async function signInAnonymously(ui: FirebaseUI): Promise<UserCredential>
 
 export async function signInWithProvider(ui: FirebaseUI, provider: AuthProvider): Promise<UserCredential | never> {
   try {
-    ui.setState("pending");
+    setPendingState(ui);
     if (hasBehavior(ui, "autoUpgradeAnonymousProvider")) {
       const credential = await getBehavior(ui, "autoUpgradeAnonymousProvider")(ui, provider);
 
@@ -280,7 +285,7 @@ export async function completeEmailLinkSignIn(ui: FirebaseUI, currentUrl: string
     const email = window.localStorage.getItem("emailForSignIn");
     if (!email) return null;
 
-    ui.setState("pending");
+    setPendingState(ui);
     const result = await signInWithEmailLink(ui, email, currentUrl);
     return handlePendingCredential(ui, result);
   } catch (error) {
@@ -317,7 +322,7 @@ export async function enrollWithMultiFactorAssertion(
   displayName?: string
 ): Promise<void> {
   try {
-    ui.setState("pending");
+    setPendingState(ui);
     await multiFactor(ui.auth.currentUser!).enroll(assertion, displayName);
   } catch (error) {
     handleFirebaseError(ui, error);
@@ -328,7 +333,7 @@ export async function enrollWithMultiFactorAssertion(
 
 export async function generateTotpSecret(ui: FirebaseUI): Promise<TotpSecret> {
   try {
-    ui.setState("pending");
+    setPendingState(ui);
     const mfaUser = multiFactor(ui.auth.currentUser!);
     const session = await mfaUser.getSession();
     return await TotpMultiFactorGenerator.generateSecret(session);

packages/core/src/config.test.ts

@@ -383,4 +383,113 @@ describe("initializeUI", () => {
     ui.get().setMultiFactorResolver(undefined);
     expect(ui.get().multiFactorResolver).toBeUndefined();
   });
+
+  it("should have redirectError undefined by default", () => {
+    const config = {
+      app: {} as FirebaseApp,
+      auth: {} as Auth,
+    };
+
+    const ui = initializeUI(config);
+    expect(ui.get().redirectError).toBeUndefined();
+  });
+
+  it("should set and get redirectError correctly", () => {
+    const config = {
+      app: {} as FirebaseApp,
+      auth: {} as Auth,
+    };
+
+    const ui = initializeUI(config);
+    const mockError = new Error("Test redirect error");
+
+    expect(ui.get().redirectError).toBeUndefined();
+    ui.get().setRedirectError(mockError);
+    expect(ui.get().redirectError).toBe(mockError);
+    ui.get().setRedirectError(undefined);
+    expect(ui.get().redirectError).toBeUndefined();
+  });
+
+  it("should update redirectError multiple times", () => {
+    const config = {
+      app: {} as FirebaseApp,
+      auth: {} as Auth,
+    };
+
+    const ui = initializeUI(config);
+    const mockError1 = new Error("First error");
+    const mockError2 = new Error("Second error");
+
+    ui.get().setRedirectError(mockError1);
+    expect(ui.get().redirectError).toBe(mockError1);
+    ui.get().setRedirectError(mockError2);
+    expect(ui.get().redirectError).toBe(mockError2);
+    ui.get().setRedirectError(undefined);
+    expect(ui.get().redirectError).toBeUndefined();
+  });
+
+  it("should handle redirect error when getRedirectResult throws", async () => {
+    Object.defineProperty(global, "window", {
+      value: {},
+      writable: true,
+      configurable: true,
+    });
+
+    const mockAuth = {
+      currentUser: null,
+    } as any;
+
+    const mockError = new Error("Redirect failed");
+    const { getRedirectResult } = await import("firebase/auth");
+    vi.mocked(getRedirectResult).mockClear();
+    vi.mocked(getRedirectResult).mockRejectedValue(mockError);
+
+    const config = {
+      app: {} as FirebaseApp,
+      auth: mockAuth,
+    };
+
+    const ui = initializeUI(config);
+
+    // Process next tick to make sure the promise is resolved
+    await new Promise((resolve) => setTimeout(resolve, 0));
+
+    expect(getRedirectResult).toHaveBeenCalledTimes(1);
+    expect(getRedirectResult).toHaveBeenCalledWith(mockAuth);
+    expect(ui.get().redirectError).toBe(mockError);
+
+    delete (global as any).window;
+  });
+
+  it("should convert non-Error objects to Error instances in redirect catch", async () => {
+    Object.defineProperty(global, "window", {
+      value: {},
+      writable: true,
+      configurable: true,
+    });
+
+    const mockAuth = {
+      currentUser: null,
+    } as any;
+
+    const { getRedirectResult } = await import("firebase/auth");
+    vi.mocked(getRedirectResult).mockClear();
+    vi.mocked(getRedirectResult).mockRejectedValue("String error");
+
+    const config = {
+      app: {} as FirebaseApp,
+      auth: mockAuth,
+    };
+
+    const ui = initializeUI(config);
+
+    // Process next tick to make sure the promise is resolved
+    await new Promise((resolve) => setTimeout(resolve, 0));
+
+    expect(getRedirectResult).toHaveBeenCalledTimes(1);
+    expect(ui.get().redirectError).toBeInstanceOf(Error);
+    expect(ui.get().redirectError?.message).toBe("String error");
+
+    delete (global as any).window;
+  });
 });

packages/core/src/config.ts

@@ -21,6 +21,7 @@ import { deepMap, type DeepMapStore, map } from "nanostores";
 import { type Behavior, type Behaviors, defaultBehaviors } from "./behaviors";
 import type { InitBehavior, RedirectBehavior } from "./behaviors/utils";
 import { type FirebaseUIState } from "./state";
+import { handleFirebaseError } from "./errors";
 
 export type FirebaseUIOptions = {
   app: FirebaseApp;
@@ -40,6 +41,8 @@ export type FirebaseUI = {
   behaviors: Behaviors;
   multiFactorResolver?: MultiFactorResolver;
   setMultiFactorResolver: (multiFactorResolver?: MultiFactorResolver) => void;
+  redirectError?: Error;
+  setRedirectError: (error?: Error) => void;
 };
 
 export const $config = map<Record<string, DeepMapStore<FirebaseUI>>>({});
@@ -78,6 +81,11 @@ export function initializeUI(config: FirebaseUIOptions, name: string = "[DEFAULT
         const current = $config.get()[name]!;
         current.setKey(`multiFactorResolver`, resolver);
       },
+      redirectError: undefined,
+      setRedirectError: (error?: Error) => {
+        const current = $config.get()[name]!;
+        current.setKey(`redirectError`, error);
+      },
     })
   );
 
@@ -106,11 +114,17 @@ export function initializeUI(config: FirebaseUIOptions, name: string = "[DEFAULT
       });
     }
 
-    if (redirectBehaviors.length > 0) {
-      getRedirectResult(ui.auth).then((result) => {
-        Promise.all(redirectBehaviors.map((behavior) => behavior.handler(ui, result)));
+    getRedirectResult(ui.auth)
+      .then((result) => {
+        return Promise.all(redirectBehaviors.map((behavior) => behavior.handler(ui, result)));
+      })
+      .catch((error) => {
+        try {
+          handleFirebaseError(ui, error);
+        } catch (error) {
+          ui.setRedirectError(error instanceof Error ? error : new Error(String(error)));
+        }
       });
-    }
   }
 
   return store;

packages/core/tests/utils.ts

@@ -16,6 +16,8 @@ export function createMockUI(overrides?: Partial<FirebaseUI>): FirebaseUI {
     behaviors: {},
     multiFactorResolver: undefined,
     setMultiFactorResolver: vi.fn(),
+    redirectError: undefined,
+    setRedirectError: vi.fn(),
     ...overrides,
   };
 }

packages/react/src/auth/forms/email-link-auth-form.test.tsx

@@ -29,6 +29,14 @@ import { registerLocale } from "@firebase-ui/translations";
 import { FirebaseUIProvider } from "~/context";
 import type { UserCredential } from "firebase/auth";
 
+vi.mock("firebase/auth", async () => {
+  const actual = await vi.importActual("firebase/auth");
+  return {
+    ...actual,
+    getRedirectResult: vi.fn().mockResolvedValue(null),
+  };
+});
+
 vi.mock("@firebase-ui/core", async (importOriginal) => {
   const mod = await importOriginal<typeof import("@firebase-ui/core")>();
   return {

packages/react/src/auth/forms/forgot-password-auth-form.test.tsx

@@ -27,6 +27,14 @@ import { createFirebaseUIProvider, createMockUI } from "~/tests/utils";
 import { registerLocale } from "@firebase-ui/translations";
 import { FirebaseUIProvider } from "~/context";
 
+vi.mock("firebase/auth", async () => {
+  const actual = await vi.importActual("firebase/auth");
+  return {
+    ...actual,
+    getRedirectResult: vi.fn().mockResolvedValue(null),
+  };
+});
+
 vi.mock("@firebase-ui/core", async (importOriginal) => {
   const mod = await importOriginal<typeof import("@firebase-ui/core")>();
   return {

packages/react/src/auth/forms/mfa/sms-multi-factor-enrollment-form.tsx

@@ -198,6 +198,10 @@ export function MultiFactorEnrollmentVerifyPhoneNumberForm(props: MultiFactorEnr
             {(field) => <field.Input label={getTranslation(ui, "labels", "verificationCode")} type="text" />}
           </form.AppField>
         </fieldset>
+        <fieldset>
+          <form.SubmitButton>{getTranslation(ui, "labels", "verifyCode")}</form.SubmitButton>
+          <form.ErrorMessage />
+        </fieldset>
       </form.AppForm>
     </form>
   );