feat(*): Align styling and button tests

Author: Ehesp

examples/react/src/firebase/config.ts

@@ -20,5 +20,5 @@ export const firebaseConfig = {
   projectId: "fir-ui-rework",
   storageBucket: "fir-ui-rework.firebasestorage.app",
   messagingSenderId: "200312857118",
-  appId: "1:200312857118:web:94e3f69b0e0a4a863f040f"
+  appId: "1:200312857118:web:94e3f69b0e0a4a863f040f",
 };

examples/react/src/screens/oauth-screen.tsx

@@ -16,12 +16,25 @@
 
 "use client";
 
-import { GoogleSignInButton, OAuthScreen } from "@firebase-ui/react";
+import {
+  FacebookSignInButton,
+  AppleSignInButton,
+  GitHubSignInButton,
+  GoogleSignInButton,
+  MicrosoftSignInButton,
+  OAuthScreen,
+  TwitterSignInButton,
+} from "@firebase-ui/react";
 
 export default function OAuthScreenPage() {
   return (
     <OAuthScreen>
-      <GoogleSignInButton />
+      <GoogleSignInButton themed="neutral" />
+      <FacebookSignInButton themed />
+      <AppleSignInButton themed />
+      <GitHubSignInButton themed />
+      <MicrosoftSignInButton themed />
+      <TwitterSignInButton themed />
     </OAuthScreen>
   );
 }

examples/react/src/screens/sign-in-auth-screen-w-oauth.tsx

@@ -16,7 +16,6 @@
 
 "use client";
 
-import { OAuthButton } from "@firebase-ui/react";
 import {
   AppleSignInButton,
   GoogleSignInButton,
@@ -26,14 +25,11 @@ import {
   MicrosoftSignInButton,
   TwitterSignInButton,
 } from "@firebase-ui/react";
-import { OAuthProvider } from "firebase/auth";
 import { useNavigate } from "react-router";
 
 export default function SignInAuthScreenWithOAuthPage() {
   const navigate = useNavigate();
 
-  const p = new OAuthProvider('oidc.foobar')
-
   return (
     <SignInAuthScreen
       onForgotPasswordClick={() => navigate("/password-reset-screen")}

packages/react/src/auth/index.ts

@@ -57,6 +57,10 @@ export { AppleSignInButton, AppleLogo, type AppleSignInButtonProps } from "./oau
 export { FacebookSignInButton, FacebookLogo, type FacebookSignInButtonProps } from "./oauth/facebook-sign-in-button";
 export { GitHubSignInButton, GitHubLogo, type GitHubSignInButtonProps } from "./oauth/github-sign-in-button";
 export { GoogleSignInButton, GoogleLogo, type GoogleSignInButtonProps } from "./oauth/google-sign-in-button";
-export { MicrosoftSignInButton, MicrosoftLogo, type MicrosoftSignInButtonProps } from "./oauth/microsoft-sign-in-button";
+export {
+  MicrosoftSignInButton,
+  MicrosoftLogo,
+  type MicrosoftSignInButtonProps,
+} from "./oauth/microsoft-sign-in-button";
 export { TwitterSignInButton, TwitterLogo, type TwitterSignInButtonProps } from "./oauth/twitter-sign-in-button";
 export { OAuthButton, type OAuthButtonProps } from "./oauth/oauth-button";

packages/react/src/auth/oauth/apple-sign-in-button.test.tsx

@@ -0,0 +1,186 @@
+/**
+ * Copyright 2025 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { describe, it, expect, vi, afterEach, beforeEach } from "vitest";
+import { render, screen, cleanup } from "@testing-library/react";
+import { AppleLogo, AppleSignInButton } from "./apple-sign-in-button";
+import { CreateFirebaseUIProvider, createMockUI } from "~/tests/utils";
+import { registerLocale } from "@firebase-ui/translations";
+import { OAuthProvider } from "firebase/auth";
+
+vi.mock("firebase/auth", () => ({
+  OAuthProvider: class OAuthProvider {
+    constructor(providerId: string) {
+      this.providerId = providerId;
+    }
+    providerId: string;
+  },
+}));
+
+afterEach(() => {
+  cleanup();
+});
+
+describe("<AppleSignInButton />", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it("renders with the correct provider", () => {
+    const ui = createMockUI({
+      locale: registerLocale("test", {
+        labels: {
+          signInWithApple: "Sign in with Apple",
+        },
+      }),
+    });
+
+    render(
+      <CreateFirebaseUIProvider ui={ui}>
+        <AppleSignInButton />
+      </CreateFirebaseUIProvider>
+    );
+
+    const button = screen.getByRole("button");
+    expect(button).toBeDefined();
+    expect(button.getAttribute("data-provider")).toBe("apple.com");
+  });
+
+  it("renders with custom provider when provided", () => {
+    const ui = createMockUI({
+      locale: registerLocale("test", {
+        labels: {
+          signInWithApple: "Sign in with Apple",
+        },
+      }),
+    });
+
+    const customProvider = new OAuthProvider("custom.apple.com");
+
+    render(
+      <CreateFirebaseUIProvider ui={ui}>
+        <AppleSignInButton provider={customProvider} />
+      </CreateFirebaseUIProvider>
+    );
+
+    const button = screen.getByRole("button");
+    expect(button).toBeDefined();
+    expect(button.getAttribute("data-provider")).toBe("custom.apple.com");
+  });
+
+  it("renders with the Apple icon", () => {
+    const ui = createMockUI({
+      locale: registerLocale("test", {
+        labels: {
+          signInWithApple: "Sign in with Apple",
+        },
+      }),
+    });
+
+    render(
+      <CreateFirebaseUIProvider ui={ui}>
+        <AppleSignInButton />
+      </CreateFirebaseUIProvider>
+    );
+
+    const svg = document.querySelector(".fui-provider__icon");
+    expect(svg).toBeDefined();
+    expect(svg).toHaveClass("fui-provider__icon");
+    expect(svg?.tagName.toLowerCase()).toBe("svg");
+  });
+
+  it("renders with the correct translated text", () => {
+    const ui = createMockUI({
+      locale: registerLocale("test", {
+        labels: {
+          signInWithApple: "Sign in with Apple",
+        },
+      }),
+    });
+
+    render(
+      <CreateFirebaseUIProvider ui={ui}>
+        <AppleSignInButton />
+      </CreateFirebaseUIProvider>
+    );
+
+    expect(screen.getByText("Sign in with Apple")).toBeDefined();
+  });
+
+  it("renders with different translated text for different locales", () => {
+    const ui = createMockUI({
+      locale: registerLocale("test", {
+        labels: {
+          signInWithApple: "Iniciar sesión con Apple",
+        },
+      }),
+    });
+
+    render(
+      <CreateFirebaseUIProvider ui={ui}>
+        <AppleSignInButton />
+      </CreateFirebaseUIProvider>
+    );
+
+    expect(screen.getByText("Iniciar sesión con Apple")).toBeDefined();
+  });
+
+  it("renders as a button with correct classes", () => {
+    const ui = createMockUI({
+      locale: registerLocale("test", {
+        labels: {
+          signInWithApple: "Sign in with Apple",
+        },
+      }),
+    });
+
+    render(
+      <CreateFirebaseUIProvider ui={ui}>
+        <AppleSignInButton />
+      </CreateFirebaseUIProvider>
+    );
+
+    const button = screen.getByRole("button");
+    expect(button).toHaveClass("fui-provider__button");
+    expect(button.getAttribute("type")).toBe("button");
+  });
+});
+
+describe("<AppleLogo />", () => {
+  it("renders as an SVG element", () => {
+    const { container } = render(<AppleLogo />);
+    const svg = container.querySelector("svg");
+
+    expect(svg).toBeDefined();
+    expect(svg?.tagName.toLowerCase()).toBe("svg");
+  });
+
+  it("has the correct CSS class", () => {
+    const { container } = render(<AppleLogo />);
+    const svg = container.querySelector("svg");
+
+    expect(svg).toHaveClass("fui-provider__icon");
+  });
+
+  it("forwards custom SVG props", () => {
+    const { container } = render(<AppleLogo data-testid="custom-svg" className="foo" width={32} />);
+    const svg = container.querySelector('svg[data-testid="custom-svg"]');
+
+    expect(svg).toBeDefined();
+    expect(svg!.getAttribute("width")).toBe("32");
+    expect(svg).toHaveClass("fui-provider__icon");
+    expect(svg).toHaveClass("foo");
+  });
+});

packages/react/src/auth/oauth/apple-sign-in-button.tsx

@@ -21,6 +21,7 @@ import { OAuthProvider } from "firebase/auth";
 import { useUI } from "~/hooks";
 import { OAuthButton } from "./oauth-button";
 import AppleSvgLogo from "~/components/logos/apple/Logo";
+import { cn } from "~/utils/cn";
 
 export type AppleSignInButtonProps = {
   provider?: OAuthProvider;
@@ -38,6 +39,6 @@ export function AppleSignInButton({ provider, themed }: AppleSignInButtonProps)
   );
 }
 
-export function AppleLogo() {
-  return <AppleSvgLogo className="fui-provider__icon" />;
+export function AppleLogo({ className, ...props }: React.SVGProps<SVGSVGElement>) {
+  return <AppleSvgLogo className={cn("fui-provider__icon", className)} {...props} />;
 }