Migrate authentication to Firebase Modular SDK (#201)

Author: mikkopaderes

addon/authenticators/firebase.ts

@@ -1,12 +1,20 @@
 import { getOwner } from '@ember/application';
 import { inject as service } from '@ember/service';
 
+import { User, UserCredential } from 'firebase/auth';
 import BaseAuthenticator from 'ember-simple-auth/authenticators/base';
-import FirebaseService from 'ember-cloud-firestore-adapter/services/-firebase';
 import firebase from 'firebase/compat/app';
 
+import {
+  getRedirectResult,
+  onAuthStateChanged,
+  signInWithCustomToken,
+  signOut,
+} from 'ember-cloud-firestore-adapter/firebase/auth';
+import FirebaseService from 'ember-cloud-firestore-adapter/services/-firebase';
+
 interface AuthenticateCallback {
-  (auth: firebase.auth.Auth): Promise<firebase.auth.UserCredential>;
+  (auth: firebase.auth.Auth): Promise<UserCredential>;
 }
 
 export default class FirebaseAuthenticator extends BaseAuthenticator {
@@ -18,20 +26,20 @@ export default class FirebaseAuthenticator extends BaseAuthenticator {
     return getOwner(this).lookup('service:fastboot');
   }
 
-  public async authenticate(
-    callback: AuthenticateCallback,
-  ): Promise<{ user: firebase.User | null }> {
+  public async authenticate(callback: AuthenticateCallback): Promise<{ user: User | null }> {
     const auth = this.firebase.auth();
     const credential = await callback(auth);
 
     return { user: credential.user };
   }
 
   public invalidate(): Promise<void> {
-    return this.firebase.auth().signOut();
+    const auth = this.firebase.auth();
+
+    return signOut(auth);
   }
 
-  public restore(): Promise<{ user: firebase.User | null }> {
+  public restore(): Promise<{ user: User | null }> {
     return new Promise((resolve, reject) => {
       const auth = this.firebase.auth();
 
@@ -42,7 +50,7 @@ export default class FirebaseAuthenticator extends BaseAuthenticator {
         const token = this.fastboot.request.headers.get('Authorization')?.split('Bearer ')[1];
 
         if (token) {
-          auth.signInWithCustomToken(token).then((credential) => {
+          signInWithCustomToken(auth, token).then((credential) => {
             resolve({ user: credential.user });
           }).catch(() => {
             reject();
@@ -51,13 +59,13 @@ export default class FirebaseAuthenticator extends BaseAuthenticator {
           reject();
         }
       } else {
-        const unsubscribe = auth.onAuthStateChanged(async (user) => {
+        const unsubscribe = onAuthStateChanged(auth, async (user) => {
           unsubscribe();
 
           if (user) {
             resolve({ user });
           } else {
-            auth.getRedirectResult().then((credential) => {
+            getRedirectResult(auth).then((credential) => {
               if (credential) {
                 resolve({ user: credential.user });
               } else {

docs/authentication.md

@@ -9,8 +9,10 @@ Using the `session` service provided by ember-simple-auth, a callback must be pa
 The callback will have the [`firebase.auth.Auth`](https://firebase.google.com/docs/reference/js/firebase.auth.Auth) as a param. Use this to authenticate the user using any of the providers available. It **must** also return a promise that will resolve to an instance of [`firebase.auth.UserCredential`](https://firebase.google.com/docs/reference/js/v8/firebase.auth#usercredential).
 
 ```javascript
+import { signInWithEmailAndPassword } from 'ember-cloud-firestore-adapter/firebase/auth';
+
 this.session.authenticate('authenticator:firebase', (auth) => {
-  return auth.signInWithEmailAndPassword('my_email@gmail.com', 'my_password');
+  return signInWithEmailAndPassword(auth, 'my_email@gmail.com', 'my_password');
 });
 ```
 

tests/dummy/app/controllers/application.ts

@@ -1,5 +1,32 @@
+import { action } from '@ember/object';
+import { inject as service } from '@ember/service';
 import Controller from '@ember/controller';
 
+import SessionService from 'ember-simple-auth/services/session';
+import firebase from 'firebase/compat/app';
+
+import {
+  createUserWithEmailAndPassword,
+  signInWithEmailAndPassword,
+} from 'ember-cloud-firestore-adapter/firebase/auth';
+
 export default class ApplicationController extends Controller {
+  @service
+  declare public session: SessionService;
+
   public updateRecordParam: string = Math.random().toString(32).slice(2).substr(0, 5);
+
+  @action
+  login(): void {
+    this.session.authenticate('authenticator:firebase', (auth: firebase.auth.Auth) => (
+      createUserWithEmailAndPassword(auth, 'foo@gmail.com', 'foobar')
+    ).then((credential) => credential.user).catch(() => (
+      signInWithEmailAndPassword(auth, 'foo@gmail.com', 'foobar')
+    )));
+  }
+
+  @action
+  logout(): void {
+    this.session.invalidate();
+  }
 }

tests/dummy/app/controllers/login.ts

@@ -14,6 +14,4 @@ Router.map(function() {
   this.route('update-record', { path: '/update-record/:title' });
   this.route('delete-record');
   this.route('features');
-  this.route('login');
-  this.route('logout');
 });

tests/dummy/app/controllers/logout.ts

@@ -1,12 +1,17 @@
 <h2 id="title">Ember Cloud Firestore Dummy App</h2>
 
+<p>Authenticated: {{this.session.isAuthenticated}}</p>
+
+<div>
+  <button type="button" {{on 'click' this.login}}>Login</button>
+  <button type="button" {{on 'click' this.logout}}>Logout</button>
+</div>
+
 <LinkTo @route="create-record">Create Record</LinkTo>
 <LinkTo @route="update-record" @model={{this.updateRecordParam}}>Update Record</LinkTo>
 <LinkTo @route="delete-record">Delete Record</LinkTo>
 <LinkTo @route="find-all">Find All</LinkTo>
 <LinkTo @route="find-record">Find Record</LinkTo>
 <LinkTo @route="query">Query</LinkTo>
-<LinkTo @route="login">Login</LinkTo>
-<LinkTo @route="logout">Logout</LinkTo>
 
 {{outlet}}

tests/dummy/app/router.js

@@ -1,11 +1,32 @@
 import { module, test } from 'qunit';
 import { setupTest } from 'ember-qunit';
 
-import sinon from 'sinon';
+import firebase from 'firebase/compat/app';
+
+import { signInAnonymously, signOut } from 'ember-cloud-firestore-adapter/firebase/auth';
+import resetFixtureData from '../../helpers/reset-fixture-data';
 
 module('Unit | Authenticator | firebase', function (hooks) {
+  let auth: firebase.auth.Auth;
+  let db: firebase.firestore.Firestore;
+
   setupTest(hooks);
 
+  hooks.beforeEach(async function () {
+    const app = this.owner.lookup('service:-firebase');
+
+    auth = app.auth();
+    db = app.firestore();
+
+    await signInAnonymously(auth);
+    await resetFixtureData(db);
+  });
+
+  hooks.afterEach(async function () {
+    await signOut(auth);
+    await resetFixtureData(db);
+  });
+
   module('authenticate()', function () {
     test('should use the callback', async function (assert) {
       assert.expect(1);
@@ -22,118 +43,32 @@ module('Unit | Authenticator | firebase', function (hooks) {
   });
 
   module('invalidate()', function () {
-    test('should sign out firebase user', function (assert) {
+    test('should sign out firebase user', async function (assert) {
       assert.expect(1);
 
       // Arrange
       const authenticator = this.owner.lookup('authenticator:firebase');
-      const signOutStub = sinon.stub();
-      const firebase = {
-        auth: sinon.stub().returns({ signOut: signOutStub }),
-      };
-
-      authenticator.set('firebase', firebase);
 
       // Act
-      authenticator.invalidate();
+      await authenticator.invalidate();
 
       // Assert
-      assert.ok(signOutStub.calledOnce);
+      assert.equal(auth.currentUser, null);
     });
   });
 
   module('restore()', function () {
-    test('should sign in using custom token when fastboot header contains authorization token', async function (assert) {
-      assert.expect(1);
-
-      // Arrange
-      const authenticator = this.owner.lookup('authenticator:firebase');
-      const fastboot = this.owner.lookup('service:fastboot');
-
-      fastboot.set('isFastBoot', true);
-      fastboot.set('request', {
-        headers: new Headers({
-          Authorization: 'Bearer 123',
-        }),
-      });
-
-      const userCredential = {
-        user: { id: 'foo' },
-      };
-      const firebase = {
-        auth: sinon.stub().returns({
-          signInWithCustomToken: sinon
-            .stub()
-            .withArgs('123')
-            .returns(Promise.resolve(userCredential)),
-        }),
-      };
-
-      authenticator.set('firebase', firebase);
-
-      // Act
-      const result = await authenticator.restore();
-
-      // Assert
-      assert.deepEqual(result, {
-        user: { id: 'foo' },
-      });
-    });
-
-    test('should return the authenticated user from auth state changed', async function (assert) {
-      assert.expect(1);
-
-      // Arrange
-      const authenticator = this.owner.lookup('authenticator:firebase');
-      const user = { id: 'foo' };
-      const firebase = {
-        auth: sinon.stub().returns({
-          onAuthStateChanged(callback: (firebaseUser: { id: string }) => void) {
-            setTimeout(() => callback(user));
-
-            return () => {};
-          },
-        }),
-      };
-
-      authenticator.set('firebase', firebase);
-
-      // Act
-      const result = await authenticator.restore();
-
-      // Assert
-      assert.deepEqual(result, {
-        user: { id: 'foo' },
-      });
-    });
-
-    test('should return the authenticated user from a redirect result', async function (assert) {
+    test('should return the authenticated user', async function (assert) {
       assert.expect(1);
 
       // Arrange
       const authenticator = this.owner.lookup('authenticator:firebase');
-      const user = { id: 'foo' };
-      const firebase = {
-        auth: sinon.stub().returns({
-          getRedirectResult: sinon.stub().returns(Promise.resolve({ user })),
-
-          onAuthStateChanged(callback: () => void) {
-            setTimeout(() => callback());
-
-            return () => {};
-          },
-        }),
-      };
-
-      authenticator.set('firebase', firebase);
 
       // Act
       const result = await authenticator.restore();
 
       // Assert
-      assert.deepEqual(result, {
-        user: { id: 'foo' },
-      });
+      assert.ok(result.user.isAnonymous);
     });
   });
 });