chore(angular): Add redirect handlers to example app

Ehesp · Ehesp · commit 919515b4b740 · 2025-11-10T11:52:47.000Z
diff --git a/examples/angular/src/app/screens/email-link-auth-screen-w-oauth/email-link-auth-screen-w-oauth.component.ts b/examples/angular/src/app/screens/email-link-auth-screen-w-oauth/email-link-auth-screen-w-oauth.component.ts
@@ -14,19 +14,32 @@
  * limitations under the License.
  */
 
-import { Component } from "@angular/core";
+import { Component, inject } from "@angular/core";
 import { CommonModule } from "@angular/common";
 import { EmailLinkAuthScreenComponent, GoogleSignInButtonComponent } from "@invertase/firebaseui-angular";
+import { UserCredential } from "firebase/auth";
+import { Router } from "@angular/router";
 
 @Component({
   selector: "app-email-link-auth-screen-w-oauth",
   standalone: true,
   imports: [CommonModule, EmailLinkAuthScreenComponent, GoogleSignInButtonComponent],
   template: `
-    <fui-email-link-auth-screen>
+    <fui-email-link-auth-screen (emailSent)="onEmailSent()" (signIn)="onSignIn($event)">
       <fui-google-sign-in-button></fui-google-sign-in-button>
     </fui-email-link-auth-screen>
   `,
   styles: [],
 })
-export class EmailLinkAuthScreenWithOAuthComponent {}
+export class EmailLinkAuthScreenWithOAuthComponent {
+  private router = inject(Router);
+
+  onEmailSent() {
+    alert("email sent - please check your email");
+  }
+
+  onSignIn(credential: UserCredential) {
+    console.log("sign in", credential);
+    this.router.navigate(["/"]);
+  }
+}
diff --git a/examples/angular/src/app/screens/email-link-auth-screen/email-link-auth-screen.component.ts b/examples/angular/src/app/screens/email-link-auth-screen/email-link-auth-screen.component.ts
@@ -14,15 +14,28 @@
  * limitations under the License.
  */
 
-import { Component } from "@angular/core";
+import { Component, inject } from "@angular/core";
 import { CommonModule } from "@angular/common";
 import { EmailLinkAuthScreenComponent } from "@invertase/firebaseui-angular";
+import { UserCredential } from "firebase/auth";
+import { Router } from "@angular/router";
 
 @Component({
   selector: "app-email-link-auth-screen",
   standalone: true,
   imports: [CommonModule, EmailLinkAuthScreenComponent],
-  template: ` <fui-email-link-auth-screen></fui-email-link-auth-screen> `,
+  template: ` <fui-email-link-auth-screen (emailSent)="onEmailSent()" (signIn)="onSignIn($event)" />`,
   styles: [],
 })
-export class EmailLinkAuthScreenWrapperComponent {}
+export class EmailLinkAuthScreenWrapperComponent {
+  private router = inject(Router);
+
+  onEmailSent() {
+    alert("email sent - please check your email");
+  }
+
+  onSignIn(credential: UserCredential) {
+    console.log("sign in", credential);
+    this.router.navigate(["/"]);
+  }
+}
diff --git a/examples/angular/src/app/screens/forgot-password-auth-screen/forgot-password-auth-screen.component.ts b/examples/angular/src/app/screens/forgot-password-auth-screen/forgot-password-auth-screen.component.ts
@@ -22,7 +22,11 @@ import { ForgotPasswordAuthScreenComponent } from "@invertase/firebaseui-angular
   selector: "app-forgot-password-auth-screen",
   standalone: true,
   imports: [CommonModule, ForgotPasswordAuthScreenComponent],
-  template: ` <fui-forgot-password-auth-screen></fui-forgot-password-auth-screen> `,
+  template: ` <fui-forgot-password-auth-screen (passwordSent)="onPasswordSent()" />`,
   styles: [],
 })
-export class ForgotPasswordAuthScreenWrapperComponent {}
+export class ForgotPasswordAuthScreenWrapperComponent {
+  onPasswordSent() {
+    alert("password reset email sent - please check your email");
+  }
+}
diff --git a/examples/angular/src/app/screens/oauth-screen/oauth-screen.component.ts b/examples/angular/src/app/screens/oauth-screen/oauth-screen.component.ts
@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import { Component, signal } from "@angular/core";
+import { Component, inject, signal } from "@angular/core";
 import { CommonModule } from "@angular/common";
 import {
   OAuthScreenComponent,
@@ -25,6 +25,8 @@ import {
   MicrosoftSignInButtonComponent,
   TwitterSignInButtonComponent,
 } from "@invertase/firebaseui-angular";
+import { UserCredential } from "firebase/auth";
+import { Router } from "@angular/router";
 
 @Component({
   selector: "app-oauth-screen",
@@ -40,7 +42,7 @@ import {
     TwitterSignInButtonComponent,
   ],
   template: `
-    <fui-oauth-screen>
+    <fui-oauth-screen (onSignIn)="onSignIn($event)">
       <fui-google-sign-in-button [themed]="themed() ? 'neutral' : false" />
       <fui-facebook-sign-in-button [themed]="themed()" />
       <fui-apple-sign-in-button [themed]="themed()" />
@@ -59,4 +61,10 @@ import {
 })
 export class OAuthScreenWrapperComponent {
   themed = signal(false);
+  private router = inject(Router);
+
+  onSignIn(credential: UserCredential) {
+    console.log("sign in", credential);
+    this.router.navigate(["/"]);
+  }
 }
diff --git a/examples/angular/src/app/screens/phone-auth-screen-w-oauth/phone-auth-screen-w-oauth.component.ts b/examples/angular/src/app/screens/phone-auth-screen-w-oauth/phone-auth-screen-w-oauth.component.ts
@@ -14,21 +14,30 @@
  * limitations under the License.
  */
 
-import { Component } from "@angular/core";
+import { Component, inject } from "@angular/core";
 import { CommonModule } from "@angular/common";
 import { PhoneAuthScreenComponent, GoogleSignInButtonComponent, ContentComponent } from "@invertase/firebaseui-angular";
+import { UserCredential } from "firebase/auth";
+import { Router } from "@angular/router";
 
 @Component({
   selector: "app-phone-auth-screen-w-oauth",
   standalone: true,
   imports: [CommonModule, PhoneAuthScreenComponent, GoogleSignInButtonComponent, ContentComponent],
   template: `
-    <fui-phone-auth-screen>
+    <fui-phone-auth-screen (signIn)="onSignIn($event)">
       <fui-content>
         <fui-google-sign-in-button></fui-google-sign-in-button>
       </fui-content>
     </fui-phone-auth-screen>
   `,
   styles: [],
 })
-export class PhoneAuthScreenWithOAuthComponent {}
+export class PhoneAuthScreenWithOAuthComponent {
+  private router = inject(Router);
+
+  onSignIn(credential: UserCredential) {
+    console.log("sign in", credential);
+    this.router.navigate(["/"]);
+  }
+}
diff --git a/examples/angular/src/app/screens/phone-auth-screen/phone-auth-screen.component.ts b/examples/angular/src/app/screens/phone-auth-screen/phone-auth-screen.component.ts
@@ -14,15 +14,24 @@
  * limitations under the License.
  */
 
-import { Component } from "@angular/core";
+import { Component, inject } from "@angular/core";
 import { CommonModule } from "@angular/common";
 import { PhoneAuthScreenComponent } from "@invertase/firebaseui-angular";
+import { UserCredential } from "firebase/auth";
+import { Router } from "@angular/router";
 
 @Component({
   selector: "app-phone-auth-screen",
   standalone: true,
   imports: [CommonModule, PhoneAuthScreenComponent],
-  template: ` <fui-phone-auth-screen></fui-phone-auth-screen> `,
+  template: ` <fui-phone-auth-screen (signIn)="onSignIn($event)" />`,
   styles: [],
 })
-export class PhoneAuthScreenWrapperComponent {}
+export class PhoneAuthScreenWrapperComponent {
+  private router = inject(Router);
+
+  onSignIn(credential: UserCredential) {
+    console.log("sign in", credential);
+    this.router.navigate(["/"]);
+  }
+}
diff --git a/examples/angular/src/app/screens/sign-in-auth-screen-w-oauth/sign-in-auth-screen-w-oauth.component.ts b/examples/angular/src/app/screens/sign-in-auth-screen-w-oauth/sign-in-auth-screen-w-oauth.component.ts
@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import { Component } from "@angular/core";
+import { Component, inject } from "@angular/core";
 import { CommonModule } from "@angular/common";
 import {
   SignInAuthScreenComponent,
@@ -26,6 +26,8 @@ import {
   MicrosoftSignInButtonComponent,
   TwitterSignInButtonComponent,
 } from "@invertase/firebaseui-angular";
+import { UserCredential } from "firebase/auth";
+import { Router } from "@angular/router";
 
 @Component({
   selector: "app-sign-in-auth-screen-w-oauth",
@@ -42,7 +44,7 @@ import {
     TwitterSignInButtonComponent,
   ],
   template: `
-    <fui-sign-in-auth-screen>
+    <fui-sign-in-auth-screen (signIn)="onSignIn($event)">
       <fui-content>
         <fui-google-sign-in-button />
         <fui-facebook-sign-in-button />
@@ -55,4 +57,11 @@ import {
   `,
   styles: [],
 })
-export class SignInAuthScreenWithOAuthComponent {}
+export class SignInAuthScreenWithOAuthComponent {
+  private router = inject(Router);
+
+  onSignIn(credential: UserCredential) {
+    console.log("sign in", credential);
+    this.router.navigate(["/"]);
+  }
+}
diff --git a/examples/angular/src/app/screens/sign-in-auth-screen/sign-in-auth-screen.component.ts b/examples/angular/src/app/screens/sign-in-auth-screen/sign-in-auth-screen.component.ts
@@ -14,15 +14,24 @@
  * limitations under the License.
  */
 
-import { Component } from "@angular/core";
+import { Component, inject } from "@angular/core";
 import { CommonModule } from "@angular/common";
 import { SignInAuthScreenComponent } from "@invertase/firebaseui-angular";
+import { UserCredential } from "firebase/auth";
+import { Router } from "@angular/router";
 
 @Component({
   selector: "app-sign-in-auth-screen",
   standalone: true,
   imports: [CommonModule, SignInAuthScreenComponent],
-  template: ` <fui-sign-in-auth-screen></fui-sign-in-auth-screen> `,
+  template: ` <fui-sign-in-auth-screen (signIn)="onSignIn($event)" />`,
   styles: [],
 })
-export class SignInAuthScreenWrapperComponent {}
+export class SignInAuthScreenWrapperComponent {
+  private router = inject(Router);
+
+  onSignIn(credential: UserCredential) {
+    console.log("sign in", credential);
+    this.router.navigate(["/"]);
+  }
+}
diff --git a/examples/angular/src/app/screens/sign-up-auth-screen-w-oauth/sign-up-auth-screen-w-oauth.component.ts b/examples/angular/src/app/screens/sign-up-auth-screen-w-oauth/sign-up-auth-screen-w-oauth.component.ts
@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import { Component } from "@angular/core";
+import { Component, inject } from "@angular/core";
 import { CommonModule } from "@angular/common";
 import {
   SignUpAuthScreenComponent,
@@ -26,6 +26,8 @@ import {
   MicrosoftSignInButtonComponent,
   TwitterSignInButtonComponent,
 } from "@invertase/firebaseui-angular";
+import { UserCredential } from "firebase/auth";
+import { Router } from "@angular/router";
 
 @Component({
   selector: "app-sign-up-auth-screen-w-oauth",
@@ -42,7 +44,7 @@ import {
     TwitterSignInButtonComponent,
   ],
   template: `
-    <fui-sign-up-auth-screen>
+    <fui-sign-up-auth-screen (signUp)="onSignUp($event)">
       <fui-content>
         <fui-google-sign-in-button />
         <fui-facebook-sign-in-button />
@@ -55,4 +57,11 @@ import {
   `,
   styles: [],
 })
-export class SignUpAuthScreenWithOAuthComponent {}
+export class SignUpAuthScreenWithOAuthComponent {
+  private router = inject(Router);
+
+  onSignUp(credential: UserCredential) {
+    console.log("sign up", credential);
+    this.router.navigate(["/"]);
+  }
+}
diff --git a/examples/angular/src/app/screens/sign-up-auth-screen/sign-up-auth-screen.component.ts b/examples/angular/src/app/screens/sign-up-auth-screen/sign-up-auth-screen.component.ts
@@ -14,15 +14,24 @@
  * limitations under the License.
  */
 
-import { Component } from "@angular/core";
+import { Component, inject } from "@angular/core";
 import { CommonModule } from "@angular/common";
 import { SignUpAuthScreenComponent } from "@invertase/firebaseui-angular";
+import { Router } from "@angular/router";
+import { UserCredential } from "firebase/auth";
 
 @Component({
   selector: "app-sign-up-auth-screen",
   standalone: true,
   imports: [CommonModule, SignUpAuthScreenComponent],
-  template: ` <fui-sign-up-auth-screen></fui-sign-up-auth-screen> `,
+  template: ` <fui-sign-up-auth-screen (signUp)="onSignUp($event)" />`,
   styles: [],
 })
-export class SignUpAuthScreenWrapperComponent {}
+export class SignUpAuthScreenWrapperComponent {
+  private router = inject(Router);
+
+  onSignUp(credential: UserCredential) {
+    console.log("sign up", credential);
+    this.router.navigate(["/"]);
+  }
+}
diff --git a/packages/angular/src/lib/auth/oauth/apple-sign-in-button.ts b/packages/angular/src/lib/auth/oauth/apple-sign-in-button.ts
@@ -39,7 +39,7 @@ export class AppleSignInButtonComponent {
   ui = injectUI();
   signInWithAppleLabel = injectTranslation("labels", "signInWithApple");
   themed = input<boolean>(false);
-  
+
   private defaultProvider = new OAuthProvider("apple.com");
 
   provider = input<OAuthProvider>();
diff --git a/packages/angular/src/lib/auth/oauth/facebook-sign-in-button.ts b/packages/angular/src/lib/auth/oauth/facebook-sign-in-button.ts
@@ -39,7 +39,7 @@ export class FacebookSignInButtonComponent {
   ui = injectUI();
   signInWithFacebookLabel = injectTranslation("labels", "signInWithFacebook");
   themed = input<boolean>(false);
-  
+
   private defaultProvider = new FacebookAuthProvider();
 
   provider = input<FacebookAuthProvider>();
diff --git a/packages/angular/src/lib/auth/oauth/google-sign-in-button.ts b/packages/angular/src/lib/auth/oauth/google-sign-in-button.ts
@@ -38,8 +38,8 @@ import { GoogleLogoComponent } from "../../components/logos/google";
 export class GoogleSignInButtonComponent {
   ui = injectUI();
   signInWithGoogleLabel = injectTranslation("labels", "signInWithGoogle");
-  themed = input<boolean | 'neutral'>(false);
-  
+  themed = input<boolean | "neutral">(false);
+
   private defaultProvider = new GoogleAuthProvider();
 
   provider = input<GoogleAuthProvider>();
diff --git a/packages/angular/src/lib/auth/oauth/microsoft-sign-in-button.ts b/packages/angular/src/lib/auth/oauth/microsoft-sign-in-button.ts
@@ -38,7 +38,7 @@ import { MicrosoftLogoComponent } from "../../components/logos/microsoft";
 export class MicrosoftSignInButtonComponent {
   signInWithMicrosoftLabel = injectTranslation("labels", "signInWithMicrosoft");
   themed = input<boolean>(false);
-  
+
   private defaultProvider = new OAuthProvider("microsoft.com");
 
   provider = input<OAuthProvider>();
diff --git a/packages/angular/src/lib/auth/oauth/twitter-sign-in-button.ts b/packages/angular/src/lib/auth/oauth/twitter-sign-in-button.ts
@@ -38,7 +38,7 @@ import { TwitterLogoComponent } from "../../components/logos/twitter";
 export class TwitterSignInButtonComponent {
   signInWithTwitterLabel = injectTranslation("labels", "signInWithTwitter");
   themed = input<boolean>(false);
-  
+
   private defaultProvider = new TwitterAuthProvider();
 
   provider = input<TwitterAuthProvider>();
diff --git a/packages/angular/src/lib/components/country-selector.ts b/packages/angular/src/lib/components/country-selector.ts
@@ -38,7 +38,7 @@ import { injectCountries, injectDefaultCountry } from "../provider";
             [ngModel]="selected().code"
             (ngModelChange)="handleCountryChange($event)"
           >
-            @for (country of countries(); track $index;) {
+            @for (country of countries(); track $index) {
               <option [value]="country.code">{{ country.dialCode }} ({{ country.name }})</option>
             }
           </select>
