auth: add authStore and send credentials to APIs

Author: jamaljsr

app/src/__stories__/StoryWrapper.tsx

@@ -26,6 +26,8 @@ class StoryAppStorage {
     unit: Unit.sats,
     balanceMode: BalanceMode.receive,
   });
+  setSession = () => undefined;
+  getSession = () => '';
 }
 
 // Create a store that pulls data from the mock GRPC and doesn't use

app/src/api/auth.ts

@@ -0,0 +1,26 @@
+/**
+ * A shared base class containing logic for storing the API credentials
+ */
+class AuthenticatedApi {
+  private _credentials = '';
+
+  /**
+   * Returns a metadata object containing authorization info that was
+   * previous set if any
+   */
+  protected get _meta() {
+    return this._credentials
+      ? { authorization: `Basic ${this._credentials}` }
+      : undefined;
+  }
+
+  /**
+   * Sets the credentials to use for all API requests
+   * @param credentials the base64 encoded password
+   */
+  setCredentials(credentials: string) {
+    this._credentials = credentials;
+  }
+}
+
+export default AuthenticatedApi;

app/src/api/lnd.ts

@@ -1,15 +1,16 @@
 import * as LND from 'types/generated/lnd_pb';
 import { Lightning } from 'types/generated/lnd_pb_service';
+import AuthenticatedApi from './auth';
 import GrpcClient from './grpc';
 
 /**
  * An API wrapper to communicate with the LND node via GRPC
  */
-class LndApi {
-
+class LndApi extends AuthenticatedApi {
   private _grpc: GrpcClient;
 
   constructor(grpc: GrpcClient) {
+    super();
     this._grpc = grpc;
   }
 
@@ -18,7 +19,7 @@ class LndApi {
    */
   async getInfo(): Promise<LND.GetInfoResponse.AsObject> {
     const req = new LND.GetInfoRequest();
-    const res = await this._grpc.request(Lightning.GetInfo, req);
+    const res = await this._grpc.request(Lightning.GetInfo, req, this._meta);
     return res.toObject();
   }
 
@@ -27,7 +28,7 @@ class LndApi {
    */
   async channelBalance(): Promise<LND.ChannelBalanceResponse.AsObject> {
     const req = new LND.ChannelBalanceRequest();
-    const res = await this._grpc.request(Lightning.ChannelBalance, req);
+    const res = await this._grpc.request(Lightning.ChannelBalance, req, this._meta);
     return res.toObject();
   }
 
@@ -36,7 +37,7 @@ class LndApi {
    */
   async walletBalance(): Promise<LND.WalletBalanceResponse.AsObject> {
     const req = new LND.WalletBalanceRequest();
-    const res = await this._grpc.request(Lightning.WalletBalance, req);
+    const res = await this._grpc.request(Lightning.WalletBalance, req, this._meta);
     return res.toObject();
   }
 
@@ -45,7 +46,7 @@ class LndApi {
    */
   async listChannels(): Promise<LND.ListChannelsResponse.AsObject> {
     const req = new LND.ListChannelsRequest();
-    const res = await this._grpc.request(Lightning.ListChannels, req);
+    const res = await this._grpc.request(Lightning.ListChannels, req, this._meta);
     return res.toObject();
   }
 }

app/src/api/loop.ts

@@ -2,16 +2,17 @@ import * as LOOP from 'types/generated/loop_pb';
 import { SwapClient } from 'types/generated/loop_pb_service';
 import { Quote } from 'types/state';
 import Big from 'big.js';
+import AuthenticatedApi from './auth';
 import GrpcClient from './grpc';
 
 /**
  * An API wrapper to communicate with the Loop daemon via GRPC
  */
-class LoopApi {
-
+class LoopApi extends AuthenticatedApi {
   private _grpc: GrpcClient;
 
   constructor(grpc: GrpcClient) {
+    super();
     this._grpc = grpc;
   }
 
@@ -20,7 +21,7 @@ class LoopApi {
    */
   async listSwaps(): Promise<LOOP.ListSwapsResponse.AsObject> {
     const req = new LOOP.ListSwapsRequest();
-    const res = await this._grpc.request(SwapClient.ListSwaps, req);
+    const res = await this._grpc.request(SwapClient.ListSwaps, req, this._meta);
     return res.toObject();
   }
 
@@ -29,7 +30,7 @@ class LoopApi {
    */
   async getLoopInTerms(): Promise<LOOP.TermsResponse.AsObject> {
     const req = new LOOP.TermsRequest();
-    const res = await this._grpc.request(SwapClient.GetLoopInTerms, req);
+    const res = await this._grpc.request(SwapClient.GetLoopInTerms, req, this._meta);
     return res.toObject();
   }
 
@@ -38,7 +39,7 @@ class LoopApi {
    */
   async getLoopOutTerms(): Promise<LOOP.TermsResponse.AsObject> {
     const req = new LOOP.TermsRequest();
-    const res = await this._grpc.request(SwapClient.LoopOutTerms, req);
+    const res = await this._grpc.request(SwapClient.LoopOutTerms, req, this._meta);
     return res.toObject();
   }
 
@@ -48,7 +49,7 @@ class LoopApi {
   async getLoopInQuote(amount: Big): Promise<LOOP.QuoteResponse.AsObject> {
     const req = new LOOP.QuoteRequest();
     req.setAmt(+amount);
-    const res = await this._grpc.request(SwapClient.GetLoopInQuote, req);
+    const res = await this._grpc.request(SwapClient.GetLoopInQuote, req, this._meta);
     return res.toObject();
   }
 
@@ -58,7 +59,7 @@ class LoopApi {
   async getLoopOutQuote(amount: Big): Promise<LOOP.QuoteResponse.AsObject> {
     const req = new LOOP.QuoteRequest();
     req.setAmt(+amount);
-    const res = await this._grpc.request(SwapClient.LoopOutQuote, req);
+    const res = await this._grpc.request(SwapClient.LoopOutQuote, req, this._meta);
     return res.toObject();
   }
 
@@ -75,7 +76,7 @@ class LoopApi {
     req.setMaxSwapFee(+quote.swapFee);
     req.setMaxMinerFee(+quote.minerFee);
     if (lastHop) req.setLastHop(Buffer.from(lastHop, 'hex').toString('base64'));
-    const res = await this._grpc.request(SwapClient.LoopIn, req);
+    const res = await this._grpc.request(SwapClient.LoopIn, req, this._meta);
     return res.toObject();
   }
 
@@ -98,7 +99,7 @@ class LoopApi {
     req.setOutgoingChanSetList(chanIds);
     req.setSwapPublicationDeadline(deadline);
 
-    const res = await this._grpc.request(SwapClient.LoopOut, req);
+    const res = await this._grpc.request(SwapClient.LoopOut, req, this._meta);
     return res.toObject();
   }
 

app/src/components/auth/AuthPage.tsx

@@ -55,7 +55,7 @@ const Styled = {
 
 const AuthPage: React.FC = () => {
   const { l } = usePrefixedTranslation('cmps.auth.AuthPage');
-  const { uiStore } = useStore();
+  const store = useStore();
   const [pass, setPass] = useState('');
   const [error, setError] = useState('');
 
@@ -64,17 +64,19 @@ const AuthPage: React.FC = () => {
     setError('');
   };
 
-  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
+  const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
     e.preventDefault();
     try {
-      if (!pass) throw new Error('oops, password is required');
-      // TODO: send password to backend to validate
-      uiStore.goToLoop();
-    } catch (e) {
-      setError(e.message);
+      await store.authStore.login(pass);
+    } catch (err) {
+      setError(err.message);
     }
   };
 
+  // don't display the login UI until the app is fully initialized this prevents
+  // a UI flicker while validating credentials stored in session storage
+  if (!store.initialized) return null;
+
   const { Wrapper, Logo, Title, Subtitle, Form, Label, ErrMessage, Submit } = Styled;
   return (
     <Wrapper>

app/src/store/store.ts

@@ -1,4 +1,4 @@
-import { observable } from 'mobx';
+import { observable, when } from 'mobx';
 import { IS_DEV, IS_TEST } from 'config';
 import AppStorage from 'util/appStorage';
 import CsvExporter from 'util/csv';
@@ -12,6 +12,7 @@ import {
   SwapStore,
   UiStore,
 } from './stores';
+import AuthStore from './stores/authStore';
 import { PersistentSettings } from './stores/settingsStore';
 
 /**
@@ -21,6 +22,7 @@ export class Store {
   //
   // Child Stores
   //
+  authStore = new AuthStore(this);
   buildSwapStore = new BuildSwapStore(this);
   channelStore = new ChannelStore(this);
   swapStore = new SwapStore(this);
@@ -65,11 +67,22 @@ export class Store {
    */
   async init() {
     this.settingsStore.init();
-    await this.nodeStore.fetchInfo();
-    await this.channelStore.fetchChannels();
-    await this.swapStore.fetchSwaps();
-    await this.nodeStore.fetchBalances();
+    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.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();
+      },
+    );
   }
 }
 

app/src/store/stores/authStore.ts

@@ -0,0 +1,81 @@
+import { action, observable, toJS } from 'mobx';
+import { Store } from 'store';
+
+export default class AuthStore {
+  private _store: Store;
+
+  /** true if the credentials have been validated by the backend */
+  @observable authenticated = false;
+
+  /** the password encoded to base64 */
+  @observable credentials = '';
+
+  constructor(store: Store) {
+    this._store = store;
+  }
+
+  /**
+   * Updates the credentials in the store, session storage, and API wrappers
+   * @param credentials the encoded password
+   */
+  @action.bound
+  setCredentials(credentials: string) {
+    this.credentials = credentials;
+    this._store.storage.setSession('credentials', this.credentials);
+    this._store.api.lnd.setCredentials(credentials);
+    this._store.api.loop.setCredentials(credentials);
+  }
+
+  /**
+   * Validate the supplied password and save for later if successful
+   */
+  @action.bound
+  async login(password: string) {
+    this._store.log.info('attempting to login with password');
+    if (!password) throw new Error('oops, password is required');
+
+    // encode the password and update the store
+    const encoded = Buffer.from(`${password}:${password}`).toString('base64');
+    this.setCredentials(encoded);
+    this._store.log.info('saved credentials to sessionStorage');
+
+    try {
+      // validate the the credentials are correct
+      await this.validate();
+    } catch (error) {
+      // clear the credentials if incorrect
+      this.setCredentials('');
+      this._store.log.error('incorrect credentials');
+      throw new Error('oops, that password is incorrect');
+    }
+  }
+
+  @action.bound
+  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.authenticated = true;
+  }
+
+  /**
+   * load and validate credentials from the browser's session storage
+   */
+  @action.bound
+  async init() {
+    this._store.log.info('loading credentials from sessionStorage');
+    const creds = this._store.storage.getSession('credentials');
+    if (creds) {
+      this.setCredentials(creds);
+      this._store.log.info('found credentials. validating');
+      try {
+        // test the credentials by making an API call to getInfo
+        await this.validate();
+      } catch (error) {
+        // clear the credentials and swallow the error
+        this.setCredentials('');
+        this._store.log.error('cleared invalid credentials in sessionStorage');
+      }
+    }
+  }
+}

app/src/util/appStorage.ts

@@ -15,4 +15,17 @@ export default class AppStorage<T> {
       return JSON.parse(json) as T;
     }
   }
+  /**
+   * stores data in the browser session storage
+   */
+  setSession(key: string, data: string) {
+    sessionStorage.setItem(key, data);
+  }
+
+  /**
+   * retrieves data from the browser session storage
+   */
+  getSession(key: string): string | undefined {
+    return sessionStorage.getItem(key) || undefined;
+  }
 }