Firebase v7, analytics and remote-config

Author: jamesdaniels

package.json

@@ -42,7 +42,7 @@
     "@angular/platform-browser": ">=6.0.0 <9 || ^9.0.0-0",
     "@angular/platform-browser-dynamic": ">=6.0.0 <9 || ^9.0.0-0",
     "@angular/router": ">=6.0.0 <9 || ^9.0.0-0",
-    "firebase": ">= 5.5.7 <7",
+    "firebase": ">= 5.5.7 <8",
     "firebase-tools": "^6.10.0",
     "fuzzy": "^0.1.3",
     "inquirer": "^6.2.2",

src/analytics/analytics.module.ts

@@ -0,0 +1,11 @@
+import { NgModule } from '@angular/core';
+import { AngularFireAnalytics } from './analytics';
+
+@NgModule({
+  providers: [ AngularFireAnalytics ]
+})
+export class AngularFireAnalyticsModule {
+  constructor(_: AngularFireAnalytics) {
+    // DI inject Analytics here for the automatic data collection
+  } 
+}

src/analytics/analytics.spec.ts

@@ -0,0 +1,168 @@
+import { User } from 'firebase/app';
+import { Observable, Subject } from 'rxjs'
+import { TestBed, inject } from '@angular/core/testing';
+import { FirebaseApp, FirebaseOptionsToken, AngularFireModule, FirebaseNameOrConfigToken } from '@angular/fire';
+import { AngularFireAuth, AngularFireAuthModule } from '@angular/fire/auth';
+import { COMMON_CONFIG } from './test-config';
+import { take, skip } from 'rxjs/operators';
+
+function authTake(auth: Observable<any>, count: number): Observable<any> {
+  return take.call(auth, 1);
+}
+
+function authSkip(auth: Observable<any>, count: number): Observable<any> {
+  return skip.call(auth, 1);
+}
+
+const firebaseUser = <User> {
+  uid: '12345',
+  providerData: [{ displayName: 'jeffbcrossyface' }]
+};
+
+describe('AngularFireAuth', () => {
+  let app: FirebaseApp;
+  let afAuth: AngularFireAuth;
+  let authSpy: jasmine.Spy;
+  let mockAuthState: Subject<User>;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      imports: [
+        AngularFireModule.initializeApp(COMMON_CONFIG),
+        AngularFireAuthModule
+      ]
+    });
+    inject([FirebaseApp, AngularFireAuth], (app_: FirebaseApp, _auth: AngularFireAuth) => {
+      app = app_;
+      afAuth = _auth;
+    })();
+
+    mockAuthState = new Subject<User>();
+    spyOn(afAuth, 'authState').and.returnValue(mockAuthState);
+    spyOn(afAuth, 'idToken').and.returnValue(mockAuthState);
+    afAuth.authState = mockAuthState as Observable<User>;
+    afAuth.idToken = mockAuthState as Observable<User>;
+  });
+
+  afterEach(done => {
+    afAuth.auth.app.delete().then(done, done.fail);
+  });
+
+  describe('Zones', () => {
+    it('should call operators and subscriber in the same zone as when service was initialized', (done) => {
+      // Initialize the app outside of the zone, to mimick real life behavior.
+      let ngZone = Zone.current.fork({
+        name: 'ngZone'
+      });
+      ngZone.run(() => {
+        const subs = [
+          afAuth.authState.subscribe(user => {
+            expect(Zone.current.name).toBe('ngZone');
+            done();
+          }, done.fail),
+          afAuth.authState.subscribe(user => {
+            expect(Zone.current.name).toBe('ngZone');
+            done();
+          }, done.fail)
+        ];
+        mockAuthState.next(firebaseUser);
+        subs.forEach(s => s.unsubscribe());
+      });
+    });
+  });
+
+  it('should be exist', () => {
+    expect(afAuth instanceof AngularFireAuth).toBe(true);
+  });
+
+  it('should have the Firebase Auth instance', () => {
+    expect(afAuth.auth).toBeDefined();
+  });
+
+  it('should have an initialized Firebase app', () => {
+    expect(afAuth.auth.app).toBeDefined();
+    expect(afAuth.auth.app).toEqual(app);
+  });
+
+  it('should emit auth updates through authState', (done: any) => {
+    let count = 0;
+
+    // Check that the first value is null and second is the auth user
+    const subs = afAuth.authState.subscribe(user => {
+      if (count === 0) {
+        expect(user).toBe(null!);
+        count = count + 1;
+        mockAuthState.next(firebaseUser);
+      } else {
+        expect(user).toEqual(firebaseUser);
+        subs.unsubscribe();
+        done();
+      }
+    }, done, done.fail);
+    mockAuthState.next(null!);
+  });
+
+  it('should emit auth updates through idToken', (done: any) => {
+    let count = 0;
+
+    // Check that the first value is null and second is the auth user
+    const subs = afAuth.idToken.subscribe(user => {
+      if (count === 0) {
+        expect(user).toBe(null!);
+        count = count + 1;
+        mockAuthState.next(firebaseUser);
+      } else {
+        expect(user).toEqual(firebaseUser);
+        subs.unsubscribe();
+        done();
+      }
+    }, done, done.fail);
+    mockAuthState.next(null!);
+  });
+
+});
+
+const FIREBASE_APP_NAME_TOO = (Math.random() + 1).toString(36).substring(7);
+
+describe('AngularFireAuth with different app', () => {
+  let app: FirebaseApp;
+  let afAuth: AngularFireAuth;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      imports: [
+        AngularFireModule.initializeApp(COMMON_CONFIG),
+        AngularFireAuthModule
+      ],
+      providers: [
+        { provide: FirebaseNameOrConfigToken, useValue: FIREBASE_APP_NAME_TOO },
+        { provide: FirebaseOptionsToken, useValue: COMMON_CONFIG }
+      ]
+    });
+    inject([FirebaseApp, AngularFireAuth], (app_: FirebaseApp, _afAuth: AngularFireAuth) => {
+      app = app_;
+      afAuth = _afAuth;
+    })();
+  });
+
+  afterEach(done => {
+    app.delete().then(done, done.fail);
+  });
+
+  describe('<constructor>', () => {
+
+    it('should be an AngularFireAuth type', () => {
+      expect(afAuth instanceof AngularFireAuth).toEqual(true);
+    });
+
+    it('should have an initialized Firebase app', () => {
+      expect(afAuth.auth.app).toBeDefined();
+      expect(afAuth.auth.app).toEqual(app);
+    });
+
+    it('should have an initialized Firebase app instance member', () => {
+      expect(afAuth.auth.app.name).toEqual(FIREBASE_APP_NAME_TOO);
+    });
+  });
+
+});

src/analytics/analytics.ts

@@ -0,0 +1,72 @@
+import { Injectable, Inject, Optional, NgZone, InjectionToken } from '@angular/core';
+import { Observable, from, of } from 'rxjs';
+import { map, switchMap, tap, filter } from 'rxjs/operators';
+import { FirebaseAppConfig, FirebaseOptions, runOutsideAngular } from '@angular/fire';
+import { Router, NavigationEnd } from '@angular/router';
+import { FirebaseAnalytics, FirebaseOptionsToken, FirebaseNameOrConfigToken, _firebaseAppFactory } from '@angular/fire';
+
+export const AUTOMATICALLY_SET_CURRENT_SCREEN = new InjectionToken<boolean>('angularfire2.analytics.setCurrentScreen');
+export const ANALYTICS_COLLECTION_ENABLED = new InjectionToken<boolean>('angularfire2.analytics.analyticsCollectionEnabled');
+export const AUTOMATICALLY_TRACK_USER_IDENTIFIER = new InjectionToken<boolean>('angularfire2.analytics.trackUserIdentifier');
+
+@Injectable()
+export class AngularFireAnalytics {
+
+  /**
+   * Firebase Analytics instance
+   */
+  public readonly analytics: Observable<FirebaseAnalytics>;
+
+  constructor(
+    @Inject(FirebaseOptionsToken) options:FirebaseOptions,
+    @Optional() @Inject(FirebaseNameOrConfigToken) nameOrConfig:string|FirebaseAppConfig|null|undefined,
+    @Optional() router:Router,
+    @Optional() @Inject(AUTOMATICALLY_SET_CURRENT_SCREEN) automaticallySetCurrentScreen:boolean|null,
+    @Optional() @Inject(ANALYTICS_COLLECTION_ENABLED) analyticsCollectionEnabled:boolean|null,
+    @Optional() @Inject(AUTOMATICALLY_TRACK_USER_IDENTIFIER) automaticallyTrackUserIdentifier:boolean|null,
+    private zone: NgZone
+  ) {
+    // @ts-ignore zapping in the UMD in the build script
+    const requireAnalytics = from(import('firebase/analytics'));
+
+    this.analytics = requireAnalytics.pipe(
+      map(() => _firebaseAppFactory(options, nameOrConfig)),
+      map(app => app.analytics()),
+      tap(analytics => {
+        if (analyticsCollectionEnabled == false) { analytics.setAnalyticsCollectionEnabled(false) }
+      }),
+      runOutsideAngular(zone)
+    );
+
+    if (router && automaticallySetCurrentScreen !== false) {
+      this.analytics.pipe(
+        switchMap(analytics =>
+          router.events.pipe(
+            filter<NavigationEnd>(e => e instanceof NavigationEnd),
+            tap(e => console.log(e)),
+            tap(e => analytics.setCurrentScreen(e.url))
+          )
+        )
+      ).subscribe();
+    }
+
+    if (automaticallyTrackUserIdentifier !== false) {
+      this.analytics.pipe(
+        switchMap(analytics => {
+          if (analytics.app.auth) {
+            const auth = analytics.app.auth();
+            return new Observable<firebase.User|null>(auth.onAuthStateChanged.bind(auth)).pipe(
+              tap(user => console.log("uid", user && user.uid)),
+              tap(user => user ? analytics.setUserId(user.uid) : analytics.setUserId(null!))
+            )
+          } else {
+            return of()
+          }
+        }),
+        runOutsideAngular(zone)
+      ).subscribe()
+    }
+
+  }
+
+}

src/analytics/index.spec.ts

@@ -0,0 +1 @@
+import './analytics.spec';

src/analytics/index.ts

@@ -0,0 +1 @@
+export * from './public_api';

src/analytics/package.json

@@ -0,0 +1,8 @@
+{
+  "name": "@angular/fire/analytics",
+  "main": "../bundles/analytics.umd.js",
+  "module": "index.js",
+  "es2015": "./es2015/index.js",
+  "typings": "index.d.ts",
+  "sideEffects": false
+}

src/analytics/public_api.ts

@@ -0,0 +1,2 @@
+export * from './analytics';
+export * from './analytics.module';

src/analytics/test-config.ts

@@ -0,0 +1,7 @@
+
+export const COMMON_CONFIG = {
+  apiKey: "AIzaSyBVSy3YpkVGiKXbbxeK0qBnu3-MNZ9UIjA",
+  authDomain: "angularfire2-test.firebaseapp.com",
+  databaseURL: "https://angularfire2-test.firebaseio.com",
+  storageBucket: "angularfire2-test.appspot.com",
+};

src/analytics/tsconfig-build.json

@@ -0,0 +1,33 @@
+{
+  "compilerOptions": {
+    "baseUrl": ".",
+    "experimentalDecorators": true,
+    "emitDecoratorMetadata": true,
+    "module": "es2015",
+    "target": "es2015",
+    "noImplicitAny": false,
+    "outDir": "../../dist/packages-dist/analytics/es2015",
+    "rootDir": ".",
+    "sourceMap": true,
+    "inlineSources": true,
+    "declaration": false,
+    "removeComments": true,
+    "strictNullChecks": true,
+    "lib": ["es2015", "dom", "es2015.promise", "es2015.collection", "es2015.iterable"],
+    "skipLibCheck": true,
+    "moduleResolution": "node",
+    "paths": {
+      "@angular/fire": ["../../dist/packages-dist"]
+    }
+  },
+  "files": [
+    "index.ts",
+    "../../node_modules/zone.js/dist/zone.js.d.ts"
+  ],
+  "angularCompilerOptions": {
+    "skipTemplateCodegen": true,
+    "strictMetadataEmit": true,
+    "enableSummariesForJit": false
+  }
+}
+