fix(react,shadcn): onBackToSignIn -> onSignInClick

Author: Ehesp

examples/react/src/screens/sign-up-auth-screen-w-handlers.tsx

@@ -24,7 +24,7 @@ export default function SignUpAuthScreenWithHandlersPage() {
 
   return (
     <SignUpAuthScreen
-      onBackToSignInClick={() => {
+      onSignInClick={() => {
         navigate("/screens/sign-in-auth-screen");
       }}
       onSignUp={(credential) => {

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

@@ -282,7 +282,7 @@ describe("<SignUpAuthForm />", () => {
     expect(createAccountButton).toHaveAttribute("type", "submit");
   });
 
-  it("should render the back to sign in button callback when onBackToSignInClick is provided", () => {
+  it("should render the back to sign in button callback when onSignInClick is provided", () => {
     const mockUI = createMockUI({
       locale: registerLocale("test", {
         prompts: {
@@ -294,11 +294,11 @@ describe("<SignUpAuthForm />", () => {
       }),
     });
 
-    const onBackToSignInClickMock = vi.fn();
+    const onSignInClickMock = vi.fn();
 
     render(
       <FirebaseUIProvider ui={mockUI}>
-        <SignUpAuthForm onBackToSignInClick={onBackToSignInClickMock} />
+        <SignUpAuthForm onSignInClick={onSignInClickMock} />
       </FirebaseUIProvider>
     );
 
@@ -312,7 +312,7 @@ describe("<SignUpAuthForm />", () => {
     expect(backToSignInButton).toHaveAttribute("type", "button");
 
     fireEvent.click(backToSignInButton);
-    expect(onBackToSignInClickMock).toHaveBeenCalled();
+    expect(onSignInClickMock).toHaveBeenCalled();
   });
 
   it("should trigger validation errors when the form is blurred", () => {

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

@@ -31,7 +31,7 @@ export function useRequireDisplayName() {
 
 export type SignUpAuthFormProps = {
   onSignUp?: (credential: UserCredential) => void;
-  onBackToSignInClick?: () => void;
+  onSignInClick?: () => void;
 };
 
 export function useSignUpAuthFormAction() {
@@ -79,7 +79,7 @@ export function useSignUpAuthForm(onSuccess?: SignUpAuthFormProps["onSignUp"]) {
   });
 }
 
-export function SignUpAuthForm({ onBackToSignInClick, onSignUp }: SignUpAuthFormProps) {
+export function SignUpAuthForm({ onSignInClick, onSignUp }: SignUpAuthFormProps) {
   const ui = useUI();
   const form = useSignUpAuthForm(onSignUp);
   const requireDisplayName = useRequireDisplayName();
@@ -116,8 +116,8 @@ export function SignUpAuthForm({ onBackToSignInClick, onSignUp }: SignUpAuthForm
           <form.SubmitButton>{getTranslation(ui, "labels", "createAccount")}</form.SubmitButton>
           <form.ErrorMessage />
         </fieldset>
-        {onBackToSignInClick ? (
-          <form.Action onClick={onBackToSignInClick}>
+        {onSignInClick ? (
+          <form.Action onClick={onSignInClick}>
             {getTranslation(ui, "prompts", "haveAccount")} {getTranslation(ui, "labels", "signIn")}
           </form.Action>
         ) : null}

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

@@ -21,9 +21,9 @@ import { registerLocale } from "@firebase-ui/translations";
 import { MultiFactorResolver } from "firebase/auth";
 
 vi.mock("~/auth/forms/sign-up-auth-form", () => ({
-  SignUpAuthForm: ({ onBackToSignInClick }: { onBackToSignInClick?: () => void }) => (
+  SignUpAuthForm: ({ onSignInClick }: { onSignInClick?: () => void }) => (
     <div data-testid="sign-up-auth-form">
-      <button data-testid="back-to-sign-in-button" onClick={onBackToSignInClick}>
+      <button data-testid="back-to-sign-in-button" onClick={onSignInClick}>
         Back to Sign In
       </button>
     </div>
@@ -100,20 +100,20 @@ describe("<SignUpAuthScreen />", () => {
     expect(screen.getByTestId("sign-up-auth-form")).toBeDefined();
   });
 
-  it("passes onBackToSignInClick to SignUpAuthForm", () => {
-    const mockOnBackToSignInClick = vi.fn();
+  it("passes onSignInClick to SignUpAuthForm", () => {
+    const mockOnSignInClick = vi.fn();
     const ui = createMockUI();
 
     render(
       <CreateFirebaseUIProvider ui={ui}>
-        <SignUpAuthScreen onBackToSignInClick={mockOnBackToSignInClick} />
+        <SignUpAuthScreen onSignInClick={mockOnSignInClick} />
       </CreateFirebaseUIProvider>
     );
 
     const backButton = screen.getByTestId("back-to-sign-in-button");
     fireEvent.click(backButton);
 
-    expect(mockOnBackToSignInClick).toHaveBeenCalledTimes(1);
+    expect(mockOnSignInClick).toHaveBeenCalledTimes(1);
   });
 
   it("renders a divider with children when present", () => {

packages/shadcn/src/components/multi-factor-auth-assertion-screen.test.tsx

@@ -116,4 +116,3 @@ describe("<MultiFactorAuthAssertionScreen />", () => {
     expect(card).toBeInTheDocument();
   });
 });
-

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

@@ -69,7 +69,7 @@ describe("<SignUpAuthForm />", () => {
   });
 
   it("should render with back to sign in callback", () => {
-    const onBackToSignInClickMock = vi.fn();
+    const onSignInClickMock = vi.fn();
     const mockUI = createMockUI({
       locale: registerLocale("test", {
         prompts: {
@@ -83,7 +83,7 @@ describe("<SignUpAuthForm />", () => {
 
     const { container } = render(
       <FirebaseUIProvider ui={mockUI}>
-        <SignUpAuthForm onBackToSignInClick={onBackToSignInClickMock} />
+        <SignUpAuthForm onSignInClick={onSignInClickMock} />
       </FirebaseUIProvider>
     );
 
@@ -95,7 +95,7 @@ describe("<SignUpAuthForm />", () => {
       fireEvent.click(button!);
     });
 
-    expect(onBackToSignInClickMock).toHaveBeenCalled();
+    expect(onSignInClickMock).toHaveBeenCalled();
   });
 
   it("should call the onSignUp callback when the form is submitted", async () => {

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

@@ -93,8 +93,8 @@ export function SignUpAuthForm(props: SignUpAuthFormProps) {
           {getTranslation(ui, "labels", "createAccount")}
         </Button>
         {form.formState.errors.root && <FormMessage>{form.formState.errors.root.message}</FormMessage>}
-        {props.onBackToSignInClick ? (
-          <Button type="button" variant="link" size="sm" onClick={props.onBackToSignInClick}>
+        {props.onSignInClick ? (
+          <Button type="button" variant="link" size="sm" onClick={props.onSignInClick}>
             <span className="text-xs">
               {getTranslation(ui, "prompts", "haveAccount")} {getTranslation(ui, "labels", "signIn")}
             </span>

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

@@ -23,11 +23,11 @@ import { FirebaseUIProvider } from "@firebase-ui/react";
 import { MultiFactorResolver } from "firebase/auth";
 
 vi.mock("./sign-up-auth-form", () => ({
-  SignUpAuthForm: ({ onSignUp, onBackToSignInClick }: any) => (
+  SignUpAuthForm: ({ onSignUp, onSignInClick }: any) => (
     <div data-testid="sign-up-auth-form">
       <div>SignUpAuthForm</div>
       {onSignUp && <div data-testid="onSignUp-prop">onSignUp provided</div>}
-      {onBackToSignInClick && <div data-testid="onBackToSignInClick-prop">onBackToSignInClick provided</div>}
+      {onSignInClick && <div data-testid="onSignInClick-prop">onSignInClick provided</div>}
     </div>
   ),
 }));
@@ -116,16 +116,16 @@ describe("<SignUpAuthScreen />", () => {
     });
 
     const onSignUpMock = vi.fn();
-    const onBackToSignInClickMock = vi.fn();
+    const onSignInClickMock = vi.fn();
 
     render(
       <FirebaseUIProvider ui={mockUI}>
-        <SignUpAuthScreen onSignUp={onSignUpMock} onBackToSignInClick={onBackToSignInClickMock} />
+        <SignUpAuthScreen onSignUp={onSignUpMock} onSignInClick={onSignInClickMock} />
       </FirebaseUIProvider>
     );
 
     expect(screen.getByTestId("onSignUp-prop")).toBeInTheDocument();
-    expect(screen.getByTestId("onBackToSignInClick-prop")).toBeInTheDocument();
+    expect(screen.getByTestId("onSignInClick-prop")).toBeInTheDocument();
   });
 
   it("should not render separator when no children", () => {