chore: Update angular to latest config

Author: Ehesp

packages/angular/projects/firebaseui-angular/package.json

@@ -4,7 +4,8 @@
   "peerDependencies": {
     "@angular/common": "^19.1.0",
     "@angular/core": "^19.1.0",
-    "@firebase-ui/core": "workspace:*"
+    "@firebase-ui/core": "workspace:*",
+    "@firebase-ui/translations": "workspace:*"
   },
   "dependencies": {
     "@tanstack/angular-form": "^1.1.0",

packages/angular/projects/firebaseui-angular/src/lib/auth/forms/email-link-form/email-link-form.component.ts

@@ -1,16 +1,14 @@
 import { Component, inject, Input, OnInit } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { injectForm, TanStackField } from '@tanstack/angular-form';
-import { FirebaseUi } from '../../../provider';
-import { Auth } from '@angular/fire/auth';
-import { Router } from '@angular/router';
+import { FirebaseUI } from '../../../provider';
 import { ButtonComponent } from '../../../components/button/button.component';
 import { TermsAndPrivacyComponent } from '../../../components/terms-and-privacy/terms-and-privacy.component';
 import {
   createEmailLinkFormSchema,
   FirebaseUIError,
-  fuiCompleteEmailLinkSignIn,
-  fuiSendSignInLinkToEmail,
+  completeEmailLinkSignIn,
+  sendSignInLinkToEmail,
 } from '@firebase-ui/core';
 import { firstValueFrom } from 'rxjs';
 
@@ -65,8 +63,7 @@ import { firstValueFrom } from 'rxjs';
   `,
 })
 export class EmailLinkFormComponent implements OnInit {
-  private ui = inject(FirebaseUi);
-  private auth = inject(Auth);
+  private ui = inject(FirebaseUI);
 
   formError: string | null = null;
   emailSent = false;
@@ -102,13 +99,7 @@ export class EmailLinkFormComponent implements OnInit {
 
   private async completeSignIn() {
     try {
-      await fuiCompleteEmailLinkSignIn(this.auth, window.location.href, {
-        translations: this.config?.translations,
-        language: this.config?.language,
-        enableAutoUpgradeAnonymous: this.config?.enableAutoUpgradeAnonymous,
-        enableHandleExistingCredential:
-          this.config?.enableHandleExistingCredential,
-      });
+      await completeEmailLinkSignIn(await firstValueFrom(this.ui.config()), window.location.href);
     } catch (error) {
       if (error instanceof FirebaseUIError) {
         this.formError = error.message;
@@ -151,11 +142,7 @@ export class EmailLinkFormComponent implements OnInit {
         return;
       }
 
-      await fuiSendSignInLinkToEmail(this.auth, email, {
-        translations: this.config?.translations,
-        language: this.config?.language,
-        enableAutoUpgradeAnonymous: this.config?.enableAutoUpgradeAnonymous,
-      });
+      await sendSignInLinkToEmail(await firstValueFrom(this.ui.config()), email);
 
       this.emailSent = true;
     } catch (error) {

packages/angular/projects/firebaseui-angular/src/lib/auth/forms/email-password-form/email-password-form.component.spec.ts

@@ -15,7 +15,7 @@ import { EmailPasswordFormComponent } from './email-password-form.component';
 // Define window properties for testing
 declare global {
   interface Window {
-    fuiSignInWithEmailAndPassword: any;
+    signInWithEmailAndPassword: any;
     createEmailFormSchema: any;
   }
 }
@@ -90,11 +90,11 @@ describe('EmailPasswordFormComponent', () => {
 
     // Create spies for the global functions
     signInSpy = jasmine
-      .createSpy('fuiSignInWithEmailAndPassword')
+      .createSpy('signInWithEmailAndPassword')
       .and.returnValue(Promise.resolve());
 
     // Define the function on the window object
-    Object.defineProperty(window, 'fuiSignInWithEmailAndPassword', {
+    Object.defineProperty(window, 'signInWithEmailAndPassword', {
       value: signInSpy,
       writable: true,
       configurable: true,

packages/angular/projects/firebaseui-angular/src/lib/auth/forms/email-password-form/email-password-form.component.ts

@@ -1,15 +1,14 @@
 import { Component, inject, Input, OnInit } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { injectForm, TanStackField } from '@tanstack/angular-form';
-import { FirebaseUi } from '../../../provider';
-import { Auth } from '@angular/fire/auth';
+import { FirebaseUI } from '../../../provider';
 import { ButtonComponent } from '../../../components/button/button.component';
 import { TermsAndPrivacyComponent } from '../../../components/terms-and-privacy/terms-and-privacy.component';
 import {
   createEmailFormSchema,
   EmailFormSchema,
   FirebaseUIError,
-  fuiSignInWithEmailAndPassword,
+  signInWithEmailAndPassword,
 } from '@firebase-ui/core';
 import { firstValueFrom } from 'rxjs';
 import { Router } from '@angular/router';
@@ -105,8 +104,7 @@ import { Router } from '@angular/router';
   `,
 })
 export class EmailPasswordFormComponent implements OnInit {
-  private ui = inject(FirebaseUi);
-  private auth = inject(Auth);
+  private ui = inject(FirebaseUI);
   private router = inject(Router);
 
   @Input({ required: true }) forgotPasswordRoute!: string;
@@ -186,13 +184,7 @@ export class EmailPasswordFormComponent implements OnInit {
       }
 
       this.formError = null;
-      await fuiSignInWithEmailAndPassword(this.auth, email, password, {
-        translations: this.config?.translations,
-        language: this.config?.language,
-        enableAutoUpgradeAnonymous: this.config?.enableAutoUpgradeAnonymous,
-        enableHandleExistingCredential:
-          this.config?.enableHandleExistingCredential,
-      });
+      await signInWithEmailAndPassword(await firstValueFrom(this.ui.config()), email, password);
     } catch (error) {
       if (error instanceof FirebaseUIError) {
         this.formError = error.message;

packages/angular/projects/firebaseui-angular/src/lib/auth/forms/forgot-password-form/forgot-password-form.component.spec.ts

@@ -15,7 +15,7 @@ import { ForgotPasswordFormComponent } from './forgot-password-form.component';
 // Define window properties for testing
 declare global {
   interface Window {
-    fuiSendPasswordResetEmail: any;
+    sendPasswordResetEmail: any;
     createForgotPasswordFormSchema: any;
   }
 }
@@ -78,11 +78,11 @@ describe('ForgotPasswordFormComponent', () => {
 
     // Create spies for the global functions
     sendResetEmailSpy = jasmine
-      .createSpy('fuiSendPasswordResetEmail')
+      .createSpy('sendPasswordResetEmail')
       .and.returnValue(Promise.resolve());
 
     // Define the function on the window object
-    Object.defineProperty(window, 'fuiSendPasswordResetEmail', {
+    Object.defineProperty(window, 'sendPasswordResetEmail', {
       value: sendResetEmailSpy,
       writable: true,
       configurable: true,

packages/angular/projects/firebaseui-angular/src/lib/auth/forms/forgot-password-form/forgot-password-form.component.ts

@@ -1,15 +1,14 @@
 import { Component, inject, Input, OnInit } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { injectForm, TanStackField } from '@tanstack/angular-form';
-import { FirebaseUi } from '../../../provider';
+import { FirebaseUI } from '../../../provider';
 import { Auth } from '@angular/fire/auth';
 import { ButtonComponent } from '../../../components/button/button.component';
 import { TermsAndPrivacyComponent } from '../../../components/terms-and-privacy/terms-and-privacy.component';
 import {
   createForgotPasswordFormSchema,
   FirebaseUIError,
-  ForgotPasswordFormSchema,
-  fuiSendPasswordResetEmail,
+  sendPasswordResetEmail,
 } from '@firebase-ui/core';
 import { firstValueFrom } from 'rxjs';
 import { Router } from '@angular/router';
@@ -75,8 +74,7 @@ import { Router } from '@angular/router';
   `,
 })
 export class ForgotPasswordFormComponent implements OnInit {
-  private ui = inject(FirebaseUi);
-  private auth = inject(Auth);
+  private ui = inject(FirebaseUI);
   private router = inject(Router);
 
   @Input({ required: true }) signInRoute!: string;
@@ -149,10 +147,7 @@ export class ForgotPasswordFormComponent implements OnInit {
       }
 
       // Send password reset email
-      await fuiSendPasswordResetEmail(this.auth, email, {
-        translations: this.config?.translations,
-        language: this.config?.language,
-      });
+      await sendPasswordResetEmail(await firstValueFrom(this.ui.config()), email);
 
       this.emailSent = true;
     } catch (error) {

packages/angular/projects/firebaseui-angular/src/lib/auth/forms/phone-form/phone-form.component.spec.ts

@@ -13,8 +13,8 @@ import {
 } from '@angular/fire/auth';
 import { FirebaseUIError } from '@firebase-ui/core';
 import { TanStackField } from '@tanstack/angular-form';
-import { of } from 'rxjs';
-import { FirebaseUi } from '../../../provider';
+import { firstValueFrom, of } from 'rxjs';
+import { FirebaseUI } from '../../../provider';
 import {
   PhoneFormComponent,
   PhoneNumberFormComponent,
@@ -23,7 +23,7 @@ import {
 
 // Mock Firebase UI Core functions
 const mockFuiSignInWithPhoneNumber = jasmine
-  .createSpy('fuiSignInWithPhoneNumber')
+  .createSpy('signInWithPhoneNumber')
   .and.returnValue(
     Promise.resolve({
       confirm: jasmine.createSpy('confirm').and.returnValue(Promise.resolve()),
@@ -132,8 +132,8 @@ class TestPhoneFormComponent extends PhoneFormComponent {
   }
 
   // Make protected methods directly accessible for testing
-  testGetAuth() {
-    return this['auth']; // Access private property with indexing
+  async testGetAuth() {
+    return (await firstValueFrom(this['ui'].config())).getAuth();
   }
 
   testGetUi() {
@@ -157,7 +157,7 @@ class TestPhoneFormComponent extends PhoneFormComponent {
       this.phoneNumber = phoneNumber;
       // Call our mock function directly
       const result = await mockFuiSignInWithPhoneNumber(
-        this.testGetAuth(),
+        await this.testGetAuth(),
         phoneNumber,
         this.recaptchaVerifier,
         {
@@ -382,7 +382,7 @@ describe('PhoneFormComponent', () => {
         MockCountrySelectorComponent,
       ],
       providers: [
-        { provide: FirebaseUi, useValue: mockFirebaseUi },
+        { provide: FirebaseUI, useValue: mockFirebaseUi },
         { provide: Auth, useValue: mockAuthService },
       ],
     }).compileComponents();
@@ -423,7 +423,7 @@ describe('PhoneFormComponent', () => {
     expect(component.confirmationResult).toBeNull();
   });
 
-  it('should call fuiSignInWithPhoneNumber when handling phone submission', fakeAsync(() => {
+  it('should call signInWithPhoneNumber when handling phone submission', fakeAsync(() => {
     component.handlePhoneSubmit('1234567890');
     tick();
 
@@ -459,7 +459,7 @@ describe('PhoneFormComponent', () => {
     expect(mockFuiConfirmPhoneNumber).toHaveBeenCalled();
   }));
 
-  it('should call fuiSignInWithPhoneNumber when handling resend code', fakeAsync(() => {
+  it('should call signInWithPhoneNumber when handling resend code', fakeAsync(() => {
     component.confirmationResult = {} as ConfirmationResult;
     component.canResend = true;
     component.phoneNumber = '1234567890';