Explicitly load credentials from Firebase (#1611)

* Log uncaught errors from sagas to the console

* Explicitly load credentials from Firebase

When Popcode first integrated Firebase, the Firebase client stored
provider credentials and exposed them in the `onAuthStateChange`
callback. However, that changed a long time ago, obliging us to store
provider credentials in the Firebase database.

At the time, I decided to keep the interface of the Firebase client the
same, keeping the storage and retrieval of credentials abstracted from
the caller (in this case, the saga). Ultimately, this was a
path-dependent outcome, and there’s no reason the saga shouldn’t just
handle that task itself.

With an eye toward both becoming more robust to mismatches between
stored credential information and actual linked accounts; and to loading
and storing more information about the user’s provider accounts
(specifically the provider profiles), move handling of credential
persistence into the saga.

While in general we’re able to handle this reasonably elegantly in
the saga, there is one wrinkle, which is that the channel for auth
state changes fires regardless of whether the auth state change is
due to an explicit user action or an implicit change (e.g. the user
logged in/out in a different tab). Oddly, the Firebase client fires the
auth state change handler _before_ resolving the promise returned by
the call to log in.

So, when the user logs in explicitly, we now wait for the promise to
resolve (which gives us a credential we want to store and use), and
in parallel we pull the next auth state change off the channel, simply
discarding it, since it’s redundant with the login promise but contains
less information.

* Disable “ghost mode” for BrowserStack

Also set a couple of other useful options

Author: outoftime

gulpfile.js

@@ -141,7 +141,10 @@ gulp.task('browserSync', ['static'], () => {
   const compiler = webpack(webpackConfiguration(process.env.NODE_ENV));
   compiler.plugin('invalid', browserSync.reload);
   browserSync.init({
+    ghostMode: false,
+    notify: false,
     open: !isDocker(),
+    reloadOnRestart: true,
     server: {
       baseDir: distDir,
       middleware: [

src/channels/index.js

@@ -1,3 +1 @@
-import loginState from './loginState';
-
-export {loginState};
+export {default as makeLoginState} from './makeLoginState';

src/channels/loginState.js

@@ -0,0 +1,11 @@
+import {eventChannel} from 'redux-saga';
+
+import {onAuthStateChanged} from '../clients/firebase';
+
+export default function makeLoginState() {
+  return eventChannel(
+    emitter => onAuthStateChanged(({user}) => {
+      emitter({user});
+    }),
+  );
+}

src/channels/makeLoginState.js

@@ -1,10 +1,8 @@
 import Cookies from 'js-cookie';
 import get from 'lodash-es/get';
 import isEmpty from 'lodash-es/isEmpty';
-import isEqual from 'lodash-es/isEqual';
 import isNil from 'lodash-es/isNil';
 import isNull from 'lodash-es/isNull';
-import map from 'lodash-es/map';
 import omit from 'lodash-es/omit';
 import values from 'lodash-es/values';
 import uuid from 'uuid/v4';
@@ -60,14 +58,9 @@ function buildFirebase(appName = undefined) {
 }
 
 export function onAuthStateChanged(listener) {
-  const unsubscribe = auth.onAuthStateChanged(async(user) => {
-    if (isNull(user)) {
-      listener({user: null});
-    } else {
-      listener(await decorateUserWithCredentials(user));
-    }
+  return auth.onAuthStateChanged((user) => {
+    listener({user});
   });
-  return unsubscribe;
 }
 
 async function workspace(uid) {
@@ -107,22 +100,11 @@ export async function saveProject(uid, project) {
     setWithPriority(project, -Date.now());
 }
 
-async function decorateUserWithCredentials(user) {
+export async function loadCredentialsForUser(uid) {
   const database = await loadDatabase();
   const credentialEvent =
-    await database.ref(`authTokens/${user.uid}`).once('value');
-  const credentials = values(credentialEvent.val() || {});
-  if (
-    !isEqual(
-      map(credentials, 'providerId').sort(),
-      map(user.providerData, 'providerId').sort(),
-    )
-  ) {
-    await auth.signOut();
-    return {user: null};
-  }
-
-  return {user, credentials};
+    await database.ref(`authTokens/${uid}`).once('value');
+  return values(credentialEvent.val());
 }
 
 export async function signIn(provider) {
@@ -135,7 +117,6 @@ export async function signIn(provider) {
     } else if (provider === 'google') {
       userCredential = await signInWithGoogle();
     }
-    await saveUserCredential(userCredential);
     return userCredential;
   } finally {
     setTimeout(() => {
@@ -145,10 +126,9 @@ export async function signIn(provider) {
 }
 
 export async function linkGithub() {
-  const userCredential =
+  const {credential} =
     await auth.currentUser.linkWithPopup(githubAuthProvider);
-  await saveUserCredential(userCredential);
-  return userCredential.credential;
+  return credential;
 }
 
 export async function migrateAccount(inboundAccountCredential) {
@@ -174,7 +154,7 @@ export async function migrateAccount(inboundAccountCredential) {
 async function migrateCredential(credential, {auth: inboundAccountAuth}) {
   await inboundAccountAuth.currentUser.unlink(credential.providerId);
   await auth.currentUser.linkAndRetrieveDataWithCredential(credential);
-  await saveUserCredential({user: auth.currentUser, credential});
+  await saveCredentialForCurrentUser(credential);
 }
 
 async function migrateProjects({
@@ -235,10 +215,18 @@ export async function signOut() {
   return auth.signOut();
 }
 
-async function saveUserCredential({
+export async function saveUserCredential({
   user: {uid},
   credential,
 }) {
+  await saveCredentialForUser(uid, credential);
+}
+
+export async function saveCredentialForCurrentUser(credential) {
+  await saveCredentialForUser(auth.currentUser.uid, credential);
+}
+
+async function saveCredentialForUser(uid, credential) {
   const database = await loadDatabase();
   await database.
     ref(`authTokens/${providerPath(uid, credential.providerId)}`).

src/clients/firebase.js

@@ -19,6 +19,10 @@ const compose = get(
 export default function createApplicationStore() {
   const sagaMiddleware = createSagaMiddleware({
     onError(error) {
+      if (get(console, 'error')) {
+        // eslint-disable-next-line no-console
+        console.error(error);
+      }
       bugsnagClient.notify(error);
     },
   });

src/createApplicationStore.js

@@ -1,4 +1,6 @@
 import {all} from 'redux-saga/effects';
+
+import manageUserState from './manageUserState';
 import watchErrors from './errors';
 import watchProjects from './projects';
 import watchUi from './ui';
@@ -8,6 +10,7 @@ import watchCompiledProjects from './compiledProjects';
 
 export default function* rootSaga() {
   yield all([
+    manageUserState(),
     watchErrors(),
     watchProjects(),
     watchUi(),

src/sagas/index.js

@@ -0,0 +1,134 @@
+import {all, call, fork, put, race, take} from 'redux-saga/effects';
+import isEmpty from 'lodash-es/isEmpty';
+import isError from 'lodash-es/isError';
+import isNil from 'lodash-es/isNil';
+import isString from 'lodash-es/isString';
+import reject from 'lodash-es/reject';
+
+import {bugsnagClient} from '../util/bugsnag';
+import {
+  getSessionUid,
+  loadCredentialsForUser,
+  saveUserCredential,
+  signIn,
+  signOut,
+  startSessionHeartbeat,
+} from '../clients/firebase';
+import {makeLoginState} from '../channels';
+import {notificationTriggered} from '../actions/ui';
+import {userAuthenticated, userLoggedOut} from '../actions/user';
+
+export function* handleInitialAuth(user) {
+  if (isNil(user)) {
+    yield put(userLoggedOut());
+    return;
+  }
+
+  const sessionUid = yield call(getSessionUid);
+  if (user.uid !== sessionUid) {
+    yield call(signOut);
+    return;
+  }
+
+  const credentials = yield call(loadCredentialsForUser, user.uid);
+
+  if (isEmpty(credentials)) {
+    yield call(signOut);
+    return;
+  }
+
+  yield put(userAuthenticated(user, credentials));
+}
+
+export function* handleAuthChange(user, {newCredential} = {}) {
+  if (isNil(user)) {
+    yield put(userLoggedOut());
+  } else {
+    if (!isNil(newCredential)) {
+      yield fork(saveUserCredential, {user, credential: newCredential});
+    }
+    let credentials;
+
+    const storedCredentials = yield call(loadCredentialsForUser, user.uid);
+    if (isNil(newCredential)) {
+      credentials = storedCredentials;
+    } else {
+      credentials = reject(
+        storedCredentials,
+        {providerId: newCredential.providerId},
+      );
+      credentials.push(newCredential);
+    }
+
+    yield put(userAuthenticated(user, credentials));
+  }
+}
+export function* handleAuthError(e) {
+  if ('message' in e && e.message === 'popup_closed_by_user') {
+    yield put(notificationTriggered('user-cancelled-auth'));
+    return;
+  }
+
+  switch (e.code) {
+    case 'auth/popup-closed-by-user':
+      yield put(notificationTriggered('user-cancelled-auth'));
+      break;
+
+    case 'auth/network-request-failed':
+      yield put(notificationTriggered('auth-network-error'));
+      break;
+
+    case 'auth/cancelled-popup-request':
+      break;
+
+    case 'auth/web-storage-unsupported':
+    case 'auth/operation-not-supported-in-this-environment':
+      yield put(
+        notificationTriggered('auth-third-party-cookies-disabled'),
+      );
+      break;
+
+    case 'access_denied':
+    case 'auth/internal-error':
+      yield put(notificationTriggered('auth-error'));
+      break;
+
+    default:
+      yield put(notificationTriggered('auth-error'));
+
+      if (isError(e)) {
+        yield call([bugsnagClient, 'notify'], e, {metaData: {code: e.code}});
+      } else if (isString(e)) {
+        yield call([bugsnagClient, 'notify'], new Error(e));
+      }
+      break;
+  }
+}
+
+export default function* manageUserState(loginState = makeLoginState()) {
+  yield fork(startSessionHeartbeat);
+
+  const {user: initialUser} = yield take(loginState);
+  yield call(handleInitialAuth, initialUser);
+
+  while (true) {
+    const {loginStateChange, logInAction} = yield race({
+      logInAction: take('LOG_IN'),
+      loginStateChange: take(loginState),
+    });
+
+    if (isNil(logInAction)) {
+      yield call(handleAuthChange, loginStateChange.user);
+    } else {
+      try {
+        const [{user, credential}] = yield all([
+          call(signIn, logInAction.payload.provider),
+          take(loginState),
+        ]);
+        yield call(handleAuthChange, user, {newCredential: credential});
+      } catch (e) {
+        yield handleAuthError(e);
+      }
+    }
+  }
+}