From 4561c4e192a39fc643d4c4fc3db055d830492334 Mon Sep 17 00:00:00 2001
From: Daniel Erat <dan@erat.org>
Date: Sat, 17 Aug 2019 15:59:29 -0400
Subject: [PATCH] Load Firebase asynchronously. (#77)

Update src/firebase/index.ts to export getFirebase, getAuth,
getFirestore, getFunctions, and getFirebaseUI functions that
load the corresponding Firebase modules asynchronously. This
lets webpack create separate chunks for each piece of
Firebase, reducing the app entrypoint from 1.12 MiB to 593
KiB.

It also improves Lighthouse measurements for the login page
on a simulated 3G network with 4x CPU slowdown:

First Contentful Paint: 3.1s -> 2.4s
Time to Interactive:    3.5s -> 3.0s
First Meaningful Paint: 3.2s -> 2.4s
First CPU Idle:         3.3s -> 2.9s

I'd expected an improvement here, since the login page
doesn't depend on Firestore.

It's harder to tell if there's a benefit on the other pages.
They all require login, which means that "Clear Storage"
needs to be unchecked in Chrome's Dev Tools Audit tab, which
I think means that the cache is preserved, so download time
doesn't get measured. See
https://github.com/GoogleChrome/lighthouse/issues/2599 for
more discussion of this. It stands to reason that there
would be less benefit there, though, since all of those
pages require both the auth and Firestore modules to be
loaded before they can do anything meaningful.
---
 src/App.vue                          | 29 ++++------
 src/components/ClimbDropdown.test.ts |  2 +-
 src/components/RouteList.test.ts     |  2 +-
 src/components/Toolbar.vue           | 14 +++--
 src/firebase/auth.ts                 | 20 -------
 src/firebase/firestore.ts            | 20 -------
 src/firebase/functions.ts            | 11 ----
 src/firebase/index.ts                | 65 ++++++++++++++++++++++
 src/firebase/init.ts                 |  5 +-
 src/firebase/mock.ts                 | 20 +++++--
 src/log/index.ts                     | 15 ++---
 src/main.ts                          | 20 ++++---
 src/mixins/UserLoader.ts             | 66 +++++++++++++++++-----
 src/router/index.ts                  | 30 +++++-----
 src/views/Login.vue                  | 83 +++++++++++++++-------------
 src/views/Profile.test.ts            | 10 +++-
 src/views/Profile.vue                | 59 ++++++++++----------
 src/views/Routes.test.ts             |  9 ++-
 src/views/Routes.vue                 | 50 ++++++++++-------
 src/views/Statistics.test.ts         |  8 ++-
 src/views/Statistics.vue             | 17 +++---
 21 files changed, 320 insertions(+), 235 deletions(-)
 delete mode 100644 src/firebase/auth.ts
 delete mode 100644 src/firebase/firestore.ts
 delete mode 100644 src/firebase/functions.ts
 create mode 100644 src/firebase/index.ts

diff --git a/src/App.vue b/src/App.vue
index d8df3b5..9e29aa2 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -4,7 +4,7 @@
 
 <template>
   <v-app>
-    <Toolbar v-if="signedIn()" />
+    <Toolbar v-if="signedIn" />
     <v-content>
       <!-- Ideally, this could be wrapped in <keep-alive include="Routes"> to
            keep the slow-to-render Routes view alive after navigating away from
@@ -39,15 +39,18 @@
 
 <script lang="ts">
 import { Component, Mixins } from 'vue-property-decorator';
-import { auth } from '@/firebase/auth';
 
-import Perf from '@/mixins/Perf.ts';
+import { getAuth } from '@/firebase';
+import Perf from '@/mixins/Perf';
 import Toolbar from '@/components/Toolbar.vue';
 
 @Component({
   components: { Toolbar },
 })
 export default class App extends Mixins(Perf) {
+  // Whether the user is currently signed in or not.
+  signedIn = false;
+
   // Snackbar text currently (or last) displayed.
   snackbarText = '';
   // Color currently used for the snackbar.
@@ -58,20 +61,6 @@ export default class App extends Mixins(Perf) {
   // Amount of time to display snackbar before autohiding, in milliseconds.
   snackbarTimeoutMs = 0;
 
-  // This apparently needs to be a method rather than a computed property (i.e.
-  // don't add the 'get' keyword to make it a getter). Otherwise, it doesn't
-  // seem to pick up changes to auth.currentUser. Another option that seems to
-  // work is explicitly asking Firebase for auth state changes in mounted():
-  //
-  //   auth.onAuthStateChanged(user => {
-  //     this.signedIn = !!user;
-  //   });
-  //
-  // This is a bit less code, though.
-  signedIn() {
-    return !!auth.currentUser;
-  }
-
   // Displays the snackbar in response to a request from a component.
   onMessage(msg: string, color: string, timeout: number) {
     this.snackbarText = msg;
@@ -81,6 +70,12 @@ export default class App extends Mixins(Perf) {
   }
 
   mounted() {
+    getAuth().then(auth => {
+      auth.onAuthStateChanged(user => {
+        this.signedIn = !!user;
+      });
+    });
+
     this.$nextTick(() => {
       const data: Record<string, any> = { userAgent: navigator.userAgent };
       try {
diff --git a/src/components/ClimbDropdown.test.ts b/src/components/ClimbDropdown.test.ts
index 0d69393..d9bff86 100644
--- a/src/components/ClimbDropdown.test.ts
+++ b/src/components/ClimbDropdown.test.ts
@@ -7,7 +7,7 @@ import Vue from 'vue';
 import Vuetify from 'vuetify';
 
 import ClimbDropdown from './ClimbDropdown.vue';
-import { ClimbState } from '@/models.ts';
+import { ClimbState } from '@/models';
 
 Vue.use(Vuetify);
 
diff --git a/src/components/RouteList.test.ts b/src/components/RouteList.test.ts
index 0ae3e95..42deca9 100644
--- a/src/components/RouteList.test.ts
+++ b/src/components/RouteList.test.ts
@@ -8,7 +8,7 @@ import Vuetify from 'vuetify';
 
 import ClimbDropdown from './ClimbDropdown.vue';
 import RouteList from './RouteList.vue';
-import { ClimbState, ClimberInfo, SetClimbStateEvent } from '@/models.ts';
+import { ClimbState, ClimberInfo, SetClimbStateEvent } from '@/models';
 
 Vue.use(Vuetify);
 
diff --git a/src/components/Toolbar.vue b/src/components/Toolbar.vue
index fb57fd0..fa6d184 100644
--- a/src/components/Toolbar.vue
+++ b/src/components/Toolbar.vue
@@ -39,7 +39,7 @@
 
 <script lang="ts">
 import { Component, Vue } from 'vue-property-decorator';
-import { auth } from '@/firebase/auth';
+import { getAuth } from '@/firebase';
 
 // An entry in the navigation drawer.
 interface NavItem {
@@ -69,11 +69,13 @@ export default class Toolbar extends Vue {
       text: 'Sign out',
       icon: 'exit_to_app',
       method: () => {
-        auth.signOut().then(() => {
-          // It makes no sense to me, but this.$router produces an exception
-          // here: "TypeError: Cannot read property '_router' of undefined".
-          // this.$root.$router works, though...
-          this.$root.$router.replace('login');
+        getAuth().then(auth => {
+          auth.signOut().then(() => {
+            // It makes no sense to me, but this.$router produces an exception
+            // here: "TypeError: Cannot read property '_router' of undefined".
+            // this.$root.$router works, though...
+            this.$root.$router.replace('login');
+          });
         });
       },
     },
diff --git a/src/firebase/auth.ts b/src/firebase/auth.ts
deleted file mode 100644
index ec6f8d4..0000000
--- a/src/firebase/auth.ts
+++ /dev/null
@@ -1,20 +0,0 @@
-// Copyright 2019 Daniel Erat and Niniane Wang. All rights reserved.
-// Use of this source code is governed by a BSD-style license that can be
-// found in the LICENSE file.
-
-// This file exposes auth-related functionality from Firebase.
-
-import firebase from 'firebase/app';
-import 'firebase/auth';
-import './init';
-
-export const auth = firebase.auth();
-
-// getUser returns the firebase.auth.User for the currently-logged in user.
-// An error is thrown if the user is not logged in.
-export function getUser() {
-  if (!auth.currentUser) {
-    throw new Error('No current user');
-  }
-  return auth.currentUser;
-}
diff --git a/src/firebase/firestore.ts b/src/firebase/firestore.ts
deleted file mode 100644
index 374c004..0000000
--- a/src/firebase/firestore.ts
+++ /dev/null
@@ -1,20 +0,0 @@
-// Copyright 2019 Daniel Erat and Niniane Wang. All rights reserved.
-// Use of this source code is governed by a BSD-style license that can be
-// found in the LICENSE file.
-
-// This file exposes Cloud-Firestore-related functionality from Firebase.
-
-import firebase from 'firebase/app';
-import 'firebase/firestore';
-import './init';
-
-export const db = firebase.firestore();
-
-// See https://firebase.google.com/docs/firestore/manage-data/enable-offline.
-db.enablePersistence().catch(function(err) {
-  if (err.code == 'failed-precondition') {
-    console.log('Firestore persistence unavailable (multiple tabs open)');
-  } else if (err.code == 'unimplemented') {
-    console.log('Firestore persistence unsupported by browser');
-  }
-});
diff --git a/src/firebase/functions.ts b/src/firebase/functions.ts
deleted file mode 100644
index 4ebb9cd..0000000
--- a/src/firebase/functions.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-// Copyright 2019 Daniel Erat and Niniane Wang. All rights reserved.
-// Use of this source code is governed by a BSD-style license that can be
-// found in the LICENSE file.
-
-// This file exposes Cloud-Function-related functionality from Firebase.
-
-import firebase from 'firebase/app';
-import 'firebase/functions';
-import './init';
-
-export const functions = firebase.functions();
diff --git a/src/firebase/index.ts b/src/firebase/index.ts
new file mode 100644
index 0000000..a8622f5
--- /dev/null
+++ b/src/firebase/index.ts
@@ -0,0 +1,65 @@
+// Copyright 2019 Daniel Erat and Niniane Wang. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+// This file exports methods that can be used to load different parts of
+// Firebase asynchronously.
+
+// Loads the core Firebase library asynchronously.
+// Outside code should only call this if it needs access to Firebase's weird
+// constant values, e.g. firebase.auth.GoogleAuthProvider or
+// firebase.firestore.FieldValue.Delete().
+export function getFirebase() {
+  return import(/* webpackChunkName: "firebase-app" */ 'firebase/app');
+}
+
+// Loads Firebase auth asynchronously.
+export function getAuth(): Promise<firebase.auth.Auth> {
+  return Promise.all([
+    import(/* webpackChunkName: "firebase-init" */ './init'),
+    import(/* webpackChunkName: "firebase-auth" */ 'firebase/auth'),
+  ]).then(([init, _]) => init.app.auth());
+}
+
+// Tracks whether first-time Firestore setup has been performed.
+let initializedFirestore = false;
+
+// Loads Cloud Firestore asynchronously.
+export function getFirestore(): Promise<firebase.firestore.Firestore> {
+  return Promise.all([
+    import(/* webpackChunkName: "firebase-init" */ './init'),
+    import(/* webpackChunkName: "firebase-firestore" */ 'firebase/firestore'),
+  ]).then(([init, _]) => {
+    if (!initializedFirestore) {
+      // Enable persistence the first time the module is loaded:
+      // https://firebase.google.com/docs/firestore/manage-data/enable-offline
+      init.app
+        .firestore()
+        .enablePersistence()
+        .catch(err => {
+          import('@/log').then(log => {
+            // 'failed-precondition' means that multiple tabs are open.
+            // 'unimplemented' means a lack of browser support.
+            log.logError('firestore_persistence_failed', err);
+          });
+        });
+      initializedFirestore = true;
+    }
+
+    return init.app.firestore();
+  });
+}
+
+// Loads Cloud Functions asynchronously.
+export function getFunctions(): Promise<firebase.functions.Functions> {
+  return Promise.all([
+    import(/* webpackChunkName: "firebase-init" */ './init'),
+    import(/* webpackChunkName: "firebase-functions" */ 'firebase/functions'),
+  ]).then(([init, _]) => init.app.functions());
+}
+
+// Loads FirebaseUI asynchronously. Note that this isn't part of the core
+// Firebase library.
+export function getFirebaseUI() {
+  return import(/* webpackChunkName: "firebaseui" */ 'firebaseui');
+}
diff --git a/src/firebase/init.ts b/src/firebase/init.ts
index d41eef2..542fb29 100644
--- a/src/firebase/init.ts
+++ b/src/firebase/init.ts
@@ -2,12 +2,11 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-// This file initializes Firebase. It is imported for its side effects by other
-// files in this directory.
+// This file initializes the Firebase app.
 
 import firebase from 'firebase/app';
 
-firebase.initializeApp({
+export const app = firebase.initializeApp({
   apiKey: process.env.VUE_APP_FIREBASE_API_KEY,
   authDomain: process.env.VUE_APP_FIREBASE_AUTH_DOMAIN,
   databaseURL: process.env.VUE_APP_FIREBASE_DATABASE_URL,
diff --git a/src/firebase/mock.ts b/src/firebase/mock.ts
index c407b22..8ed1fd7 100644
--- a/src/firebase/mock.ts
+++ b/src/firebase/mock.ts
@@ -258,12 +258,20 @@ const mockDeleteSentinel = {};
 
 jest.mock('firebase');
 jest.mock('firebase/app', () => {
-  const obj = {
-    initializeApp: () => {},
+  // This implementation is gross, since we'll return a new object each time
+  // e.g. firebase.firestore() is called. I think we can get away with it for
+  // now since all of these are just wrappers around groups of methods, though.
+  const app = {
+    initializeApp: () => app,
     auth: () => ({
       get currentUser() {
         return MockFirebase.currentUser;
       },
+      onAuthStateChanged: (observer: any) => {
+        new Promise(() => {
+          observer(MockFirebase.currentUser);
+        });
+      },
     }),
     firestore: () => ({
       batch: () => new MockWriteBatch(),
@@ -272,11 +280,13 @@ jest.mock('firebase/app', () => {
       enablePersistence: () => new Promise(resolve => resolve()),
     }),
   };
-  // Also set weird sentinel values that live on the firestore method.
-  (obj.firestore as any).FieldValue = {
+
+  // Also set weird sentinel value that lives on the firestore method.
+  (app.firestore as any).FieldValue = {
     delete: () => mockDeleteSentinel,
   };
-  return obj;
+
+  return app;
 });
 
 // TODO: Is this actually necessary? These modules are imported for their side
diff --git a/src/log/index.ts b/src/log/index.ts
index c162ed4..57d9065 100644
--- a/src/log/index.ts
+++ b/src/log/index.ts
@@ -3,6 +3,7 @@
 // found in the LICENSE file.
 
 import { Logger, LogFunc } from './logger';
+import { getAuth, getFunctions } from '@/firebase';
 
 enum LogDest {
   STACKDRIVER,
@@ -20,11 +21,9 @@ let devLogDest = LogDest.NONE;
 // Returns an appropriate function to pass to the default Logger.
 function getLogFunc(): LogFunc | Promise<LogFunc> {
   if (isProd || (isDev && devLogDest == LogDest.STACKDRIVER)) {
-    // Import the module asynchronously and return a promise so that importing
-    // this module doesn't require synchronously loading bulky Firebase code.
-    return import('@/firebase/functions').then(fn =>
-      fn.functions.httpsCallable('Log')
-    );
+    // Return a promise so that importing this module doesn't require
+    // synchronously loading bulky Firebase code.
+    return getFunctions().then(functions => functions.httpsCallable('Log'));
   }
   if (isDev && devLogDest == LogDest.CONSOLE) {
     return (data?: any) => {
@@ -40,11 +39,9 @@ const defaultLogger = new Logger('log', getLogFunc());
 // Helper function that sends a log message to Stackdriver.
 // See the Logger class's log method for more details.
 function log(severity: string, code: string, payload: Record<string, any>) {
-  // Import the module asynchronously so that importing this module doesn't
-  // require synchronously loading bulky Firebase code.
-  import('@/firebase/auth')
+  getAuth()
     .then(auth => {
-      const user = auth.getUser();
+      const user = auth.currentUser;
       if (!user) {
         defaultLogger.log(severity, code, payload);
         return;
diff --git a/src/main.ts b/src/main.ts
index 1ed32b5..171c60d 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -2,8 +2,8 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-import { auth } from '@/firebase/auth';
 import { logError } from '@/log';
+import { getAuth } from '@/firebase';
 
 const isTestEnv = process.env.NODE_ENV == 'test';
 
@@ -68,12 +68,14 @@ import router from '@/router';
 // authenticated or not. Otherwise, router.beforeEach may end up trying to
 // inspect Firebase's auth state before it's been initialized.
 let app: Vue | null = null;
-auth.onAuthStateChanged(() => {
-  if (!app) {
-    app = new Vue({
-      router,
-      i18n,
-      render: h => h(App),
-    }).$mount('#app');
-  }
+getAuth().then(auth => {
+  auth.onAuthStateChanged(() => {
+    if (!app) {
+      app = new Vue({
+        router,
+        i18n,
+        render: h => h(App),
+      }).$mount('#app');
+    }
+  });
 });
diff --git a/src/mixins/UserLoader.ts b/src/mixins/UserLoader.ts
index 52c6544..b5ffd48 100644
--- a/src/mixins/UserLoader.ts
+++ b/src/mixins/UserLoader.ts
@@ -4,9 +4,8 @@
 
 import Vue from 'vue';
 import { Component, Watch } from 'vue-property-decorator';
-import { getUser } from '@/firebase/auth';
-import { db } from '@/firebase/firestore';
 import { User, Team } from '@/models';
+import { getAuth, getFirebase, getFirestore } from '@/firebase';
 
 type DocumentReference = firebase.firestore.DocumentReference;
 
@@ -37,19 +36,56 @@ export default class UserLoader extends Vue {
   // multiple times: the team document is rebound if the user switches teams.
   userLoadError: Error | null = null;
 
+  // To avoid making components that use this mixin repeatedly asynchronously
+  // import Firebase modules whenever they want to use them, cache the modules
+  // after we've loaded them.
+  //
+  // Note that callers can't call these getters before |userLoaded| has become
+  // true, and specifically can't call them from their own mounted()
+  // implementations -- they need to call getAuth(), getFirestore(), etc.
+  // instead.
+  _firebase: any = null;
+  _auth: firebase.auth.Auth | null = null;
+  _firestore: firebase.firestore.Firestore | null = null;
+
+  get firebase() {
+    if (!this._firebase) throw new Error('Firebase not available yet');
+    return this._firebase;
+  }
+  get auth(): firebase.auth.Auth {
+    if (!this._auth) throw new Error('Auth not available yet');
+    return this._auth;
+  }
+  get firestore(): firebase.firestore.Firestore {
+    if (!this._firestore) throw new Error('Firestore not available yet');
+    return this._firestore;
+  }
+  get user(): firebase.User {
+    if (!this.auth.currentUser) throw new Error('No current user');
+    return this.auth.currentUser;
+  }
+
   mounted() {
-    // Kick things off by loading the user doc.
-    this.userRef = db.collection('users').doc(getUser().uid);
-    this.$bind('userDoc', this.userRef)
-      .then(userSnap => {
-        // If the user isn't on a team, then we're done. Otherwise,
-        // onTeamChanged will handle setting userReady after it loads the team
-        // doc.
-        if (userSnap['team'] === undefined) this.userLoaded = true;
-      })
-      .catch(err => {
-        this.userLoadError = err;
-      });
+    Promise.all([getFirebase(), getAuth(), getFirestore()]).then(
+      ([firebase, auth, firestore]) => {
+        this._firebase = firebase;
+        this._auth = auth;
+        this._firestore = firestore;
+
+        // Kick things off by loading the user doc.
+        this.userRef = firestore.collection('users').doc(this.user.uid);
+        this.$bind('userDoc', this.userRef)
+          .then(userSnap => {
+            // If the user isn't on a team, then we're done. Otherwise,
+            // onTeamChanged will handle setting userReady after it loads the team
+            // doc.
+            if (userSnap['team'] === undefined) this.userLoaded = true;
+          })
+          .catch(err => {
+            this.userLoadError = err;
+          });
+      }
+    );
   }
 
   @Watch('userDoc.team')
@@ -57,7 +93,7 @@ export default class UserLoader extends Vue {
     // When the team ID in the user doc changes, update the reference and
     // snapshot for the team document accordingly.
     if (this.userDoc.team) {
-      this.teamRef = db.collection('teams').doc(this.userDoc.team);
+      this.teamRef = this.firestore.collection('teams').doc(this.userDoc.team);
       this.$bind('teamDoc', this.teamRef)
         .then(() => {
           this.userLoaded = true;
diff --git a/src/router/index.ts b/src/router/index.ts
index f834128..a75beeb 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -6,13 +6,9 @@
 // different views.
 
 import VueRouter from 'vue-router';
+import { getAuth } from '@/firebase';
 
-import { auth } from '@/firebase/auth';
-
-// Lazily load the Login view since it imports firebaseui, which is 200+ KB.
-// See https://alexjover.com/blog/lazy-load-in-vue-using-webpack-s-code-splitting/
-const Login = () => import('@/views/Login.vue');
-
+import Login from '@/views/Login.vue';
 import Profile from '@/views/Profile.vue';
 import Routes from '@/views/Routes.vue';
 import Scoreboard from '@/views/Scoreboard.vue';
@@ -58,17 +54,19 @@ const router = new VueRouter({
 });
 
 router.beforeEach((to, from, next) => {
-  const user = auth.currentUser;
-  const needsAuth = to.matched.some(record => record.meta.auth);
-  const isLoginPage = to.matched.some(record => record.name == 'login');
+  getAuth().then(auth => {
+    const loggedIn = !!auth.currentUser;
+    const needsAuth = to.matched.some(record => record.meta.auth);
+    const isLoginPage = to.matched.some(record => record.name == 'login');
 
-  if (needsAuth && !user) {
-    next('login');
-  } else if (isLoginPage && user) {
-    next('routes');
-  } else {
-    next();
-  }
+    if (needsAuth && !loggedIn) {
+      next('login');
+    } else if (isLoginPage && loggedIn) {
+      next('routes');
+    } else {
+      next();
+    }
+  });
 });
 
 export default router;
diff --git a/src/views/Login.vue b/src/views/Login.vue
index 492e212..b5d6da6 100644
--- a/src/views/Login.vue
+++ b/src/views/Login.vue
@@ -30,14 +30,12 @@
 
 <script lang="ts">
 import { Component, Mixins, Watch } from 'vue-property-decorator';
-import firebase from 'firebase/app';
-import firebaseui from 'firebaseui';
 
-import { auth, getUser } from '@/firebase/auth';
-import { db } from '@/firebase/firestore';
 import { logInfo } from '@/log';
+import { getAuth, getFirebase, getFirebaseUI, getFirestore } from '@/firebase';
+
 import Card from '@/components/Card.vue';
-import Perf from '@/mixins/Perf.ts';
+import Perf from '@/mixins/Perf';
 import Spinner from '@/components/Spinner.vue';
 
 @Component({
@@ -54,42 +52,51 @@ export default class Login extends Mixins(Perf) {
   }
 
   mounted() {
-    // See https://github.com/firebase/firebaseui-web/issues/293.
-    let ui = firebaseui.auth.AuthUI.getInstance();
-    if (!ui) {
-      ui = new firebaseui.auth.AuthUI(auth);
-    }
+    Promise.all([getAuth(), getFirebase(), getFirebaseUI()]).then(
+      ([auth, firebase, firebaseui]) => {
+        // See https://github.com/firebase/firebaseui-web/issues/293.
+        let ui = firebaseui.auth.AuthUI.getInstance();
+        if (!ui) ui = new firebaseui.auth.AuthUI(auth);
+
+        this.pendingRedirect = ui.isPendingRedirect();
 
-    this.pendingRedirect = ui.isPendingRedirect();
-    ui.start('#firebaseui-auth-container', {
-      signInOptions: [
-        firebase.auth.GoogleAuthProvider.PROVIDER_ID,
-        firebase.auth.EmailAuthProvider.PROVIDER_ID,
-      ],
-      callbacks: {
-        signInSuccessWithAuthResult: () => {
-          const user = getUser();
-          const ref = db.collection('users').doc(user.uid);
-          ref.get().then(snap => {
-            if (snap.exists) {
-              // If the user has logged in before, send them to the routes view.
-              this.$router.replace('routes');
-            } else {
-              // Otherwise, create the doc using their default name and send
-              // them to the profile view.
-              logInfo('create_user', { name: user.displayName });
-              ref.set({ name: user.displayName }, { merge: true }).then(() => {
-                this.$router.replace('profile');
+        ui.start('#firebaseui-auth-container', {
+          signInOptions: [
+            firebase.auth.GoogleAuthProvider.PROVIDER_ID,
+            firebase.auth.EmailAuthProvider.PROVIDER_ID,
+          ],
+          callbacks: {
+            signInSuccessWithAuthResult: () => {
+              Promise.all([getAuth(), getFirestore()]).then(([auth, db]) => {
+                const user = auth.currentUser;
+                if (!user) throw new Error('Not logged in');
+                const ref = db.collection('users').doc(user.uid);
+                ref.get().then(snap => {
+                  if (snap.exists) {
+                    // If the user has logged in before, send them to the routes
+                    // view.
+                    this.$router.replace('routes');
+                  } else {
+                    // Otherwise, create the doc using their default name and send
+                    // them to the profile view.
+                    logInfo('create_user', { name: user.displayName });
+                    ref
+                      .set({ name: user.displayName }, { merge: true })
+                      .then(() => {
+                        this.$router.replace('profile');
+                      });
+                  }
+                });
               });
-            }
-          });
 
-          // Don't redirect automatically; we handle that above.
-          return false;
-        },
-        uiShown: () => this.recordEvent('loginShown'),
-      },
-    });
+              // Don't redirect automatically; we handle that above.
+              return false;
+            },
+            uiShown: () => this.recordEvent('loginShown'),
+          },
+        });
+      }
+    );
   }
 
   @Watch('ready')
diff --git a/src/views/Profile.test.ts b/src/views/Profile.test.ts
index 9b7ae6a..f3731db 100644
--- a/src/views/Profile.test.ts
+++ b/src/views/Profile.test.ts
@@ -13,8 +13,8 @@ import i18n from '@/plugins/i18n';
 
 import flushPromises from 'flush-promises';
 
-import { ClimbState, Team, User } from '@/models.ts';
-import { deepCopy } from '@/testutil.ts';
+import { ClimbState, Team, User } from '@/models';
+import { deepCopy } from '@/testutil';
 import Profile from './Profile.vue';
 
 // Hardcoded test data to insert into Firestore.
@@ -53,7 +53,7 @@ const fullTeamDoc: Team = {
 const invitePath = `invites/${teamInvite}`;
 const inviteDoc = { team: teamID };
 
-describe('Routes', () => {
+describe('Profile', () => {
   let wrapper: Wrapper<Vue>;
 
   beforeEach(() => {
@@ -114,6 +114,7 @@ describe('Routes', () => {
 
     const newName = 'Some Other Name';
     field.vm.$emit('change', newName);
+    await flushPromises();
 
     expect(getValue(field)).toEqual(newName);
     const newUserDoc = deepCopy(singleUserDoc);
@@ -125,6 +126,7 @@ describe('Routes', () => {
     await init(joinedUserDoc, nonFullTeamDoc);
     const newName = 'Some Other Name';
     findRef('userNameField').vm.$emit('change', newName);
+    await flushPromises();
 
     // The name should be updated both in the user doc and in the team doc.
     const newUserDoc = deepCopy(joinedUserDoc);
@@ -143,6 +145,7 @@ describe('Routes', () => {
 
     const newName = 'New Team Name';
     field.vm.$emit('change', newName);
+    await flushPromises();
 
     expect(getValue(field)).toEqual(newName);
     const newTeamDoc = deepCopy(nonFullTeamDoc);
@@ -158,6 +161,7 @@ describe('Routes', () => {
     userField.vm.$emit('change', '\r\n Sissy\t Spacek \n  ');
     const teamField = findRef('teamNameField');
     teamField.vm.$emit('change', ' \t Space  \nCadets  \v');
+    await flushPromises();
 
     // Runs of one or more whitespace characters should be replaced by single
     // spaces in both the text fields and the Firestore docs.
diff --git a/src/views/Profile.vue b/src/views/Profile.vue
index 9a39278..3abb3ea 100644
--- a/src/views/Profile.vue
+++ b/src/views/Profile.vue
@@ -257,18 +257,14 @@
 <script lang="ts">
 import { Component, Mixins, Watch } from 'vue-property-decorator';
 
-import firebase from 'firebase/app';
-type DocumentReference = firebase.firestore.DocumentReference;
-
-import { getUser } from '@/firebase/auth';
-import { db } from '@/firebase/firestore';
 import { logInfo, logError } from '@/log';
 import { ClimbState } from '@/models';
+
 import Card from '@/components/Card.vue';
 import DialogCard from '@/components/DialogCard.vue';
-import Perf from '@/mixins/Perf.ts';
+import Perf from '@/mixins/Perf';
 import Spinner from '@/components/Spinner.vue';
-import UserLoader from '@/mixins/UserLoader.ts';
+import UserLoader from '@/mixins/UserLoader';
 
 // Removes excessive/weird whitespace from |name|.
 function cleanName(name: string): string {
@@ -372,10 +368,10 @@ export default class Profile extends Mixins(Perf, UserLoader) {
     new Promise(resolve => {
       logInfo('set_user_name', { name: name });
       if (!this.userRef) throw new Error('No ref to user doc');
-      const batch = db.batch();
+      const batch = this.firestore.batch();
       batch.update(this.userRef, { name: name });
       if (this.teamRef) {
-        const key = 'users.' + getUser().uid + '.name';
+        const key = 'users.' + this.user.uid + '.name';
         batch.update(this.teamRef, { [key]: name });
       }
       resolve(batch.commit());
@@ -420,27 +416,29 @@ export default class Profile extends Mixins(Perf, UserLoader) {
       .toString()
       .slice(2, 2 + this.inviteCodeLength);
 
-    // Generate an ID for a new team document. This works offline.
-    const teamRef = db.collection('teams').doc();
+    logInfo('create_team', { name: this.createTeamName, invite: inviteCode });
 
     new Promise(resolve => {
-      logInfo('create_team', { name: this.createTeamName, invite: inviteCode });
+      // Generate an ID for a new team document. This works offline.
+      const teamRef = this.firestore.collection('teams').doc();
 
       // Perform a single batched write that creates the team document, creates
       // an invite document containing the team ID, and updates the user doc to
       // contain the team ID.
-      const batch = db.batch();
+      const batch = this.firestore.batch();
       batch.set(teamRef, {
         name: this.createTeamName,
         users: {
-          [getUser().uid]: {
+          [this.user.uid]: {
             name: this.userDoc.name,
             climbs: this.userDoc.climbs || {},
           },
         },
         invite: inviteCode,
       });
-      batch.set(db.collection('invites').doc(inviteCode), { team: teamRef.id });
+      batch.set(this.firestore.collection('invites').doc(inviteCode), {
+        team: teamRef.id,
+      });
 
       if (!this.userRef) throw new Error('No ref to user doc');
       batch.update(this.userRef, {
@@ -449,7 +447,7 @@ export default class Profile extends Mixins(Perf, UserLoader) {
         // needing to write to both the team and user doc every time the user
         // completes another climb, and also to prevent needing to let user A
         // write to teammate B's user doc if A reports a climb performed by B.
-        climbs: firebase.firestore.FieldValue.delete(),
+        climbs: this.firebase.firestore.FieldValue.delete(),
       });
       resolve(batch.commit());
     })
@@ -484,11 +482,12 @@ export default class Profile extends Mixins(Perf, UserLoader) {
     logInfo('join_team', { invite: this.joinInviteCode });
 
     // We need to access these throughout the promise chain.
-    let teamRef: DocumentReference | null;
+    let teamRef: firebase.firestore.DocumentReference | null;
     let teamName = '';
 
     // First get the invite doc to find the team ID.
-    db.collection('invites')
+    this.firestore
+      .collection('invites')
       .doc(this.joinInviteCode)
       .get()
       .then(inviteSnap => {
@@ -497,28 +496,30 @@ export default class Profile extends Mixins(Perf, UserLoader) {
         if (!data) throw new Error('Bad invite code');
         const team = data.team;
         if (!team) throw new Error('No team ID in invite');
-        teamRef = db.collection('teams').doc(data.team);
+        teamRef = this.firestore.collection('teams').doc(data.team);
         return teamRef.get();
       })
       .then(teamSnap => {
+        // These checks are required by TypeScript.
         if (!this.userRef) throw new Error('No ref to user doc');
-        if (!teamRef) throw new Error('No ref to team doc'); // required by TS
+        if (!teamRef) throw new Error('No ref to team doc');
+
         if (Object.keys(teamSnap.get('users')).length >= Profile.teamSize) {
           throw new Error('Team is full');
         }
         teamName = teamSnap.get('name');
 
         // Update the team doc and the user doc.
-        const batch = db.batch();
+        const batch = this.firestore.batch();
         batch.update(teamRef, {
-          ['users.' + getUser().uid]: {
+          ['users.' + this.user.uid]: {
             name: this.userDoc.name,
             climbs: this.userDoc.climbs || {},
           },
         });
         batch.update(this.userRef, {
           team: teamRef.id,
-          climbs: firebase.firestore.FieldValue.delete(),
+          climbs: this.firebase.firestore.FieldValue.delete(),
         });
         return batch.commit();
       })
@@ -548,11 +549,11 @@ export default class Profile extends Mixins(Perf, UserLoader) {
     const teamName = this.teamDoc.name;
 
     new Promise(resolve => {
-      if (!this.userRef) throw new Error('No reference to user doc');
-      if (!this.teamRef) throw new Error('No reference to team doc');
+      if (!this.userRef) throw new Error('No user ref');
+      if (!this.teamRef) throw new Error('No team ref');
 
       // Grab the user's climbs from the team doc.
-      const uid = getUser().uid;
+      const uid = this.user.uid;
       let climbs: Record<string, ClimbState> = {};
       const userData = this.teamDoc.users ? this.teamDoc.users[uid] : null;
       if (userData && userData.climbs) {
@@ -561,12 +562,12 @@ export default class Profile extends Mixins(Perf, UserLoader) {
 
       // Perform a batched update that removes the user from the team doc and
       // removes the team from the user doc.
-      const batch = db.batch();
+      const batch = this.firestore.batch();
       batch.update(this.teamRef, {
-        ['users.' + uid]: firebase.firestore.FieldValue.delete(),
+        ['users.' + uid]: this.firebase.firestore.FieldValue.delete(),
       });
       batch.update(this.userRef, {
-        team: firebase.firestore.FieldValue.delete(),
+        team: this.firebase.firestore.FieldValue.delete(),
         // Move the climbs back from the team doc to the user doc.
         climbs: climbs,
       });
diff --git a/src/views/Routes.test.ts b/src/views/Routes.test.ts
index 51d87b5..ba7a944 100644
--- a/src/views/Routes.test.ts
+++ b/src/views/Routes.test.ts
@@ -9,6 +9,8 @@ import Vue from 'vue';
 import Vuetify from 'vuetify';
 Vue.use(Vuetify);
 
+import flushPromises from 'flush-promises';
+
 import {
   ClimbState,
   ClimberInfo,
@@ -17,6 +19,7 @@ import {
   Team,
   User,
 } from '@/models.ts';
+
 import Routes from './Routes.vue';
 import RouteList from '@/components/RouteList.vue';
 
@@ -63,7 +66,7 @@ const teamDoc: Team = {
 describe('Routes', () => {
   let wrapper: Wrapper<Vue>;
 
-  beforeEach(() => {
+  beforeEach(async () => {
     MockFirebase.reset();
     MockFirebase.currentUser = new MockUser(testUID, testName);
     MockFirebase.setDoc('global/sortedData', sortedData);
@@ -71,6 +74,7 @@ describe('Routes', () => {
     MockFirebase.setDoc(`teams/${teamID}`, teamDoc);
 
     wrapper = mount(Routes, { mocks: MockFirebase.mountMocks });
+    await flushPromises();
   });
 
   it('displays all areas', () => {
@@ -96,7 +100,7 @@ describe('Routes', () => {
     );
   });
 
-  it('updates climb states', () => {
+  it('updates climb states', async () => {
     // Simulate the first climber leading the third route and the second climber
     // undoing their lead of the second route.
     const routeLists = wrapper.findAll(RouteList).wrappers;
@@ -108,6 +112,7 @@ describe('Routes', () => {
       'set-climb-state',
       new SetClimbStateEvent(1, 'r2', ClimbState.NOT_CLIMBED)
     );
+    await flushPromises();
 
     const expected = JSON.parse(JSON.stringify(teamDoc));
     expected.users[testUID].climbs.r3 = ClimbState.LEAD;
diff --git a/src/views/Routes.vue b/src/views/Routes.vue
index c28f762..5d839d1 100644
--- a/src/views/Routes.vue
+++ b/src/views/Routes.vue
@@ -24,9 +24,7 @@
 <script lang="ts">
 import { Component, Mixins, Watch } from 'vue-property-decorator';
 
-import firebase from 'firebase/app';
-
-import { db } from '@/firebase/firestore';
+import { getFirestore } from '@/firebase';
 import { logInfo, logError } from '@/log';
 import {
   ClimberInfo,
@@ -34,10 +32,11 @@ import {
   SetClimbStateEvent,
   SortedData,
 } from '@/models';
-import Perf from '@/mixins/Perf.ts';
+
+import Perf from '@/mixins/Perf';
 import RouteList from '@/components/RouteList.vue';
 import Spinner from '@/components/Spinner.vue';
-import UserLoader from '@/mixins/UserLoader.ts';
+import UserLoader from '@/mixins/UserLoader';
 
 @Component({
   components: { RouteList, Spinner },
@@ -73,22 +72,28 @@ export default class Routes extends Mixins(Perf, UserLoader) {
   // Updates team document in response to 'set-climb-state' events from RouteList
   // component.
   onSetClimbState(ev: SetClimbStateEvent) {
-    if (!this.teamRef) throw new Error('No ref to team doc');
     if (ev.index >= this.teamMembers.length) {
       throw new Error('Invalid team member index ' + ev.index);
     }
+    const uid = this.teamMembers[ev.index];
+
+    logInfo('set_climb_state', {
+      user: uid,
+      route: ev.route,
+      state: ev.state,
+    });
 
     // Just delete the map entry instead of recording a not-climbed state.
     const value =
       ev.state == ClimbState.NOT_CLIMBED
-        ? firebase.firestore.FieldValue.delete()
+        ? this.firebase.firestore.FieldValue.delete()
         : ev.state;
 
-    const uid = this.teamMembers[ev.index];
-
-    logInfo('set_climb_state', { user: uid, route: ev.route, state: ev.state });
+    if (!this.teamRef) throw new Error('No ref to team doc');
     this.teamRef
-      .update({ ['users.' + uid + '.climbs.' + ev.route]: value })
+      .update({
+        ['users.' + uid + '.climbs.' + ev.route]: value,
+      })
       .catch(err => {
         this.$emit('error-msg', `Failed setting climb state: ${err}`);
         logError('set_climb_state_failed', err);
@@ -111,16 +116,19 @@ export default class Routes extends Mixins(Perf, UserLoader) {
   }
 
   mounted() {
-    this.$bind('sortedData', db.collection('global').doc('sortedData')).then(
-      () => {
-        this.loadedSortedData = true;
-        this.recordEvent('loadedSortedData');
-      },
-      err => {
-        this.$emit('error-msg', `Failed loading route data: {err}`);
-        logError('routes_load_sorted_data_failed', err);
-      }
-    );
+    // We can't use this.firestore yet.
+    getFirestore().then(db => {
+      this.$bind('sortedData', db.collection('global').doc('sortedData')).then(
+        () => {
+          this.loadedSortedData = true;
+          this.recordEvent('loadedSortedData');
+        },
+        err => {
+          this.$emit('error-msg', `Failed loading route data: {err}`);
+          logError('routes_load_sorted_data_failed', err);
+        }
+      );
+    });
   }
 }
 </script>
diff --git a/src/views/Statistics.test.ts b/src/views/Statistics.test.ts
index 71940bc..1f93838 100644
--- a/src/views/Statistics.test.ts
+++ b/src/views/Statistics.test.ts
@@ -9,14 +9,17 @@ import Vue from 'vue';
 import Vuetify from 'vuetify';
 Vue.use(Vuetify);
 
-import { ClimbState, Statistic } from '@/models.ts';
+import flushPromises from 'flush-promises';
+
+import { ClimbState, Statistic } from '@/models';
+
 import Statistics from './Statistics.vue';
 import StatisticsList from '@/components/StatisticsList.vue';
 
 describe('Statistics', () => {
   let wrapper: Wrapper<Vue>;
 
-  beforeEach(() => {
+  beforeEach(async () => {
     MockFirebase.reset();
 
     const uid = 'test-user';
@@ -47,6 +50,7 @@ describe('Statistics', () => {
     wrapper = shallowMount(Statistics, {
       mocks: MockFirebase.mountMocks,
     });
+    await flushPromises();
   });
 
   it('displays statistics for a team', () => {
diff --git a/src/views/Statistics.vue b/src/views/Statistics.vue
index 1f2d488..2e72abc 100644
--- a/src/views/Statistics.vue
+++ b/src/views/Statistics.vue
@@ -40,15 +40,16 @@
 
 <script lang="ts">
 import { Component, Mixins, Watch } from 'vue-property-decorator';
-import { getUser } from '@/firebase/auth';
-import { db } from '@/firebase/firestore';
+
+import { getFirestore } from '@/firebase';
 import { logError } from '@/log';
 import { ClimbState, Statistic, IndexedData } from '@/models';
+
 import Card from '@/components/Card.vue';
-import Perf from '@/mixins/Perf.ts';
+import Perf from '@/mixins/Perf';
 import Spinner from '@/components/Spinner.vue';
 import StatisticsList from '@/components/StatisticsList.vue';
-import UserLoader from '@/mixins/UserLoader.ts';
+import UserLoader from '@/mixins/UserLoader';
 
 interface StatisticsCard {
   name: string;
@@ -128,11 +129,10 @@ export default class Statistics extends Mixins(Perf, UserLoader) {
     // climbs, and also fill in team stats.
     if (this.teamDoc && this.teamDoc.users) {
       const users = this.teamDoc.users;
-      const userId = getUser().uid;
       const userClimbs = Object.keys(users).map(uid => users[uid].climbs);
 
       this.userCards = this.computeStats(
-        users[userId].climbs ? [users[userId].climbs] : []
+        users[this.user.uid].climbs ? [users[this.user.uid].climbs] : []
       );
 
       this.teamCards = this.computeStats(userClimbs);
@@ -155,7 +155,10 @@ export default class Statistics extends Mixins(Perf, UserLoader) {
   }
 
   mounted() {
-    this.$bind('indexedData', db.collection('global').doc('indexedData'))
+    getFirestore()
+      .then(db =>
+        this.$bind('indexedData', db.collection('global').doc('indexedData'))
+      )
       .then(() => {
         this.recordEvent('loadedIndexedData'), (this.indexedDataLoaded = true);
         this.updateItems();