Skip to content

Commit f04c478

Browse files
committed
refactor(react): Align SignInAuth{Screen,Form} with API spec
1 parent 4edd8f1 commit f04c478

File tree

5 files changed

+28
-27
lines changed

5 files changed

+28
-27
lines changed

packages/react/src/auth/forms/email-password-form.test.tsx renamed to packages/react/src/auth/forms/sign-in-auth-form.test.tsx

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@
1616

1717
import { describe, it, expect, vi, beforeEach, Mock } from "vitest";
1818
import { render, screen, fireEvent } from "@testing-library/react";
19-
import { EmailPasswordForm } from "./email-password-form";
19+
import { SignInAuthForm } from "./sign-in-auth-form";
2020
import { act } from "react";
2121

2222
// Mock the dependencies
@@ -108,21 +108,21 @@ vi.mock("../../../../src/components/button", () => ({
108108
// Import the actual functions after mocking
109109
import { signInWithEmailAndPassword } from "@firebase-ui/core";
110110

111-
describe("EmailPasswordForm", () => {
111+
describe("SignInAuthForm", () => {
112112
beforeEach(() => {
113113
vi.clearAllMocks();
114114
});
115115

116116
it("renders the form correctly", () => {
117-
render(<EmailPasswordForm />);
117+
render(<SignInAuthForm />);
118118

119119
expect(screen.getByRole("textbox", { name: /email address/i })).toBeInTheDocument();
120120
expect(screen.getByTestId("policies")).toBeInTheDocument();
121121
expect(screen.getByTestId("submit-button")).toBeInTheDocument();
122122
});
123123

124124
it("submits the form when the button is clicked", async () => {
125-
render(<EmailPasswordForm />);
125+
render(<SignInAuthForm />);
126126

127127
// Get the submit button
128128
const submitButton = screen.getByTestId("submit-button");
@@ -151,7 +151,7 @@ describe("EmailPasswordForm", () => {
151151
const mockError = new Error("Invalid credentials");
152152
(signInWithEmailAndPassword as Mock).mockRejectedValueOnce(mockError);
153153

154-
render(<EmailPasswordForm />);
154+
render(<SignInAuthForm />);
155155

156156
// Get the submit button
157157
const submitButton = screen.getByTestId("submit-button");
@@ -176,7 +176,7 @@ describe("EmailPasswordForm", () => {
176176
});
177177

178178
it("validates on blur for the first time", async () => {
179-
render(<EmailPasswordForm />);
179+
render(<SignInAuthForm />);
180180

181181
const emailInput = screen.getByRole("textbox", { name: /email address/i });
182182
const passwordInput = screen.getByDisplayValue("password123");
@@ -191,7 +191,7 @@ describe("EmailPasswordForm", () => {
191191
});
192192

193193
it("validates on input after first blur", async () => {
194-
render(<EmailPasswordForm />);
194+
render(<SignInAuthForm />);
195195

196196
const emailInput = screen.getByRole("textbox", { name: /email address/i });
197197
const passwordInput = screen.getByDisplayValue("password123");

packages/react/src/auth/forms/email-password-form.tsx renamed to packages/react/src/auth/forms/sign-in-auth-form.tsx

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -29,13 +29,15 @@ import { useUI } from "~/hooks";
2929
import { Button } from "../../components/button";
3030
import { FieldInfo } from "../../components/field-info";
3131
import { Policies } from "../../components/policies";
32+
import { UserCredential } from "firebase/auth";
3233

33-
export interface EmailPasswordFormProps {
34+
export type SignInAuthFormProps = {
35+
onSignIn?: (credential: UserCredential) => void;
3436
onForgotPasswordClick?: () => void;
3537
onRegisterClick?: () => void;
3638
}
3739

38-
export function EmailPasswordForm({ onForgotPasswordClick, onRegisterClick }: EmailPasswordFormProps) {
40+
export function SignInAuthForm({ onSignIn, onForgotPasswordClick, onRegisterClick }: SignInAuthFormProps) {
3941
const ui = useUI();
4042

4143
const [formError, setFormError] = useState<string | null>(null);
@@ -56,7 +58,8 @@ export function EmailPasswordForm({ onForgotPasswordClick, onRegisterClick }: Em
5658
onSubmit: async ({ value }) => {
5759
setFormError(null);
5860
try {
59-
await signInWithEmailAndPassword(ui, value.email, value.password);
61+
const credential = await signInWithEmailAndPassword(ui, value.email, value.password);
62+
onSignIn?.(credential);
6063
} catch (error) {
6164
if (error instanceof FirebaseUIError) {
6265
setFormError(error.message);

packages/react/src/auth/index.ts

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -26,8 +26,7 @@ export { OAuthScreen, type OAuthScreenProps } from "./screens/oauth-screen";
2626

2727
export { ForgotPasswordAuthScreen, type ForgotPasswordAuthScreenProps } from "./screens/forgot-password-auth-screen";
2828

29-
/** Export forms */
30-
export { EmailPasswordForm, type EmailPasswordFormProps } from "./forms/email-password-form";
29+
export { SignInAuthForm, type SignInAuthFormProps } from "./forms/sign-in-auth-form";
3130

3231
export { RegisterForm, type RegisterFormProps } from "./forms/register-form";
3332

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

Lines changed: 13 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -18,15 +18,12 @@ import type { PropsWithChildren } from "react";
1818
import { getTranslation } from "@firebase-ui/core";
1919
import { Divider } from "~/components/divider";
2020
import { useUI } from "~/hooks";
21-
import { Card, CardHeader, CardSubtitle, CardTitle } from "../../components/card";
22-
import { EmailPasswordForm } from "../forms/email-password-form";
21+
import { Card, CardContent, CardHeader, CardSubtitle, CardTitle } from "../../components/card";
22+
import { SignInAuthForm, type SignInAuthFormProps } from "../forms/sign-in-auth-form";
2323

24-
export type SignInAuthScreenProps = PropsWithChildren<{
25-
onForgotPasswordClick?: () => void;
26-
onRegisterClick?: () => void;
27-
}>;
24+
export type SignInAuthScreenProps = PropsWithChildren<SignInAuthFormProps>;
2825

29-
export function SignInAuthScreen({ onForgotPasswordClick, onRegisterClick, children }: SignInAuthScreenProps) {
26+
export function SignInAuthScreen({ children, ...props }: SignInAuthScreenProps) {
3027
const ui = useUI();
3128

3229
const titleText = getTranslation(ui, "labels", "signIn");
@@ -39,13 +36,15 @@ export function SignInAuthScreen({ onForgotPasswordClick, onRegisterClick, child
3936
<CardTitle>{titleText}</CardTitle>
4037
<CardSubtitle>{subtitleText}</CardSubtitle>
4138
</CardHeader>
42-
<EmailPasswordForm onForgotPasswordClick={onForgotPasswordClick} onRegisterClick={onRegisterClick} />
43-
{children ? (
44-
<>
45-
<Divider>{getTranslation(ui, "messages", "dividerOr")}</Divider>
46-
<div className="space-y-4">{children}</div>
47-
</>
48-
) : null}
39+
<CardContent>
40+
<SignInAuthForm {...props} />
41+
{children ? (
42+
<>
43+
<Divider>{getTranslation(ui, "messages", "dividerOr")}</Divider>
44+
<div className="space-y-4">{children}</div>
45+
</>
46+
) : null}
47+
</CardContent>
4948
</Card>
5049
</div>
5150
);

packages/react/tests/integration/auth/email-password-auth.integration.test.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@
1616

1717
import { describe, it, expect, beforeAll, afterAll } from "vitest";
1818
import { screen, fireEvent, waitFor, act, render } from "@testing-library/react";
19-
import { EmailPasswordForm } from "../../../src/auth/forms/email-password-form";
19+
import { EmailPasswordForm } from "../../../src/auth/forms/sign-in-auth-form";
2020
import { initializeApp } from "firebase/app";
2121
import {
2222
getAuth,

0 commit comments

Comments
 (0)