import { Component , OnInit , OnDestroy , PLATFORM_ID } from '@angular/core' ; import { AngularFireAuth } from '@angular/fire/compat/auth' ; import firebase from '@firebase/app-compat' ; import { Subscription } from 'rxjs' ; import { map } from 'rxjs/operators' ; import { trace } from '@angular/fire/compat/performance' ; import { Inject } from '@angular/core' ; import { isPlatformServer } from '@angular/common' ; @ Component ( { selector : 'app-auth' , template : `
    <p>
      Auth!
      {{ (auth.user | async)?.uid | json }}
      {{ (auth.credential | async)?.additionalUserInfo.isNewUser | json }}
      <button (click)="login()" *ngIf="showLoginButton">Log in with Google</button>
      <button (click)="loginAnonymously()" *ngIf="showLoginButton">Log in anonymously</button>
      <button (click)="logout()" *ngIf="showLogoutButton">Log out</button>
    </p>
  ` , styles : [ ] } ) export class AuthComponent implements OnInit , OnDestroy { private readonly userDisposable : Subscription | undefined ; showLoginButton = false ; showLogoutButton = false ; constructor ( public readonly auth , @ Inject ( PLATFORM_ID ) platformId ) { if ( ! isPlatformServer ( platformId ) ) { this . userDisposable = this . auth . authState . pipe ( trace ( 'auth' ) , map ( u => ! ! u ) ) . subscribe ( isLoggedIn => { this . showLoginButton = ! isLoggedIn ; this . showLogoutButton = isLoggedIn ; } ) ; } } ngOnInit ( ) { } ngOnDestroy ( ) { if ( this . userDisposable ) { this . userDisposable . unsubscribe ( ) ; } } async login ( ) { const user = await this . auth . signInWithPopup ( new firebase . auth . GoogleAuthProvider ( ) ) ; } async loginAnonymously ( ) { const user = await this . auth . signInAnonymously ( ) ; } logout ( ) { this . auth . signOut ( ) ; } }