chore(sdk): Update to Firebase JS SDK 4.0 (breaking changes) (#996)

chore(sdk): Update to Firebase JS SDK 4.0 (breaking changes)

Author: jamesdaniels

docs/version-4-upgrade.md

@@ -30,7 +30,8 @@ constructor(db: AngularFireDatabase, afAuth: AngularFireAuth) {
 
 ### Simplified Authentication API
 
-In 4.0 we've reduced the complexity of the auth module by providing only a [`firebase.User`](https://firebase.google.com/docs/reference/js/firebase.User) observer (`AngularFireAuth.authState`) and cutting the methods that were wrapping the Firebase SDK.
+In 4.0 we've reduced the complexity of the auth module by providing only [`firebase.User`](https://firebase.google.com/docs/reference/js/firebase.User) observers (`AngularFireAuth.authState`, `AngularFireAuth.idToken`) and cutting the methods that were wrapping the Firebase SDK.
+
 
 ```typescript
 import { AngularFireAuth } from 'angularfire2/auth';
@@ -40,7 +41,7 @@ import * as firebase from 'firebase/app';
 
 user: Observable<firebase.User>;
 constructor(afAuth: AngularFireAuth) {
-  this.user = afAuth.authState;
+  this.user = afAuth.authState; // only triggered on sign-in/out (for old behavior use .idToken)
 }
 ```
 

package.json

@@ -40,7 +40,7 @@
     "@angular/core": "^4.0.0",
     "@angular/platform-browser": "^4.0.0",
     "@angular/platform-browser-dynamic": "^4.0.0",
-    "firebase": "^3.6.6",
+    "firebase": "^4.0.0",
     "rxjs": "^5.0.1"
   },
   "devDependencies": {

src/auth/auth.spec.ts

@@ -27,13 +27,9 @@ const firebaseUser = <firebase.User> {
 
 describe('AngularFireAuth', () => {
   let app: firebase.app.App;
-  let authData: any;
-  let authCb: any;
   let afAuth: AngularFireAuth;
   let authSpy: jasmine.Spy;
   let mockAuthState: Subject<firebase.User>;
-  let fbAuthObserver: Observer<firebase.User>;
-  let windowLocation: any;
 
   beforeEach(() => {
     TestBed.configureTestingModule({
@@ -45,13 +41,13 @@ describe('AngularFireAuth', () => {
     inject([FirebaseApp, AngularFireAuth], (app_: FirebaseApp, _auth: AngularFireAuth) => {
       app = app_;
       afAuth = _auth;
-      authData = null;
-      authCb = null;
     })();
 
     mockAuthState = new Subject<firebase.User>();
     spyOn(afAuth, 'authState').and.returnValue(mockAuthState);
+    spyOn(afAuth, 'idToken').and.returnValue(mockAuthState);
     afAuth.authState = mockAuthState;
+    afAuth.idToken = mockAuthState;
   });
 
   afterEach(done => {
@@ -65,12 +61,18 @@ describe('AngularFireAuth', () => {
         name: 'ngZone'
       });
       ngZone.run(() => {
-        const subs = afAuth.authState.subscribe(user => {
-          expect(Zone.current.name).toBe('ngZone');
-          done();
-        }, done.fail);
+        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.unsubscribe();
+        subs.forEach(s => s.unsubscribe());
       });
     });
   });
@@ -88,6 +90,27 @@ describe('AngularFireAuth', () => {
 
     // Check that the first value is null and second is the auth user
     const subs = afAuth.authState.subscribe(user => {
+      console.log('What...', count, 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);
+    console.log('....!?');
+    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 => {
+      console.log("HI!....", count, user);
       if (count === 0) {
         expect(user).toBe(null);
         count = count + 1;

src/auth/auth.ts

@@ -17,12 +17,18 @@ export class AngularFireAuth {
   auth: firebase.auth.Auth;
 
   /**
-   * Observable of authentication state
+   * Observable of authentication state; as of 4.0 this is only triggered via sign-in/out
    */
   authState: Observable<firebase.User>;
 
+  /**
+   * Observable of the signed-in user's ID token; which includes sign-in, sign-out, and token refresh events
+   */
+  idToken: Observable<firebase.User>;
+
   constructor(public app: FirebaseApp) {
     this.authState = FirebaseAuthStateObservable(app);
+    this.idToken = FirebaseIdTokenObservable(app);
     this.auth = app.auth();
   }
 
@@ -43,3 +49,19 @@ export function FirebaseAuthStateObservable(app: FirebaseApp): Observable<fireba
   });
   return observeOn.call(authState, new utils.ZoneScheduler(Zone.current));
 }
+
+/**
+ * Create an Observable of Firebase ID token. Each event is called
+ * within the current zone.
+ * @param app - Firebase App instance
+ */
+export function FirebaseIdTokenObservable(app: FirebaseApp): Observable<firebase.User> {
+  const idToken = Observable.create((observer: Observer<firebase.User>) => {
+    app.auth().onIdTokenChanged(
+      (user?: firebase.User) => observer.next(user),
+      (error: firebase.auth.Error) => observer.error(error),
+      () => observer.complete()
+    )
+  });
+  return observeOn.call(idToken, new utils.ZoneScheduler(Zone.current));
+}