refactor(react): Align SignUpAuth{Screen,Form} with API spec

Author: Ehesp

packages/react/src/auth/forms/register-form.test.tsx renamed to packages/react/src/auth/forms/sign-up-auth-form.test.tsx

@@ -16,7 +16,7 @@
 
 import { describe, it, expect, vi, beforeEach, Mock } from "vitest";
 import { render, screen, fireEvent } from "@testing-library/react";
-import { RegisterForm } from "./register-form";
+import { SignUpAuthForm } from "./sign-up-auth-form";
 import { act } from "react";
 
 // Mock the dependencies
@@ -113,7 +113,7 @@ describe("RegisterForm", () => {
   });
 
   it("renders the form correctly", () => {
-    render(<RegisterForm />);
+    render(<SignUpAuthForm />);
 
     expect(screen.getByRole("textbox", { name: /email address/i })).toBeInTheDocument();
     expect(screen.getByLabelText(/password/i)).toBeInTheDocument();
@@ -122,7 +122,7 @@ describe("RegisterForm", () => {
   });
 
   it("submits the form when the button is clicked", async () => {
-    render(<RegisterForm />);
+    render(<SignUpAuthForm />);
 
     // Get the submit button
     const submitButton = screen.getByTestId("submit-button");
@@ -151,7 +151,7 @@ describe("RegisterForm", () => {
     const mockError = new Error("Email already in use");
     (createUserWithEmailAndPassword as Mock).mockRejectedValueOnce(mockError);
 
-    render(<RegisterForm />);
+    render(<SignUpAuthForm />);
 
     // Get the submit button
     const submitButton = screen.getByTestId("submit-button");
@@ -180,7 +180,7 @@ describe("RegisterForm", () => {
   });
 
   it("validates on blur for the first time", async () => {
-    render(<RegisterForm />);
+    render(<SignUpAuthForm />);
 
     const emailInput = screen.getByRole("textbox", { name: /email address/i });
     const passwordInput = screen.getByDisplayValue("password123");
@@ -195,7 +195,7 @@ describe("RegisterForm", () => {
   });
 
   it("validates on input after first blur", async () => {
-    render(<RegisterForm />);
+    render(<SignUpAuthForm />);
 
     const emailInput = screen.getByRole("textbox", { name: /email address/i });
     const passwordInput = screen.getByDisplayValue("password123");
@@ -219,7 +219,7 @@ describe("RegisterForm", () => {
   // TODO: Fix this test
   it.skip("displays back to sign in button when provided", () => {
     const onBackToSignInClickMock = vi.fn();
-    render(<RegisterForm onBackToSignInClick={onBackToSignInClickMock} />);
+    render(<SignUpAuthForm onBackToSignInClick={onBackToSignInClickMock} />);
 
     const backButton = document.querySelector(".fui-form__action")!;
     expect(backButton).toBeInTheDocument();

packages/react/src/auth/forms/register-form.tsx renamed to packages/react/src/auth/forms/sign-up-auth-form.tsx

@@ -29,12 +29,14 @@ import { useUI } from "~/hooks";
 import { Button } from "../../components/button";
 import { FieldInfo } from "../../components/field-info";
 import { Policies } from "../../components/policies";
+import { type UserCredential } from "firebase/auth";
 
-export interface RegisterFormProps {
+export type SignUpAuthFormProps = {
+  onSignUp?: (credential: UserCredential) => void;
   onBackToSignInClick?: () => void;
 }
 
-export function RegisterForm({ onBackToSignInClick }: RegisterFormProps) {
+export function SignUpAuthForm({ onBackToSignInClick, onSignUp }: SignUpAuthFormProps) {
   const ui = useUI();
 
   const [formError, setFormError] = useState<string | null>(null);
@@ -53,7 +55,8 @@ export function RegisterForm({ onBackToSignInClick }: RegisterFormProps) {
     onSubmit: async ({ value }) => {
       setFormError(null);
       try {
-        await createUserWithEmailAndPassword(ui, value.email, value.password);
+        const credential = await createUserWithEmailAndPassword(ui, value.email, value.password);
+        onSignUp?.(credential);
       } catch (error) {
         if (error instanceof FirebaseUIError) {
           setFormError(error.message);

packages/react/src/auth/index.ts

@@ -28,7 +28,7 @@ export { ForgotPasswordAuthScreen, type ForgotPasswordAuthScreenProps } from "./
 
 export { SignInAuthForm, type SignInAuthFormProps } from "./forms/sign-in-auth-form";
 
-export { RegisterForm, type RegisterFormProps } from "./forms/register-form";
+export { SignUpAuthForm, type SignUpAuthFormProps } from "./forms/sign-up-auth-form";
 
 /** Export Buttons */
 export { GoogleSignInButton } from "./oauth/google-sign-in-button";

packages/react/src/auth/screens/sign-up-auth-screen.tsx

@@ -17,15 +17,13 @@
 import { PropsWithChildren } from "react";
 import { Divider } from "~/components/divider";
 import { useUI } from "~/hooks";
-import { Card, CardHeader, CardSubtitle, CardTitle } from "../../components/card";
-import { RegisterForm } from "../forms/register-form";
+import { Card, CardContent, CardHeader, CardSubtitle, CardTitle } from "../../components/card";
+import { SignUpAuthForm, type SignUpAuthFormProps } from "../forms/sign-up-auth-form";
 import { getTranslation } from "@firebase-ui/core";
 
-export type SignUpAuthScreenProps = PropsWithChildren<{
-  onBackToSignInClick?: () => void;
-}>;
+export type SignUpAuthScreenProps = PropsWithChildren<SignUpAuthFormProps>;
 
-export function SignUpAuthScreen({ onBackToSignInClick, children }: SignUpAuthScreenProps) {
+export function SignUpAuthScreen({ children, ...props }: SignUpAuthScreenProps) {
   const ui = useUI();
 
   const titleText = getTranslation(ui, "labels", "register");
@@ -38,13 +36,15 @@ export function SignUpAuthScreen({ onBackToSignInClick, children }: SignUpAuthSc
           <CardTitle>{titleText}</CardTitle>
           <CardSubtitle>{subtitleText}</CardSubtitle>
         </CardHeader>
-        <RegisterForm onBackToSignInClick={onBackToSignInClick} />
-        {children ? (
-          <>
-            <Divider>{getTranslation(ui, "messages", "dividerOr")}</Divider>
-            <div className="space-y-4">{children}</div>
-          </>
-        ) : null}
+        <CardContent>
+          <SignUpAuthForm {...props} />
+          {children ? (
+            <>
+              <Divider>{getTranslation(ui, "messages", "dividerOr")}</Divider>
+              <div className="space-y-4">{children}</div>
+            </>
+          ) : null}
+        </CardContent>
       </Card>
     </div>
   );

packages/react/tests/integration/auth/register.integration.test.tsx

@@ -16,7 +16,7 @@
 
 import { describe, it, expect, afterAll, beforeEach } from "vitest";
 import { screen, fireEvent, waitFor, act, render } from "@testing-library/react";
-import { RegisterForm } from "../../../src/auth/forms/register-form";
+import { RegisterForm } from "../../../src/auth/forms/sign-up-auth-form";
 import { initializeApp } from "firebase/app";
 import { getAuth, connectAuthEmulator, deleteUser, signOut, signInWithEmailAndPassword } from "firebase/auth";
 import { initializeUI } from "@firebase-ui/core";