auth: display the auth page for unauthenticated API responses

Author: jamaljsr

app/src/App.tsx

@@ -14,8 +14,8 @@ const App = () => {
       <ThemeProvider>
         <Layout>
           <Pages />
-          <AlertContainer />
         </Layout>
+        <AlertContainer />
       </ThemeProvider>
     </StoreProvider>
   );

app/src/api/grpc.ts

@@ -3,6 +3,7 @@ import { ProtobufMessage } from '@improbable-eng/grpc-web/dist/typings/message';
 import { Metadata } from '@improbable-eng/grpc-web/dist/typings/metadata';
 import { UnaryMethodDefinition } from '@improbable-eng/grpc-web/dist/typings/service';
 import { DEV_HOST } from 'config';
+import { AuthenticationError } from 'util/errors';
 import { grpcLog as log } from 'util/log';
 
 class GrpcClient {
@@ -32,6 +33,8 @@ class GrpcClient {
           if (status === grpc.Code.OK && message) {
             log.debug(' - message', message.toObject());
             resolve(message as TRes);
+          } else if (status === grpc.Code.Unauthenticated) {
+            reject(new AuthenticationError(`${statusMessage}`));
           } else {
             reject(new Error(`${status}: ${statusMessage}`));
           }

app/src/i18n/locales/en-US.json

@@ -63,5 +63,7 @@
   "cmps.settings.GeneralSettings.balancesValue": "Optimize for {{mode}}",
   "cmps.settings.GeneralSettings.pageTitle": "Settings",
   "cmps.settings.UnitSettings.pageTitle": "Bitcoin Unit",
-  "cmps.settings.UnitSettings.backText": "Settings"
+  "cmps.settings.UnitSettings.backText": "Settings",
+  "stores.uiStore.authErrorTitle": "Your session has expired",
+  "stores.uiStore.authErrorMsg": "Please enter you password to continue"
 }

app/src/store/store.ts

@@ -1,4 +1,4 @@
-import { observable, when } from 'mobx';
+import { autorun, observable } from 'mobx';
 import { IS_DEV, IS_TEST } from 'config';
 import AppStorage from 'util/appStorage';
 import CsvExporter from 'util/csv';
@@ -70,19 +70,23 @@ export class Store {
     await this.authStore.init();
     this.initialized = true;
 
-    // go to the Loop page when the user is authenticated. it can be from
-    // entering a password or from loading the credentials from storage
-    when(
-      () => this.authStore.authenticated,
-      async () => {
+    // this function will automatically run whenever the authenticated
+    // flag is changed
+    autorun(async () => {
+      if (this.authStore.authenticated) {
+        // go to the Loop page when the user is authenticated. it can be from
+        // entering a password or from loading the credentials from storage
         this.uiStore.goToLoop();
         // also fetch all the data we need
         await this.nodeStore.fetchInfo();
         await this.channelStore.fetchChannels();
         await this.swapStore.fetchSwaps();
         await this.nodeStore.fetchBalances();
-      },
-    );
+      } else {
+        // go to auth page if we are not authenticated
+        this.uiStore.gotoAuth();
+      }
+    });
   }
 }
 

app/src/store/stores/authStore.ts

@@ -1,4 +1,4 @@
-import { action, observable, toJS } from 'mobx';
+import { action, observable } from 'mobx';
 import { Store } from 'store';
 
 export default class AuthStore {
@@ -54,7 +54,8 @@ export default class AuthStore {
   async validate() {
     // test the credentials by making an API call to getInfo
     await this._store.api.lnd.getInfo();
-    this._store.log.info('authentication successful', toJS(this));
+    this._store.log.info('authentication successful');
+    // setting this to true will automatically show the Loop page
     this.authenticated = true;
   }
 

app/src/store/stores/buildSwapStore.ts

@@ -281,9 +281,8 @@ class BuildSwapStore {
         }
       });
     } catch (error) {
-      runInAction('getTermsError', () => {
-        this._store.uiStore.notify(error.message, 'Unable to fetch Loop Terms');
-      });
+      this._store.uiStore.handleError(error, 'Unable to fetch Loop Terms');
+      this.goToPrevStep();
     }
   }
 
@@ -310,9 +309,8 @@ class BuildSwapStore {
         this._store.log.info('updated buildSwapStore.quote', toJS(this.quote));
       });
     } catch (error) {
-      runInAction('getQuoteError', () => {
-        this._store.uiStore.notify(error.message, 'Unable to fetch Quote');
-      });
+      this._store.uiStore.handleError(error, 'Unable to fetch Quote');
+      this.goToPrevStep();
     }
   }
 
@@ -350,10 +348,8 @@ class BuildSwapStore {
           this._store.swapStore.fetchSwaps();
         });
       } catch (error) {
-        runInAction('requestSwapError', () => {
-          this._store.uiStore.notify(error.message, `Unable to Perform ${direction}`);
-          this.goToPrevStep();
-        });
+        this._store.uiStore.handleError(error, `Unable to Perform ${direction}`);
+        this.goToPrevStep();
       }
     }, delay);
   }

app/src/store/stores/channelStore.ts

@@ -79,9 +79,7 @@ export default class ChannelStore {
         this._store.log.info('updated channelStore.channels', toJS(this.channels));
       });
     } catch (error) {
-      runInAction('fetchChannelsError', () => {
-        this._store.uiStore.notify(error.message, 'Unable to fetch Channels');
-      });
+      this._store.uiStore.handleError(error, 'Unable to fetch Channels');
     }
   }
 

app/src/store/stores/nodeStore.ts

@@ -42,9 +42,7 @@ export default class NodeStore {
         this._store.log.info('updated nodeStore info', toJS(this));
       });
     } catch (error) {
-      runInAction('getInfoError', () => {
-        this._store.uiStore.notify(error.message, 'Unable to fetch node info');
-      });
+      this._store.uiStore.handleError(error, 'Unable to fetch node info');
     }
   }
 
@@ -63,9 +61,7 @@ export default class NodeStore {
         this._store.log.info('updated nodeStore.wallet', toJS(this.wallet));
       });
     } catch (error) {
-      runInAction('fetchBalancesError', () => {
-        this._store.uiStore.notify(error.message, 'Unable to fetch balances');
-      });
+      this._store.uiStore.handleError(error, 'Unable to fetch balances');
     }
   }
 }

app/src/store/stores/swapStore.ts

@@ -106,9 +106,8 @@ export default class SwapStore {
         this._store.log.info('updated swapStore.swaps', toJS(this.swaps));
       });
     } catch (error) {
-      runInAction('fetchSwapsError', () => {
-        this._store.uiStore.notify(error.message, 'Unable to fetch Swaps');
-      });
+      this._store.uiStore.handleError(error, 'Unable to fetch Swaps');
+      if (this.pollingInterval) this.stopPolling();
     }
   }
 

app/src/store/stores/uiStore.ts

@@ -1,7 +1,11 @@
 import { action, observable, toJS } from 'mobx';
 import { Alert } from 'types/state';
+import { AuthenticationError } from 'util/errors';
+import { prefixTranslation } from 'util/translate';
 import { Store } from 'store';
 
+const { l } = prefixTranslation('stores.uiStore');
+
 type PageName = 'auth' | 'loop' | 'history' | 'settings';
 
 type SettingName = 'general' | 'unit' | 'balance';
@@ -22,6 +26,13 @@ export default class UiStore {
     this._store = store;
   }
 
+  /** Change to the Auth page */
+  @action.bound
+  gotoAuth() {
+    this.page = 'auth';
+    this._store.log.info('Go to the Auth page');
+  }
+
   /** Change to the Loop page */
   @action.bound
   goToLoop() {
@@ -72,4 +83,15 @@ export default class UiStore {
     this.alerts.delete(id);
     this._store.log.info('Cleared alert', id, toJS(this.alerts));
   }
+
+  /** handle errors by showing a notification and/or the auth screen */
+  handleError(error: Error, title?: string) {
+    if (error instanceof AuthenticationError) {
+      // this will automatically redirect to the auth page
+      this._store.authStore.authenticated = false;
+      this.notify(l('authErrorMsg'), l('authErrorTitle'));
+    } else {
+      this.notify(error.message, title);
+    }
+  }
 }