feat(auth): Add YahooSignInButton support

examples/angular/src/app/screens/sign-in-auth-screen-w-oauth.ts

@@ -25,6 +25,7 @@ import {
   GitHubSignInButtonComponent,
   MicrosoftSignInButtonComponent,
   TwitterSignInButtonComponent,
+  YahooSignInButtonComponent,
 } from "@firebase-oss/ui-angular";
 import { Router } from "@angular/router";
 
@@ -41,6 +42,7 @@ import { Router } from "@angular/router";
     GitHubSignInButtonComponent,
     MicrosoftSignInButtonComponent,
     TwitterSignInButtonComponent,
+    YahooSignInButtonComponent,
   ],
   template: `
     <fui-sign-in-auth-screen (signIn)="onSignIn()">
@@ -51,6 +53,7 @@ import { Router } from "@angular/router";
         <fui-github-sign-in-button />
         <fui-microsoft-sign-in-button />
         <fui-twitter-sign-in-button />
+        <fui-yahoo-sign-in-button />
       </fui-content>
     </fui-sign-in-auth-screen>
   `,

examples/nextjs-ssr/app/screens/sign-in-auth-screen-w-oauth/page.tsx

@@ -25,6 +25,7 @@ import {
   MicrosoftSignInButton,
   TwitterSignInButton,
   OAuthButton,
+  YahooSignInButton,
 } from "@firebase-oss/ui-react";
 import { OAuthProvider } from "firebase/auth";
 import { useRouter } from "next/navigation";
@@ -46,6 +47,7 @@ export default function SignInAuthScreenWithOAuthPage() {
         <GitHubSignInButton />
         <MicrosoftSignInButton />
         <TwitterSignInButton />
+        <YahooSignInButton />
         <LineSignInButton />
       </div>
     </SignInAuthScreen>

examples/nextjs/app/screens/sign-in-auth-screen-w-oauth/page.tsx

@@ -25,6 +25,7 @@ import {
   MicrosoftSignInButton,
   TwitterSignInButton,
   OAuthButton,
+  YahooSignInButton,
 } from "@firebase-oss/ui-react";
 import { OAuthProvider } from "firebase/auth";
 import { useRouter } from "next/navigation";
@@ -46,6 +47,7 @@ export default function SignInAuthScreenWithOAuthPage() {
         <GitHubSignInButton />
         <MicrosoftSignInButton />
         <TwitterSignInButton />
+        <YahooSignInButton />
         <LineSignInButton />
       </div>
     </SignInAuthScreen>

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

@@ -22,6 +22,7 @@ import {
   GitHubSignInButton,
   MicrosoftSignInButton,
   TwitterSignInButton,
+  YahooSignInButton,
 } from "@firebase-oss/ui-react";
 import { useNavigate } from "react-router";
 
@@ -41,6 +42,7 @@ export default function SignInAuthScreenWithOAuthPage() {
         <GitHubSignInButton />
         <MicrosoftSignInButton />
         <TwitterSignInButton />
+        <YahooSignInButton />
       </div>
     </SignInAuthScreen>
   );

examples/shadcn/src/components/yahoo-sign-in-button.tsx

@@ -0,0 +1,36 @@
+/**
+ * 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.
+ */
+
+"use client";
+
+import { OAuthProvider } from "firebase/auth";
+import { getTranslation } from "@firebase-oss/ui-core";
+import { useUI, type YahooSignInButtonProps, YahooLogo } from "@firebase-oss/ui-react";
+
+import { OAuthButton } from "@/components/oauth-button";
+
+export type { YahooSignInButtonProps };
+
+export function YahooSignInButton({ provider, ...props }: YahooSignInButtonProps) {
+  const ui = useUI();
+
+  return (
+    <OAuthButton {...props} provider={provider || new OAuthProvider("yahoo.com")}>
+      <YahooLogo />
+      <span>{getTranslation(ui, "labels", "signInWithYahoo")}</span>
+    </OAuthButton>
+  );
+}

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

@@ -22,6 +22,7 @@ import { GoogleSignInButton } from "@/components/google-sign-in-button";
 import { MicrosoftSignInButton } from "@/components/microsoft-sign-in-button";
 import { SignInAuthScreen } from "@/components/sign-in-auth-screen";
 import { TwitterSignInButton } from "@/components/twitter-sign-in-button";
+import { YahooSignInButton } from "@/components/yahoo-sign-in-button";
 import { useNavigate } from "react-router";
 
 export default function SignInAuthScreenWithOAuthPage() {
@@ -40,6 +41,7 @@ export default function SignInAuthScreenWithOAuthPage() {
         <GitHubSignInButton />
         <MicrosoftSignInButton />
         <TwitterSignInButton />
+        <YahooSignInButton />
       </div>
     </SignInAuthScreen>
   );

packages/angular/src/lib/auth/oauth/yahoo-sign-in-button.test.ts

@@ -0,0 +1,108 @@
+/**
+ * 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 { render, screen } from "@testing-library/angular";
+import { Component } from "@angular/core";
+
+import { YahooSignInButtonComponent } from "./yahoo-sign-in-button";
+
+@Component({
+  template: `<fui-yahoo-sign-in-button></fui-yahoo-sign-in-button>`,
+  standalone: true,
+  imports: [YahooSignInButtonComponent],
+})
+class TestYahooSignInButtonHostComponent {}
+
+@Component({
+  template: `<fui-yahoo-sign-in-button [provider]="customProvider"></fui-yahoo-sign-in-button>`,
+  standalone: true,
+  imports: [YahooSignInButtonComponent],
+})
+class TestYahooSignInButtonWithCustomProviderHostComponent {
+  customProvider = { providerId: "custom.yahoo.com" };
+}
+
+describe("<fui-yahoo-sign-in-button>", () => {
+  beforeEach(() => {
+    const { injectUI, injectTranslation } = require("../../tests/test-helpers");
+
+    injectUI.mockReturnValue(() => ({}));
+    injectTranslation.mockImplementation((category: string, key: string) => {
+      const mockTranslations: Record<string, Record<string, string>> = {
+        labels: {
+          signInWithYahoo: "Sign in with Yahoo",
+        },
+      };
+      return () => mockTranslations[category]?.[key] || `${category}.${key}`;
+    });
+  });
+
+  it("renders with the correct provider", async () => {
+    await render(TestYahooSignInButtonHostComponent);
+
+    const button = screen.getByRole("button");
+    expect(button).toBeInTheDocument();
+    expect(button).toHaveAttribute("data-provider", "yahoo.com");
+  });
+
+  it("renders with custom provider when provided", async () => {
+    await render(TestYahooSignInButtonWithCustomProviderHostComponent);
+
+    const button = screen.getByRole("button");
+    expect(button).toBeInTheDocument();
+    expect(button).toHaveAttribute("data-provider", "custom.yahoo.com");
+  });
+
+  it("renders with the Yahoo icon", async () => {
+    await render(TestYahooSignInButtonHostComponent);
+
+    const svg = document.querySelector(".fui-provider__icon");
+    expect(svg).toBeInTheDocument();
+    expect(svg).toHaveAttribute("viewBox", "-271 324 256 153");
+  });
+
+  it("renders with the correct translated text", async () => {
+    await render(TestYahooSignInButtonHostComponent);
+
+    expect(screen.getByText("Sign in with Yahoo")).toBeInTheDocument();
+  });
+
+  it("renders as a button with correct classes", async () => {
+    await render(TestYahooSignInButtonHostComponent);
+
+    const button = screen.getByRole("button");
+    expect(button).toHaveClass("fui-provider__button");
+  });
+
+  it("uses default provider when no provider is provided", async () => {
+    await render(TestYahooSignInButtonHostComponent);
+
+    const button = screen.getByRole("button");
+    expect(button).toHaveAttribute("data-provider", "yahoo.com");
+  });
+
+  it("has signIn output", async () => {
+    const { fixture } = await render(TestYahooSignInButtonHostComponent);
+
+    const component = fixture.componentInstance;
+    expect(component).toBeTruthy();
+    // Verify the component has the signIn output
+    const buttonComponent = fixture.debugElement.query(
+      (el) => el.name === "fui-yahoo-sign-in-button"
+    )?.componentInstance;
+    expect(buttonComponent?.signIn).toBeDefined();
+  });
+});

packages/angular/src/lib/auth/oauth/yahoo-sign-in-button.ts

@@ -0,0 +1,56 @@
+/**
+ * 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 { Component, input, output } from "@angular/core";
+import { CommonModule } from "@angular/common";
+import { OAuthButtonComponent } from "./oauth-button";
+import { injectTranslation } from "../../provider";
+import { OAuthProvider, UserCredential } from "@angular/fire/auth";
+import { YahooLogoComponent } from "../../components/logos/yahoo";
+
+@Component({
+  selector: "fui-yahoo-sign-in-button",
+  standalone: true,
+  imports: [CommonModule, OAuthButtonComponent, YahooLogoComponent],
+  host: {
+    style: "display: block;",
+  },
+  template: `
+    <fui-oauth-button [provider]="yahooProvider" [themed]="themed()" (signIn)="signIn.emit($event)">
+      <fui-yahoo-logo />
+      <span>{{ signInWithYahooLabel() }}</span>
+    </fui-oauth-button>
+  `,
+})
+/**
+ * A button component for signing in with Yahoo.
+ */
+export class YahooSignInButtonComponent {
+  signInWithYahooLabel = injectTranslation("labels", "signInWithYahoo");
+  /** Whether to use themed styling. */
+  themed = input<boolean>(false);
+  /** Event emitter for successful sign-in. */
+  signIn = output<UserCredential>();
+
+  private defaultProvider = new OAuthProvider("yahoo.com");
+
+  /** Optional custom OAuth provider configuration. */
+  provider = input<OAuthProvider>();
+
+  get yahooProvider() {
+    return this.provider() || this.defaultProvider;
+  }
+}

packages/angular/src/lib/components/logos/index.ts

@@ -22,3 +22,4 @@ export { LineLogoComponent } from "./line";
 export { MicrosoftLogoComponent } from "./microsoft";
 export { SnapchatLogoComponent } from "./snapchat";
 export { TwitterLogoComponent } from "./twitter";
+export { YahooLogoComponent } from "./yahoo";

packages/angular/src/lib/components/logos/yahoo.ts

@@ -0,0 +1,58 @@
+/**
+ * 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.
+ */
+
+// GENERATED BY generate-logos.ts
+
+import { Component, input } from "@angular/core";
+
+@Component({
+  selector: "fui-yahoo-logo",
+  standalone: true,
+  template: `
+    <svg
+      fill="#5F01D1"
+      version="1.1"
+      id="Layer_1"
+      xmlns="http://www.w3.org/2000/svg"
+      xmlns:xlink="http://www.w3.org/1999/xlink"
+      viewBox="-271 324 256 153"
+      xml:space="preserve"
+      class="fui-provider__icon"
+    >
+      <g>
+        <path
+          d="M-37.5,356.3c0.1,0,0.2,0,0.2,0l7.1-10.3c-0.1,0-0.3,0-0.4,0l0.7-1.1h-99.9l3.9,15.7h27.3l-46,41.5
+		c-9.4-13-31.4-39.9-46.7-62.3h34.4v-12l0.4-2.6c-0.1,0-0.3-0.1-0.4-0.1V324H-271v15.8h33.8c13.1,10.3,63.4,73,65.4,79.2
+		c0.8,5.9,1.6,40.4-0.9,43c-4.9,5.2-27.5,3.8-32.9,4.2l-1.9,10.7c9.9,0.3,42.2-0.8,52.2-0.8c19.8,0,54.4-0.1,59.3,0.3l0.6-11.2
+		c-5-0.8-32.3-0.1-36-1c-0.8-5.4-1.7-41.8-0.9-45.6c3.9-10.9,61.2-55.1,67.5-56.8c1.4-0.3,3.5-0.8,5.9-1.3h18.5L-37.5,356.3z"
+        />
+        <path d="M-48.2,447.8l15.3,1.2l17.9-69c-3-0.1-30.1-2.7-33.6-3.3L-48.2,447.8z" />
+        <polygon points="-50.8,458.9 -50.7,475.7 -43,476.4 -34.6,477 -32.1,460.5 -41,460.1 	" />
+      </g>
+    </svg>
+  `,
+})
+/**
+ * The Yahoo logo SVG component.
+ */
+export class YahooLogoComponent {
+  /** The width of the logo. */
+  width = input<string | number>("1em");
+  /** The height of the logo. */
+  height = input<string | number>("1em");
+  /** Optional additional CSS class names. */
+  className = input<string>("");
+}

packages/angular/src/public-api.ts

@@ -40,6 +40,7 @@ export { GoogleSignInButtonComponent } from "./lib/auth/oauth/google-sign-in-but
 export { MicrosoftSignInButtonComponent } from "./lib/auth/oauth/microsoft-sign-in-button";
 export { OAuthButtonComponent } from "./lib/auth/oauth/oauth-button";
 export { TwitterSignInButtonComponent } from "./lib/auth/oauth/twitter-sign-in-button";
+export { YahooSignInButtonComponent } from "./lib/auth/oauth/yahoo-sign-in-button";
 
 export { EmailLinkAuthScreenComponent } from "./lib/auth/screens/email-link-auth-screen";
 export { ForgotPasswordAuthScreenComponent } from "./lib/auth/screens/forgot-password-auth-screen";

packages/react/src/auth/index.ts

@@ -128,4 +128,5 @@ export {
   type MicrosoftSignInButtonProps,
 } from "./oauth/microsoft-sign-in-button";
 export { TwitterSignInButton, TwitterLogo, type TwitterSignInButtonProps } from "./oauth/twitter-sign-in-button";
+export { YahooSignInButton, YahooLogo, type YahooSignInButtonProps } from "./oauth/yahoo-sign-in-button";
 export { OAuthButton, useSignInWithProvider, type OAuthButtonProps } from "./oauth/oauth-button";