fix(shadcn): Catch MFA assertion errors in sign up form

Author: Ehesp

packages/shadcn/src/components/sign-up-auth-screen.test.tsx

@@ -20,6 +20,7 @@ import { SignUpAuthScreen } from "./sign-up-auth-screen";
 import { createMockUI } from "../../tests/utils";
 import { registerLocale } from "@firebase-ui/translations";
 import { FirebaseUIProvider } from "@firebase-ui/react";
+import { MultiFactorResolver } from "firebase/auth";
 
 vi.mock("./sign-up-auth-form", () => ({
   SignUpAuthForm: ({ onSignUp, onBackToSignInClick }: any) => (
@@ -31,6 +32,10 @@ vi.mock("./sign-up-auth-form", () => ({
   ),
 }));
 
+vi.mock("./multi-factor-auth-assertion-form", () => ({
+  MultiFactorAuthAssertionForm: () => <div data-testid="mfa-assertion-form">MFA Assertion Form</div>,
+}));
+
 describe("<SignUpAuthScreen />", () => {
   beforeEach(() => {
     vi.clearAllMocks();
@@ -144,4 +149,89 @@ describe("<SignUpAuthScreen />", () => {
     expect(screen.getByTestId("sign-up-auth-form")).toBeInTheDocument();
     expect(screen.queryByText("or")).not.toBeInTheDocument();
   });
+
+  it("should render MultiFactorAuthAssertionForm when multiFactorResolver is present", () => {
+    const mockResolver = {
+      auth: {} as any,
+      session: null,
+      hints: [],
+    };
+    const mockUI = createMockUI({
+      locale: registerLocale("test", {
+        labels: {
+          signUp: "Register",
+        },
+        prompts: {
+          enterDetailsToCreate: "Enter your details to create an account",
+        },
+      }),
+    });
+    mockUI.get().setMultiFactorResolver(mockResolver as unknown as MultiFactorResolver);
+
+    render(
+      <FirebaseUIProvider ui={mockUI}>
+        <SignUpAuthScreen />
+      </FirebaseUIProvider>
+    );
+
+    expect(screen.getByTestId("mfa-assertion-form")).toBeInTheDocument();
+    expect(screen.queryByTestId("sign-up-auth-form")).not.toBeInTheDocument();
+  });
+
+  it("should not render SignUpAuthForm when MFA resolver exists", () => {
+    const mockResolver = {
+      auth: {} as any,
+      session: null,
+      hints: [],
+    };
+    const mockUI = createMockUI({
+      locale: registerLocale("test", {
+        labels: {
+          signUp: "Register",
+        },
+        prompts: {
+          enterDetailsToCreate: "Enter your details to create an account",
+        },
+        messages: {
+          dividerOr: "or",
+        },
+      }),
+    });
+    mockUI.get().setMultiFactorResolver(mockResolver as unknown as MultiFactorResolver);
+
+    render(
+      <FirebaseUIProvider ui={mockUI}>
+        <SignUpAuthScreen>
+          <div data-testid="child-component">Child Component</div>
+        </SignUpAuthScreen>
+      </FirebaseUIProvider>
+    );
+
+    expect(screen.queryByTestId("sign-up-auth-form")).not.toBeInTheDocument();
+    expect(screen.getByTestId("mfa-assertion-form")).toBeInTheDocument();
+    expect(screen.queryByText("or")).not.toBeInTheDocument();
+    expect(screen.queryByTestId("child-component")).not.toBeInTheDocument();
+  });
+
+  it("should render SignUpAuthForm when MFA resolver is not present", () => {
+    const mockUI = createMockUI({
+      locale: registerLocale("test", {
+        labels: {
+          signUp: "Register",
+        },
+        prompts: {
+          enterDetailsToCreate: "Enter your details to create an account",
+        },
+      }),
+    });
+
+    render(
+      <FirebaseUIProvider ui={mockUI}>
+        <SignUpAuthScreen />
+      </FirebaseUIProvider>
+    );
+
+    expect(screen.getByTestId("sign-up-auth-form")).toBeInTheDocument();
+    expect(screen.queryByTestId("mfa-assertion-form")).not.toBeInTheDocument();
+  });
 });

packages/shadcn/src/components/sign-up-auth-screen.tsx

@@ -6,6 +6,7 @@ import { useUI, type SignUpAuthScreenProps } from "@firebase-ui/react";
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
 import { Separator } from "@/components/ui/separator";
 import { SignUpAuthForm } from "@/components/sign-up-auth-form";
+import { MultiFactorAuthAssertionForm } from "@/components/multi-factor-auth-assertion-form";
 
 export type { SignUpAuthScreenProps };
 
@@ -15,6 +16,8 @@ export function SignUpAuthScreen({ children, ...props }: SignUpAuthScreenProps)
   const titleText = getTranslation(ui, "labels", "signUp");
   const subtitleText = getTranslation(ui, "prompts", "enterDetailsToCreate");
 
+  const mfaResolver = ui.multiFactorResolver;
+
   return (
     <div className="max-w-md mx-auto">
       <Card>
@@ -23,13 +26,19 @@ export function SignUpAuthScreen({ children, ...props }: SignUpAuthScreenProps)
           <CardDescription>{subtitleText}</CardDescription>
         </CardHeader>
         <CardContent>
-          <SignUpAuthForm {...props} />
-          {children ? (
+          {mfaResolver ? (
+            <MultiFactorAuthAssertionForm />
+          ) : (
             <>
-              <Separator>{getTranslation(ui, "messages", "dividerOr")}</Separator>
-              <div className="space-y-2">{children}</div>
+              <SignUpAuthForm {...props} />
+              {children ? (
+                <>
+                  <Separator>{getTranslation(ui, "messages", "dividerOr")}</Separator>
+                  <div className="space-y-2">{children}</div>
+                </>
+              ) : null}
             </>
-          ) : null}
+          )}
         </CardContent>
       </Card>
     </div>