feat(project): Switch to modular Firebase sdk

Author: ciriousjoker

projects/ngx-auth-firebaseui/src/lib/components/ngx-auth-firebaseui-avatar/ngx-auth-firebaseui-avatar.component.ts

@@ -1,11 +1,10 @@
 import { Component, EventEmitter, Input, OnInit, Output } from "@angular/core";
-import { AngularFireAuth } from "@angular/fire/compat/auth";
-import firebase from "firebase/compat/app";
 import { Observable } from "rxjs";
 import { take } from 'rxjs/operators';
 import { MatDialog } from "@angular/material/dialog";
 import { UserComponent } from "..";
 import { AuthProcessService } from "../../services/auth-process.service";
+import { Auth, user, User } from "@angular/fire/auth";
 
 export interface LinkMenuItem {
   text: string;
@@ -48,15 +47,15 @@ export class NgxAuthFirebaseuiAvatarComponent implements OnInit {
   @Output()
   onSignOut: EventEmitter<void> = new EventEmitter();
 
-  user: firebase.User;
-  user$: Observable<firebase.User | null>;
+  user: User;
+  user$: Observable<User | null>;
   displayNameInitials: string | null;
 
-  constructor(public afa: AngularFireAuth, public dialog: MatDialog, private authProcess: AuthProcessService) {}
+  constructor(public afa: Auth, public dialog: MatDialog, private authProcess: AuthProcessService) {}
 
   ngOnInit() {
-    this.user$ = this.afa.user;
-    this.user$.subscribe((user: firebase.User) => {
+    this.user$ = user(this.afa);
+    this.user$.subscribe((user: User) => {
       this.user = user;
       this.displayNameInitials = user
         ? this.getDisplayNameInitials(user.displayName)
@@ -68,7 +67,7 @@ export class NgxAuthFirebaseuiAvatarComponent implements OnInit {
     if (!displayName) {
       return null;
     }
-    const initialsRegExp: RegExpMatchArray = displayName.match(/\b\w/g) || [];
+    const initialsRegExp: RegExpMatchArray = (displayName.match(/\b\w/g) || []) as RegExpMatchArray;
     const initials = (
       (initialsRegExp.shift() || "") + (initialsRegExp.pop() || "")
     ).toUpperCase();

projects/ngx-auth-firebaseui/src/lib/components/ngx-auth-firebaseui-user/user.component.html

@@ -1,9 +1,9 @@
-<div *ngIf="auth.authState| async; then authenticated else none">
+<div *ngIf="auth.currentUser !== null; then authenticated else none">
 
 </div>
 
 <ng-template #authenticated>
-  <mat-card *ngIf="auth.user | async as user">
+  <mat-card *ngIf="auth.currentUser as user">
     <!--<form [formGroup]="updateFormGroup" >-->
     <!--card header-->
     <mat-card-header fxLayout="column" fxLayoutAlign="center center">

projects/ngx-auth-firebaseui/src/lib/components/ngx-auth-firebaseui-user/user.component.ts

@@ -6,9 +6,8 @@ import {
   Input,
   Output,
 } from "@angular/core";
-import { AngularFireAuth } from "@angular/fire/compat/auth";
+import { Auth, updateEmail, updatePhoneNumber, updateProfile, User } from "@angular/fire/auth";
 import { UntypedFormControl, UntypedFormGroup, Validators } from "@angular/forms";
-import firebase from "firebase/compat/app";
 import {  MatFormFieldAppearance } from "@angular/material/form-field";
 import { NgxAuthFirebaseUIConfigToken } from "../../tokens";
 import {EMAIL_REGEX, NgxAuthFirebaseUIConfig, PHONE_NUMBER_REGEX} from '../../interfaces';
@@ -72,7 +71,7 @@ export class UserComponent {
   updatePhoneNumberFormControl: UntypedFormControl;
 
   constructor(
-    public auth: AngularFireAuth,
+    public auth: Auth,
     public authProcess: AuthProcessService,
     private fireStoreService: FirestoreSyncService,
     @Inject(forwardRef(() => NgxAuthFirebaseUIConfigToken))
@@ -109,19 +108,19 @@ export class UserComponent {
 
       try {
         if (this.updateNameFormControl.dirty) {
-          await user.updateProfile({
+          await updateProfile(user, {
             displayName: this.updateNameFormControl.value,
           });
           snackBarMsg.push(`your name has been updated to ${user.displayName}`);
         }
 
         if (this.updateEmailFormControl.dirty) {
-          await user.updateEmail(this.updateEmailFormControl.value);
+          await updateEmail(user, this.updateEmailFormControl.value);
           snackBarMsg.push(`your email has been updated to ${user.email}`);
         }
 
         if (this.updatePhoneNumberFormControl.dirty) {
-          await user.updatePhoneNumber(this.updatePhoneNumberFormControl.value);
+          await updatePhoneNumber(user, this.updatePhoneNumberFormControl.value);
           console.log(
             "phone number = ",
             this.updatePhoneNumberFormControl.value
@@ -189,7 +188,7 @@ export class UserComponent {
   protected initUpdateFormGroup(): Observable<UntypedFormGroup> {
     return this.authProcess.user$.pipe(
       take(1),
-      map((currentUser: firebase.User) => {
+      map((currentUser: User) => {
         const updateFormGroup = new UntypedFormGroup({
           name: this.updateNameFormControl = new UntypedFormControl(
             { value: currentUser.displayName, disabled: this.editMode },

projects/ngx-auth-firebaseui/src/lib/components/ngx-auth-firebaseui/auth.component.ts

@@ -32,7 +32,7 @@ import { MatLegacyDialog as MatDialog, MatLegacyDialogRef as MatDialogRef } from
 import { MatLegacyFormFieldAppearance as MatFormFieldAppearance } from "@angular/material/legacy-form-field";
 
 // ANGULAR FIRE
-import { AngularFireAuth } from "@angular/fire/compat/auth";
+import { Auth } from "@angular/fire/auth";
 
 // Third PARTY
 import { MatPasswordStrengthComponent } from "@angular-material-extensions/password-strength";
@@ -191,7 +191,7 @@ export class AuthComponent
     @Inject(PLATFORM_ID) private platformId: Object,
     @Inject(forwardRef(() => NgxAuthFirebaseUIConfigToken))
     public config: NgxAuthFirebaseUIConfig,
-    public auth: AngularFireAuth,
+    public auth: Auth,
     public authProcess: AuthProcessService,
     public dialog: MatDialog,
     private activatedRoute: ActivatedRoute,

projects/ngx-auth-firebaseui/src/lib/guards/logged-in.guard.ts

@@ -1,10 +1,11 @@
 import {Inject, Injectable} from '@angular/core';
+import {user} from '@angular/fire/auth';
 import {ActivatedRouteSnapshot, CanActivate, Router, RouterStateSnapshot} from '@angular/router';
 import {Observable} from 'rxjs';
 import {map} from 'rxjs/operators';
 import {NgxAuthFirebaseUIConfig} from '../interfaces';
-import {NgxAuthFirebaseUIConfigToken} from '../tokens';
 import {AuthProcessService} from '../services/auth-process.service';
+import {NgxAuthFirebaseUIConfigToken} from '../tokens';
 
 @Injectable({
   providedIn: 'root'
@@ -19,7 +20,7 @@ export class LoggedInGuard implements CanActivate {
   }
 
   canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean> {
-    return this.authProcess.afa.user.pipe(
+    return user(this.authProcess.afa).pipe(
       map(user => {
         if (user) {
           if (this.config.guardProtectedRoutesUntilEmailIsVerified && !user.emailVerified && !user.isAnonymous) {

projects/ngx-auth-firebaseui/src/lib/ngx-auth-firebaseui.module.ts

@@ -8,8 +8,8 @@ import {FlexLayoutModule} from '@angular/flex-layout';
 // @angular/fire
 import {FIREBASE_APP_NAME, FIREBASE_OPTIONS} from '@angular/fire/compat';
 import {FirebaseOptions} from '@firebase/app-types';
-import {AngularFireAuthModule} from '@angular/fire/compat/auth';
-import {AngularFirestoreModule} from '@angular/fire/compat/firestore';
+import {getAuth, provideAuth} from '@angular/fire/auth';
+import {getFirestore, provideFirestore} from '@angular/fire/firestore';
 // @angular/material
 import {MatButtonModule} from '@angular/material/button';
 import {MatCardModule} from '@angular/material/card';
@@ -101,8 +101,8 @@ export {FirestoreSyncService} from './services/firestore-sync.service';
     // ANGULAR MATERIAL EXTENSIONS
     MatPasswordStrengthModule,
     // ANGULARFIRE2
-    AngularFireAuthModule,
-    AngularFirestoreModule,
+    provideAuth(()=> getAuth()),
+    provideFirestore(()=> getFirestore()),
   ],
   exports: [
     AuthComponent,
@@ -111,8 +111,6 @@ export {FirestoreSyncService} from './services/firestore-sync.service';
     AuthProvidersComponent,
     EmailConfirmationComponent,
     // LoggedInGuard,
-    AngularFireAuthModule,
-    AngularFirestoreModule,
     NgxAuthFirebaseuiLoginComponent,
     NgxAuthFirebaseuiRegisterComponent
   ],