Merge pull request #1265 from firebase/@invertase/oauth-signin

Author: Ehesp

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");