migrate firebase auth

src/app/app-routing.module.ts

@@ -1,7 +1,7 @@
 import {NgModule} from '@angular/core';
 import {PreloadAllModules, RouterModule, Routes} from '@angular/router';
-import {AngularFireAuthGuard, redirectUnauthorizedTo} from '@angular/fire/compat/auth-guard';
 import {RoleGuard} from './widget-modules/guards/role.guard';
+import {AuthGuard} from './widget-modules/guards/auth.guard';
 
 const routes: Routes = [
   {
@@ -12,27 +12,24 @@ const routes: Routes = [
   {
     path: 'songs',
     loadChildren: () => import('./modules/songs/songs.module').then(m => m.SongsModule),
-    canActivate: [AngularFireAuthGuard, RoleGuard],
+    canActivate: [AuthGuard, RoleGuard],
     data: {
-      authGuardPipe: () => redirectUnauthorizedTo(['user', 'login']),
       requiredRoles: ['user'],
     },
   },
   {
     path: 'shows',
     loadChildren: () => import('./modules/shows/shows.module').then(m => m.ShowsModule),
-    canActivate: [AngularFireAuthGuard, RoleGuard],
+    canActivate: [AuthGuard, RoleGuard],
     data: {
-      authGuardPipe: () => redirectUnauthorizedTo(['user', 'login']),
       requiredRoles: ['leader', 'member'],
     },
   },
   {
     path: 'presentation',
     loadChildren: () => import('./modules/presentation/presentation.module').then(m => m.PresentationModule),
-    canActivate: [AngularFireAuthGuard, RoleGuard],
+    canActivate: [AuthGuard, RoleGuard],
     data: {
-      authGuardPipe: () => redirectUnauthorizedTo(['user', 'login']),
       requiredRoles: ['presenter'],
     },
   },

src/app/modules/user/user-routing.module.ts

@@ -3,10 +3,10 @@ import {RouterModule, Routes} from '@angular/router';
 import {LoginComponent} from './login/login.component';
 import {InfoComponent} from './info/info.component';
 import {LogoutComponent} from './logout/logout.component';
-import {AngularFireAuthGuard, redirectUnauthorizedTo} from '@angular/fire/compat/auth-guard';
 import {PasswordComponent} from './password/password.component';
 import {PasswordSendComponent} from './password-send/password-send.component';
 import {NewComponent} from './new/new.component';
+import {AuthGuard} from '../../widget-modules/guards/auth.guard';
 
 const routes: Routes = [
   {
@@ -37,8 +37,7 @@ const routes: Routes = [
   {
     path: 'info',
     component: InfoComponent,
-    canActivate: [AngularFireAuthGuard],
-    data: {authGuardPipe: () => redirectUnauthorizedTo(['user', 'login'])},
+    canActivate: [AuthGuard],
   },
 ];
 

src/app/services/user/user.service.ts

@@ -1,5 +1,5 @@
 import {Injectable} from '@angular/core';
-import {AngularFireAuth} from '@angular/fire/compat/auth';
+import {Auth, authState, createUserWithEmailAndPassword, sendPasswordResetEmail, signInWithEmailAndPassword, signOut} from '@angular/fire/auth';
 import {BehaviorSubject, firstValueFrom, Observable} from 'rxjs';
 import {filter, map, shareReplay, switchMap, take, tap} from 'rxjs/operators';
 import {User} from './user';
@@ -26,13 +26,13 @@ export class UserService {
   private userByIdCache = new Map<string, Observable<User | null>>();
 
   public constructor(
-    private afAuth: AngularFireAuth,
+    private auth: Auth,
     private db: DbService,
     private router: Router,
     private showDataService: ShowDataService,
     private showSongDataService: ShowSongDataService
   ) {
-    this.afAuth.authState
+    authState(this.auth)
       .pipe(
         filter(auth => !!auth),
         map(auth => auth?.uid ?? ''),
@@ -65,7 +65,7 @@ export class UserService {
   };
 
   public async login(user: string, password: string): Promise<string | null> {
-    const aUser = await this.afAuth.signInWithEmailAndPassword(user, password);
+    const aUser = await signInWithEmailAndPassword(this.auth, user, password);
     if (!aUser.user) return null;
     const dUser = await this.readUser(aUser.user.uid);
     if (!dUser) return null;
@@ -76,12 +76,12 @@ export class UserService {
     return aUser.user.uid;
   }
 
-  public loggedIn$: () => Observable<boolean> = () => this.afAuth.authState.pipe(map(_ => !!_));
+  public loggedIn$: () => Observable<boolean> = () => authState(this.auth).pipe(map(_ => !!_));
 
   public list$: () => Observable<User[]> = (): Observable<User[]> => this.users$;
 
   public async logout(): Promise<void> {
-    await this.afAuth.signOut();
+    await signOut(this.auth);
     this.iUser$.next(null);
     this.iUserId$.next(null);
   }
@@ -92,11 +92,11 @@ export class UserService {
 
   public async changePassword(user: string): Promise<void> {
     const url = environment.url;
-    await this.afAuth.sendPasswordResetEmail(user, {url});
+    await sendPasswordResetEmail(this.auth, user, {url});
   }
 
   public async createNewUser(user: string, name: string, password: string): Promise<void> {
-    const aUser = await this.afAuth.createUserWithEmailAndPassword(user, password);
+    const aUser = await createUserWithEmailAndPassword(this.auth, user, password);
     if (!aUser.user) return;
     const userId = aUser.user.uid;
     await this.db.doc('users/' + userId).set({name, chordMode: 'onlyFirst', songUsage: {}});

src/app/widget-modules/guards/auth.guard.ts

@@ -0,0 +1,22 @@
+import {Injectable} from '@angular/core';
+import {CanActivate, Router, UrlTree} from '@angular/router';
+import {Auth, authState} from '@angular/fire/auth';
+import {Observable} from 'rxjs';
+import {map, take} from 'rxjs/operators';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class AuthGuard implements CanActivate {
+  public constructor(
+    private auth: Auth,
+    private router: Router
+  ) {}
+
+  public canActivate(): Observable<boolean | UrlTree> {
+    return authState(this.auth).pipe(
+      take(1),
+      map(user => (user ? true : this.router.createUrlTree(['user', 'login'])))
+    );
+  }
+}

src/main.ts

@@ -9,13 +9,11 @@ import {ServiceWorkerModule} from '@angular/service-worker';
 import {AngularFireModule} from '@angular/fire/compat';
 import {AngularFirestoreModule} from '@angular/fire/compat/firestore';
 import {AngularFireStorageModule} from '@angular/fire/compat/storage';
-import {AngularFireDatabaseModule} from '@angular/fire/compat/database';
-import {AngularFireAuthModule} from '@angular/fire/compat/auth';
-import {AngularFireAuthGuardModule} from '@angular/fire/compat/auth-guard';
 import {FontAwesomeModule} from '@fortawesome/angular-fontawesome';
 import {AppComponent} from './app/app.component';
 import {provideFirebaseApp, initializeApp} from '@angular/fire/app';
 import {provideFirestore, getFirestore} from '@angular/fire/firestore';
+import {getAuth, provideAuth} from '@angular/fire/auth';
 import {UserService} from './app/services/user/user.service';
 
 declare global {
@@ -41,12 +39,10 @@ bootstrapApplication(AppComponent, {
       AngularFireModule.initializeApp(environment.firebase),
       AngularFirestoreModule.enablePersistence({synchronizeTabs: true}),
       AngularFireStorageModule,
-      AngularFireDatabaseModule,
-      AngularFireAuthModule,
-      AngularFireAuthGuardModule,
       FontAwesomeModule
     ),
     provideFirebaseApp(() => initializeApp(environment.firebase)),
+    provideAuth(() => getAuth()),
     provideFirestore(() => getFirestore()),
     {provide: MAT_DATE_LOCALE, useValue: 'de-DE'},
     provideAnimations(),