feat(react,shadcn,angular): add sign in callback to oauth buttons

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

@@ -93,4 +93,16 @@ describe("<fui-apple-sign-in-button>", () => {
     const button = screen.getByRole("button");
     expect(button).toHaveAttribute("data-provider", "apple.com");
   });
+
+  it("has signIn output", async () => {
+    const { fixture } = await render(TestAppleSignInButtonHostComponent);
+
+    const component = fixture.componentInstance;
+    expect(component).toBeTruthy();
+    // Verify the component has the signIn output
+    const buttonComponent = fixture.debugElement.query(
+      (el) => el.name === "fui-apple-sign-in-button"
+    )?.componentInstance;
+    expect(buttonComponent?.signIn).toBeDefined();
+  });
 });

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

@@ -14,11 +14,11 @@
  * limitations under the License.
  */
 
-import { Component, input } from "@angular/core";
+import { Component, input, output } from "@angular/core";
 import { CommonModule } from "@angular/common";
 import { OAuthButtonComponent } from "./oauth-button";
 import { injectTranslation, injectUI } from "../../provider";
-import { OAuthProvider } from "@angular/fire/auth";
+import { OAuthProvider, UserCredential } from "@angular/fire/auth";
 import { AppleLogoComponent } from "../../components/logos/apple";
 
 @Component({
@@ -29,7 +29,7 @@ import { AppleLogoComponent } from "../../components/logos/apple";
     style: "display: block;",
   },
   template: `
-    <fui-oauth-button [provider]="appleProvider" [themed]="themed()">
+    <fui-oauth-button [provider]="appleProvider" [themed]="themed()" (signIn)="signIn.emit($event)">
       <fui-apple-logo />
       <span>{{ signInWithAppleLabel() }}</span>
     </fui-oauth-button>
@@ -39,6 +39,7 @@ export class AppleSignInButtonComponent {
   ui = injectUI();
   signInWithAppleLabel = injectTranslation("labels", "signInWithApple");
   themed = input<boolean>(false);
+  signIn = output<UserCredential>();
 
   private defaultProvider = new OAuthProvider("apple.com");
 

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

@@ -93,4 +93,16 @@ describe("<fui-facebook-sign-in-button>", () => {
     const button = screen.getByRole("button");
     expect(button).toHaveAttribute("data-provider", "facebook.com");
   });
+
+  it("has signIn output", async () => {
+    const { fixture } = await render(TestFacebookSignInButtonHostComponent);
+
+    const component = fixture.componentInstance;
+    expect(component).toBeTruthy();
+    // Verify the component has the signIn output
+    const buttonComponent = fixture.debugElement.query(
+      (el) => el.name === "fui-facebook-sign-in-button"
+    )?.componentInstance;
+    expect(buttonComponent?.signIn).toBeDefined();
+  });
 });

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

@@ -14,9 +14,9 @@
  * limitations under the License.
  */
 
-import { Component, input } from "@angular/core";
+import { Component, input, output } from "@angular/core";
 import { CommonModule } from "@angular/common";
-import { FacebookAuthProvider } from "@angular/fire/auth";
+import { FacebookAuthProvider, UserCredential } from "@angular/fire/auth";
 import { OAuthButtonComponent } from "./oauth-button";
 import { injectTranslation, injectUI } from "../../provider";
 import { FacebookLogoComponent } from "../../components/logos/facebook";
@@ -29,7 +29,7 @@ import { FacebookLogoComponent } from "../../components/logos/facebook";
     style: "display: block;",
   },
   template: `
-    <fui-oauth-button [provider]="facebookProvider" [themed]="themed()">
+    <fui-oauth-button [provider]="facebookProvider" [themed]="themed()" (signIn)="signIn.emit($event)">
       <fui-facebook-logo />
       <span>{{ signInWithFacebookLabel() }}</span>
     </fui-oauth-button>
@@ -39,6 +39,7 @@ export class FacebookSignInButtonComponent {
   ui = injectUI();
   signInWithFacebookLabel = injectTranslation("labels", "signInWithFacebook");
   themed = input<boolean>(false);
+  signIn = output<UserCredential>();
 
   private defaultProvider = new FacebookAuthProvider();
 

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

@@ -93,4 +93,16 @@ describe("<fui-github-sign-in-button>", () => {
     const button = screen.getByRole("button");
     expect(button).toHaveAttribute("data-provider", "github.com");
   });
+
+  it("has signIn output", async () => {
+    const { fixture } = await render(TestGithubSignInButtonHostComponent);
+
+    const component = fixture.componentInstance;
+    expect(component).toBeTruthy();
+    // Verify the component has the signIn output
+    const buttonComponent = fixture.debugElement.query(
+      (el) => el.name === "fui-github-sign-in-button"
+    )?.componentInstance;
+    expect(buttonComponent?.signIn).toBeDefined();
+  });
 });

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

@@ -14,11 +14,11 @@
  * limitations under the License.
  */
 
-import { Component, input } from "@angular/core";
+import { Component, input, output } from "@angular/core";
 import { CommonModule } from "@angular/common";
 import { OAuthButtonComponent } from "./oauth-button";
 import { injectTranslation } from "../../provider";
-import { GithubAuthProvider } from "@angular/fire/auth";
+import { GithubAuthProvider, UserCredential } from "@angular/fire/auth";
 import { GithubLogoComponent } from "../../components/logos/github";
 
 @Component({
@@ -29,7 +29,7 @@ import { GithubLogoComponent } from "../../components/logos/github";
     style: "display: block;",
   },
   template: `
-    <fui-oauth-button [provider]="githubProvider" [themed]="themed()">
+    <fui-oauth-button [provider]="githubProvider" [themed]="themed()" (signIn)="signIn.emit($event)">
       <fui-github-logo />
       <span>{{ signInWithGitHubLabel() }}</span>
     </fui-oauth-button>
@@ -38,6 +38,7 @@ import { GithubLogoComponent } from "../../components/logos/github";
 export class GitHubSignInButtonComponent {
   signInWithGitHubLabel = injectTranslation("labels", "signInWithGitHub");
   themed = input<boolean>(false);
+  signIn = output<UserCredential>();
 
   private defaultProvider = new GithubAuthProvider();
 

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

@@ -93,4 +93,16 @@ describe("<fui-google-sign-in-button>", () => {
     const button = screen.getByRole("button");
     expect(button).toHaveAttribute("data-provider", "google.com");
   });
+
+  it("has signIn output", async () => {
+    const { fixture } = await render(TestGoogleSignInButtonHostComponent);
+
+    const component = fixture.componentInstance;
+    expect(component).toBeTruthy();
+    // Verify the component has the signIn output
+    const buttonComponent = fixture.debugElement.query(
+      (el) => el.name === "fui-google-sign-in-button"
+    )?.componentInstance;
+    expect(buttonComponent?.signIn).toBeDefined();
+  });
 });

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

@@ -14,9 +14,9 @@
  * limitations under the License.
  */
 
-import { Component, input } from "@angular/core";
+import { Component, input, output } from "@angular/core";
 import { CommonModule } from "@angular/common";
-import { GoogleAuthProvider } from "@angular/fire/auth";
+import { GoogleAuthProvider, UserCredential } from "@angular/fire/auth";
 import { injectTranslation, injectUI } from "../../provider";
 import { OAuthButtonComponent } from "./oauth-button";
 import { GoogleLogoComponent } from "../../components/logos/google";
@@ -29,7 +29,7 @@ import { GoogleLogoComponent } from "../../components/logos/google";
     style: "display: block;",
   },
   template: `
-    <fui-oauth-button [provider]="googleProvider" [themed]="themed()">
+    <fui-oauth-button [provider]="googleProvider" [themed]="themed()" (signIn)="signIn.emit($event)">
       <fui-google-logo />
       <span>{{ signInWithGoogleLabel() }}</span>
     </fui-oauth-button>
@@ -39,6 +39,7 @@ export class GoogleSignInButtonComponent {
   ui = injectUI();
   signInWithGoogleLabel = injectTranslation("labels", "signInWithGoogle");
   themed = input<boolean | "neutral">(false);
+  signIn = output<UserCredential>();
 
   private defaultProvider = new GoogleAuthProvider();
 

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

@@ -93,4 +93,16 @@ describe("<fui-microsoft-sign-in-button>", () => {
     const button = screen.getByRole("button");
     expect(button).toHaveAttribute("data-provider", "microsoft.com");
   });
+
+  it("has signIn output", async () => {
+    const { fixture } = await render(TestMicrosoftSignInButtonHostComponent);
+
+    const component = fixture.componentInstance;
+    expect(component).toBeTruthy();
+    // Verify the component has the signIn output
+    const buttonComponent = fixture.debugElement.query(
+      (el) => el.name === "fui-microsoft-sign-in-button"
+    )?.componentInstance;
+    expect(buttonComponent?.signIn).toBeDefined();
+  });
 });

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

@@ -14,11 +14,11 @@
  * limitations under the License.
  */
 
-import { Component, input } from "@angular/core";
+import { Component, input, output } from "@angular/core";
 import { CommonModule } from "@angular/common";
 import { OAuthButtonComponent } from "./oauth-button";
 import { injectTranslation } from "../../provider";
-import { OAuthProvider } from "@angular/fire/auth";
+import { OAuthProvider, UserCredential } from "@angular/fire/auth";
 import { MicrosoftLogoComponent } from "../../components/logos/microsoft";
 
 @Component({
@@ -29,7 +29,7 @@ import { MicrosoftLogoComponent } from "../../components/logos/microsoft";
     style: "display: block;",
   },
   template: `
-    <fui-oauth-button [provider]="microsoftProvider" [themed]="themed()">
+    <fui-oauth-button [provider]="microsoftProvider" [themed]="themed()" (signIn)="signIn.emit($event)">
       <fui-microsoft-logo />
       <span>{{ signInWithMicrosoftLabel() }}</span>
     </fui-oauth-button>
@@ -38,6 +38,7 @@ import { MicrosoftLogoComponent } from "../../components/logos/microsoft";
 export class MicrosoftSignInButtonComponent {
   signInWithMicrosoftLabel = injectTranslation("labels", "signInWithMicrosoft");
   themed = input<boolean>(false);
+  signIn = output<UserCredential>();
 
   private defaultProvider = new OAuthProvider("microsoft.com");
 

packages/angular/src/lib/auth/oauth/oauth-button.spec.ts

@@ -17,7 +17,7 @@
 import { render, screen, fireEvent, waitFor } from "@testing-library/angular";
 import { Component } from "@angular/core";
 import { OAuthButtonComponent } from "./oauth-button";
-import { AuthProvider } from "@angular/fire/auth";
+import { AuthProvider, UserCredential } from "@angular/fire/auth";
 
 @Component({
   template: ` <fui-oauth-button [provider]="provider"> Sign in with Google </fui-oauth-button> `,
@@ -37,6 +37,21 @@ class TestOAuthButtonWithCustomProviderHostComponent {
   provider: AuthProvider = { providerId: "facebook.com" } as AuthProvider;
 }
 
+@Component({
+  template: `
+    <fui-oauth-button [provider]="provider" (signIn)="handleSignIn($event)"> Sign in with Google </fui-oauth-button>
+  `,
+  standalone: true,
+  imports: [OAuthButtonComponent],
+})
+class TestOAuthButtonWithSignInHostComponent {
+  provider: AuthProvider = { providerId: "google.com" } as AuthProvider;
+  signInCallback = jest.fn();
+  handleSignIn(credential: UserCredential) {
+    this.signInCallback(credential);
+  }
+}
+
 describe("<fui-oauth-button>", () => {
   let mockSignInWithProvider: any;
   let mockFirebaseUIError: any;
@@ -180,4 +195,38 @@ describe("<fui-oauth-button>", () => {
       expect(screen.queryByText("First error")).not.toBeInTheDocument();
     });
   });
+
+  it("should emit signIn when sign-in is successful", async () => {
+    const mockCredential = { user: { uid: "test-uid" } } as UserCredential;
+    mockSignInWithProvider.mockResolvedValue(mockCredential);
+
+    const { fixture } = await render(TestOAuthButtonWithSignInHostComponent, {
+      imports: [OAuthButtonComponent],
+    });
+
+    const button = screen.getByRole("button");
+    fireEvent.click(button);
+
+    await waitFor(() => {
+      expect(fixture.componentInstance.signInCallback).toHaveBeenCalledTimes(1);
+      expect(fixture.componentInstance.signInCallback).toHaveBeenCalledWith(mockCredential);
+    });
+  });
+
+  it("should not emit signIn when sign-in fails", async () => {
+    mockSignInWithProvider.mockRejectedValue(new mockFirebaseUIError("Sign-in failed"));
+
+    const { fixture } = await render(TestOAuthButtonWithSignInHostComponent, {
+      imports: [OAuthButtonComponent],
+    });
+
+    const button = screen.getByRole("button");
+    fireEvent.click(button);
+
+    await waitFor(() => {
+      expect(screen.getByText("Sign-in failed")).toBeInTheDocument();
+    });
+
+    expect(fixture.componentInstance.signInCallback).not.toHaveBeenCalled();
+  });
 });

packages/angular/src/lib/auth/oauth/oauth-button.ts

@@ -14,11 +14,11 @@
  * limitations under the License.
  */
 
-import { Component, input, signal, computed } from "@angular/core";
+import { Component, input, signal, computed, output } from "@angular/core";
 import { CommonModule } from "@angular/common";
 import { ButtonComponent } from "../../components/button";
 import { injectUI } from "../../provider";
-import { AuthProvider } from "@angular/fire/auth";
+import { AuthProvider, UserCredential } from "@angular/fire/auth";
 import { FirebaseUIError, signInWithProvider, getTranslation } from "@invertase/firebaseui-core";
 
 @Component({
@@ -54,6 +54,7 @@ export class OAuthButtonComponent {
   provider = input.required<AuthProvider>();
   themed = input<boolean | string>();
   error = signal<string | null>(null);
+  signIn = output<UserCredential>();
 
   buttonVariant = computed(() => {
     return this.themed() ? "primary" : "secondary";
@@ -62,7 +63,8 @@ export class OAuthButtonComponent {
   async handleOAuthSignIn() {
     this.error.set(null);
     try {
-      await signInWithProvider(this.ui(), this.provider());
+      const credential = await signInWithProvider(this.ui(), this.provider());
+      this.signIn.emit(credential);
     } catch (error) {
       if (error instanceof FirebaseUIError) {
         this.error.set(error.message);

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

@@ -93,4 +93,16 @@ describe("<fui-twitter-sign-in-button>", () => {
     const button = screen.getByRole("button");
     expect(button).toHaveAttribute("data-provider", "twitter.com");
   });
+
+  it("has signIn output", async () => {
+    const { fixture } = await render(TestTwitterSignInButtonHostComponent);
+
+    const component = fixture.componentInstance;
+    expect(component).toBeTruthy();
+    // Verify the component has the signIn output
+    const buttonComponent = fixture.debugElement.query(
+      (el) => el.name === "fui-twitter-sign-in-button"
+    )?.componentInstance;
+    expect(buttonComponent?.signIn).toBeDefined();
+  });
 });

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

@@ -14,11 +14,11 @@
  * limitations under the License.
  */
 
-import { Component, input } from "@angular/core";
+import { Component, input, output } from "@angular/core";
 import { CommonModule } from "@angular/common";
 import { OAuthButtonComponent } from "./oauth-button";
 import { injectTranslation } from "../../provider";
-import { TwitterAuthProvider } from "@angular/fire/auth";
+import { TwitterAuthProvider, UserCredential } from "@angular/fire/auth";
 import { TwitterLogoComponent } from "../../components/logos/twitter";
 
 @Component({
@@ -29,7 +29,7 @@ import { TwitterLogoComponent } from "../../components/logos/twitter";
     style: "display: block;",
   },
   template: `
-    <fui-oauth-button [provider]="twitterProvider" [themed]="themed()">
+    <fui-oauth-button [provider]="twitterProvider" [themed]="themed()" (signIn)="signIn.emit($event)">
       <fui-twitter-logo />
       <span>{{ signInWithTwitterLabel() }}</span>
     </fui-oauth-button>
@@ -38,6 +38,7 @@ import { TwitterLogoComponent } from "../../components/logos/twitter";
 export class TwitterSignInButtonComponent {
   signInWithTwitterLabel = injectTranslation("labels", "signInWithTwitter");
   themed = input<boolean>(false);
+  signIn = output<UserCredential>();
 
   private defaultProvider = new TwitterAuthProvider();