Merge pull request #1244 from firebase/@invertase/bb-4.1

Author: Ehesp

examples/shadcn/src/components/multi-factor-auth-assertion-form.tsx

@@ -1,6 +1,11 @@
 "use client";
 
-import { PhoneMultiFactorGenerator, TotpMultiFactorGenerator, type MultiFactorInfo } from "firebase/auth";
+import {
+  PhoneMultiFactorGenerator,
+  TotpMultiFactorGenerator,
+  type MultiFactorInfo,
+  type UserCredential,
+} from "firebase/auth";
 import { type ComponentProps, useState } from "react";
 import { getTranslation } from "@firebase-ui/core";
 import { useUI } from "@firebase-ui/react";
@@ -9,7 +14,11 @@ import { SmsMultiFactorAssertionForm } from "./sms-multi-factor-assertion-form";
 import { TotpMultiFactorAssertionForm } from "./totp-multi-factor-assertion-form";
 import { Button } from "@/components/ui/button";
 
-export function MultiFactorAuthAssertionForm() {
+export type MultiFactorAuthAssertionFormProps = {
+  onSuccess?: (credential: UserCredential) => void;
+};
+
+export function MultiFactorAuthAssertionForm(props: MultiFactorAuthAssertionFormProps) {
   const ui = useUI();
   const resolver = ui.multiFactorResolver;
 
@@ -24,11 +33,25 @@ export function MultiFactorAuthAssertionForm() {
 
   if (hint) {
     if (hint.factorId === PhoneMultiFactorGenerator.FACTOR_ID) {
-      return <SmsMultiFactorAssertionForm hint={hint} />;
+      return (
+        <SmsMultiFactorAssertionForm
+          hint={hint}
+          onSuccess={(credential) => {
+            props.onSuccess?.(credential);
+          }}
+        />
+      );
     }
 
     if (hint.factorId === TotpMultiFactorGenerator.FACTOR_ID) {
-      return <TotpMultiFactorAssertionForm hint={hint} />;
+      return (
+        <TotpMultiFactorAssertionForm
+          hint={hint}
+          onSuccess={(credential) => {
+            props.onSuccess?.(credential);
+          }}
+        />
+      );
     }
   }
 

examples/shadcn/src/components/sms-multi-factor-assertion-form.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { useRef, useState } from "react";
-import { type MultiFactorInfo } from "firebase/auth";
+import { type MultiFactorInfo, type UserCredential } from "firebase/auth";
 
 import { FirebaseUIError, getTranslation } from "@firebase-ui/core";
 import {
@@ -64,7 +64,7 @@ function SmsMultiFactorAssertionPhoneForm(props: SmsMultiFactorAssertionPhoneFor
 
 type SmsMultiFactorAssertionVerifyFormProps = {
   verificationId: string;
-  onSuccess: () => void;
+  onSuccess: (credential: UserCredential) => void;
 };
 
 function SmsMultiFactorAssertionVerifyForm(props: SmsMultiFactorAssertionVerifyFormProps) {
@@ -82,8 +82,11 @@ function SmsMultiFactorAssertionVerifyForm(props: SmsMultiFactorAssertionVerifyF
 
   const onSubmit = async (values: { verificationId: string; verificationCode: string }) => {
     try {
-      await action({ verificationId: values.verificationId, verificationCode: values.verificationCode });
-      props.onSuccess();
+      const credential = await action({
+        verificationId: values.verificationId,
+        verificationCode: values.verificationCode,
+      });
+      props.onSuccess(credential);
     } catch (error) {
       const message = error instanceof FirebaseUIError ? error.message : String(error);
       form.setError("root", { message });
@@ -126,7 +129,7 @@ function SmsMultiFactorAssertionVerifyForm(props: SmsMultiFactorAssertionVerifyF
 
 export type SmsMultiFactorAssertionFormProps = {
   hint: MultiFactorInfo;
-  onSuccess?: () => void;
+  onSuccess?: (credential: UserCredential) => void;
 };
 
 export function SmsMultiFactorAssertionForm(props: SmsMultiFactorAssertionFormProps) {
@@ -146,8 +149,8 @@ export function SmsMultiFactorAssertionForm(props: SmsMultiFactorAssertionFormPr
   return (
     <SmsMultiFactorAssertionVerifyForm
       verificationId={verification.verificationId}
-      onSuccess={() => {
-        props.onSuccess?.();
+      onSuccess={(credential) => {
+        props.onSuccess?.(credential);
       }}
     />
   );

examples/shadcn/src/components/totp-multi-factor-assertion-form.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { type MultiFactorInfo } from "firebase/auth";
+import { type MultiFactorInfo, type UserCredential } from "firebase/auth";
 import { FirebaseUIError, getTranslation } from "@firebase-ui/core";
 import {
   useMultiFactorTotpAuthVerifyFormSchema,
@@ -16,7 +16,7 @@ import { InputOTP, InputOTPGroup, InputOTPSlot } from "@/components/ui/input-otp
 
 type TotpMultiFactorAssertionFormProps = {
   hint: MultiFactorInfo;
-  onSuccess?: () => void;
+  onSuccess?: (credential: UserCredential) => void;
 };
 
 export function TotpMultiFactorAssertionForm(props: TotpMultiFactorAssertionFormProps) {
@@ -33,8 +33,8 @@ export function TotpMultiFactorAssertionForm(props: TotpMultiFactorAssertionForm
 
   const onSubmit = async (values: { verificationCode: string }) => {
     try {
-      await action({ verificationCode: values.verificationCode, hint: props.hint });
-      props.onSuccess?.();
+      const credential = await action({ verificationCode: values.verificationCode, hint: props.hint });
+      props.onSuccess?.(credential);
     } catch (error) {
       const message = error instanceof FirebaseUIError ? error.message : String(error);
       form.setError("root", { message });

packages/shadcn/registry-spec.json

@@ -443,7 +443,12 @@
       "title": "Sign Up Auth Screen",
       "description": "A screen allowing users to sign up with email and password.",
       "dependencies": ["{{ DEP | @firebase-ui/react }}"],
-      "registryDependencies": ["separator", "card", "{{ DOMAIN }}/sign-up-auth-form.json"],
+      "registryDependencies": [
+        "separator",
+        "card",
+        "{{ DOMAIN }}/sign-up-auth-form.json",
+        "{{ DOMAIN }}/multi-factor-auth-assertion-form.json"
+      ],
       "files": [
         {
           "path": "src/components/sign-up-auth-screen.tsx",

packages/shadcn/src/components/email-link-auth-screen.test.tsx

@@ -15,11 +15,12 @@
  */
 
 import { describe, it, expect, vi, beforeEach, afterEach } from "vitest";
-import { render, screen, cleanup } from "@testing-library/react";
+import { render, screen, cleanup, fireEvent } from "@testing-library/react";
 import { EmailLinkAuthScreen } from "./email-link-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("./email-link-auth-form", () => ({
   EmailLinkAuthForm: ({ onEmailSent, onSignIn }: any) => (
@@ -31,6 +32,16 @@ vi.mock("./email-link-auth-form", () => ({
   ),
 }));
 
+vi.mock("@/components/multi-factor-auth-assertion-form", () => ({
+  MultiFactorAuthAssertionForm: ({ onSuccess }: { onSuccess?: (credential: any) => void }) => (
+    <div data-testid="mfa-assertion-form">
+      <button data-testid="mfa-on-success" onClick={() => onSuccess?.({ user: { uid: "email-link-mfa-user" } })}>
+        MFA Success
+      </button>
+    </div>
+  ),
+}));
+
 describe("<EmailLinkAuthScreen />", () => {
   beforeEach(() => {
     vi.clearAllMocks();
@@ -144,4 +155,114 @@ describe("<EmailLinkAuthScreen />", () => {
     expect(screen.getByTestId("email-link-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: {
+          signIn: "Sign In",
+        },
+        prompts: {
+          signInToAccount: "Sign in to your account",
+        },
+      }),
+    });
+    mockUI.get().setMultiFactorResolver(mockResolver as unknown as MultiFactorResolver);
+
+    render(
+      <FirebaseUIProvider ui={mockUI}>
+        <EmailLinkAuthScreen />
+      </FirebaseUIProvider>
+    );
+
+    expect(screen.getByTestId("mfa-assertion-form")).toBeInTheDocument();
+    expect(screen.queryByTestId("email-link-auth-form")).not.toBeInTheDocument();
+  });
+
+  it("should not render EmailLinkAuthForm when MFA resolver exists", () => {
+    const mockResolver = {
+      auth: {} as any,
+      session: null,
+      hints: [],
+    };
+    const mockUI = createMockUI({
+      locale: registerLocale("test", {
+        labels: {
+          signIn: "Sign In",
+        },
+        prompts: {
+          signInToAccount: "Sign in to your account",
+        },
+        messages: {
+          dividerOr: "or",
+        },
+      }),
+    });
+    mockUI.get().setMultiFactorResolver(mockResolver as unknown as MultiFactorResolver);
+
+    render(
+      <FirebaseUIProvider ui={mockUI}>
+        <EmailLinkAuthScreen>
+          <div data-testid="child-component">Child Component</div>
+        </EmailLinkAuthScreen>
+      </FirebaseUIProvider>
+    );
+
+    expect(screen.queryByTestId("email-link-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 EmailLinkAuthForm when MFA resolver is not present", () => {
+    const mockUI = createMockUI({
+      locale: registerLocale("test", {
+        labels: {
+          signIn: "Sign In",
+        },
+        prompts: {
+          signInToAccount: "Sign in to your account",
+        },
+      }),
+    });
+
+    render(
+      <FirebaseUIProvider ui={mockUI}>
+        <EmailLinkAuthScreen />
+      </FirebaseUIProvider>
+    );
+
+    expect(screen.getByTestId("email-link-auth-form")).toBeInTheDocument();
+    expect(screen.queryByTestId("mfa-assertion-form")).not.toBeInTheDocument();
+  });
+
+  it("calls onSignIn with credential when MFA flow succeeds", () => {
+    const mockResolver = {
+      auth: {} as any,
+      session: null,
+      hints: [],
+    };
+    const mockUI = createMockUI();
+    mockUI.get().setMultiFactorResolver(mockResolver as unknown as MultiFactorResolver);
+
+    const onSignIn = vi.fn();
+
+    render(
+      <FirebaseUIProvider ui={mockUI}>
+        <EmailLinkAuthScreen onSignIn={onSignIn} />
+      </FirebaseUIProvider>
+    );
+
+    fireEvent.click(screen.getByTestId("mfa-on-success"));
+
+    expect(onSignIn).toHaveBeenCalledTimes(1);
+    expect(onSignIn).toHaveBeenCalledWith(
+      expect.objectContaining({ user: expect.objectContaining({ uid: "email-link-mfa-user" }) })
+    );
+  });
 });

packages/shadcn/src/components/email-link-auth-screen.tsx

@@ -6,6 +6,7 @@ import { useUI, type EmailLinkAuthScreenProps } from "@firebase-ui/react";
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
 import { Separator } from "@/components/ui/separator";
 import { EmailLinkAuthForm } from "@/components/email-link-auth-form";
+import { MultiFactorAuthAssertionForm } from "@/components/multi-factor-auth-assertion-form";
 
 export type { EmailLinkAuthScreenProps };
 
@@ -14,6 +15,7 @@ export function EmailLinkAuthScreen({ children, ...props }: EmailLinkAuthScreenP
 
   const titleText = getTranslation(ui, "labels", "signIn");
   const subtitleText = getTranslation(ui, "prompts", "signInToAccount");
+  const mfaResolver = ui.multiFactorResolver;
 
   return (
     <div className="max-w-md mx-auto">
@@ -23,13 +25,19 @@ export function EmailLinkAuthScreen({ children, ...props }: EmailLinkAuthScreenP
           <CardDescription>{subtitleText}</CardDescription>
         </CardHeader>
         <CardContent>
-          <EmailLinkAuthForm {...props} />
-          {children ? (
+          {mfaResolver ? (
+            <MultiFactorAuthAssertionForm onSuccess={(credential) => props.onSignIn?.(credential)} />
+          ) : (
             <>
-              <Separator>{getTranslation(ui, "messages", "dividerOr")}</Separator>
-              <div className="space-y-2">{children}</div>
+              <EmailLinkAuthForm {...props} />
+              {children ? (
+                <>
+                  <Separator>{getTranslation(ui, "messages", "dividerOr")}</Separator>
+                  <div className="space-y-2">{children}</div>
+                </>
+              ) : null}
             </>
-          ) : null}
+          )}
         </CardContent>
       </Card>
     </div>