diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts index a46f4ba..b66a68e 100644 --- a/src/app/app-routing.module.ts +++ b/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'], }, }, diff --git a/src/app/modules/user/user-routing.module.ts b/src/app/modules/user/user-routing.module.ts index 8335f50..6e36e25 100644 --- a/src/app/modules/user/user-routing.module.ts +++ b/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], }, ]; diff --git a/src/app/services/user/user.service.ts b/src/app/services/user/user.service.ts index 31144de..7e04b66 100644 --- a/src/app/services/user/user.service.ts +++ b/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>(); 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 { - 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 = () => this.afAuth.authState.pipe(map(_ => !!_)); + public loggedIn$: () => Observable = () => authState(this.auth).pipe(map(_ => !!_)); public list$: () => Observable = (): Observable => this.users$; public async logout(): Promise { - 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 { 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 { - 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: {}}); diff --git a/src/app/widget-modules/guards/auth.guard.ts b/src/app/widget-modules/guards/auth.guard.ts new file mode 100644 index 0000000..f6c33c3 --- /dev/null +++ b/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 { + return authState(this.auth).pipe( + take(1), + map(user => (user ? true : this.router.createUrlTree(['user', 'login']))) + ); + } +} diff --git a/src/main.ts b/src/main.ts index 15c0ae3..885bc1b 100644 --- a/src/main.ts +++ b/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(),