Merge pull request #49 from lightninglabs/auth

Add authentication

Author: jamaljsr

app/src/App.tsx

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

app/src/__stories__/AuthPage.stories.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import AuthPage from 'components/auth/AuthPage';
+import { Layout } from 'components/layout';
+
+export default {
+  title: 'Pages/Auth',
+  component: AuthPage,
+};
+
+export const Default = () => {
+  return (
+    <Layout>
+      <AuthPage />
+    </Layout>
+  );
+};

app/src/__stories__/StoryWrapper.tsx

@@ -1,6 +1,7 @@
 import React, { CSSProperties, useMemo } from 'react';
 import { observer } from 'mobx-react-lite';
 import { BalanceMode, Unit } from 'util/constants';
+import { AuthenticationError } from 'util/errors';
 import { sampleApiResponses } from 'util/tests/sampleData';
 import { createStore, StoreProvider } from 'store';
 import { PersistentSettings } from 'store/stores/settingsStore';
@@ -9,7 +10,10 @@ import { ThemeProvider } from 'components/theme';
 
 // mock the GRPC client to return sample data instead of making an actual request
 const grpc = {
-  request: (methodDescriptor: any) => {
+  request: (methodDescriptor: any, opts: any, metadata: any) => {
+    // fail any authenticated requests to simulate incorrect login attempts
+    if (metadata && metadata.authorization) throw new AuthenticationError();
+
     const endpoint = `${methodDescriptor.service.serviceName}.${methodDescriptor.methodName}`;
     const data = sampleApiResponses[endpoint] || {};
     // the calling function expects the return value to have a `toObject` function
@@ -26,11 +30,17 @@ 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
 // the real localStorage to save settings
-const createStoryStore = () => createStore(grpc, new StoryAppStorage());
+const createStoryStore = () => {
+  const store = createStore(grpc, new StoryAppStorage());
+  store.fetchAllData();
+  return store;
+};
 
 /**
  * This component is used to wrap every story. It provides the app theme

app/src/__tests__/App.spec.tsx

@@ -1,15 +1,20 @@
 import React from 'react';
 import { render } from '@testing-library/react';
+import * as config from 'config';
 import App from '../App';
 
 describe('App Component', () => {
   const renderApp = () => {
     return render(<App />);
   };
 
-  it('should render the App', () => {
-    const { getByText } = renderApp();
-    const linkElement = getByText('Node Status');
-    expect(linkElement).toBeInTheDocument();
+  it('should render the App', async () => {
+    // ensure init is called in the store so the UI is displayed
+    Object.defineProperty(config, 'IS_TEST', { get: () => false });
+    const { findByText } = renderApp();
+    expect(await findByText('Shushtar')).toBeInTheDocument();
+    expect(await findByText('logo.svg')).toBeInTheDocument();
+    // revert IS_DEV
+    Object.defineProperty(config, 'IS_TEST', { get: () => true });
   });
 });

app/src/__tests__/Pages.spec.tsx

@@ -1,27 +1,37 @@
 import React from 'react';
 import { renderWithProviders } from 'util/tests';
+import { createStore } from 'store';
 import Pages from 'components/Pages';
 
 describe('Pages Component', () => {
-  const render = () => {
-    return renderWithProviders(<Pages />);
+  const render = async () => {
+    const store = createStore();
+    await store.init();
+    return renderWithProviders(<Pages />, store);
   };
 
-  it('should display the Loop page by default', () => {
-    const { getByText, store } = render();
+  it('should display the Auth page by default', async () => {
+    const { getByText, store } = await render();
+    expect(getByText('Shushtar')).toBeInTheDocument();
+    expect(store.uiStore.page).toBe('auth');
+  });
+
+  it('should display the Loop page', async () => {
+    const { getByText, store } = await render();
+    store.uiStore.goToLoop();
     expect(getByText('Lightning Loop')).toBeInTheDocument();
     expect(store.uiStore.page).toBe('loop');
   });
 
-  it('should display the History page', () => {
-    const { getByText, store } = render();
+  it('should display the History page', async () => {
+    const { getByText, store } = await render();
     store.uiStore.goToHistory();
     expect(getByText('Loop History')).toBeInTheDocument();
     expect(store.uiStore.page).toBe('history');
   });
 
-  it('should display the Settings page', () => {
-    const { getByText, store } = render();
+  it('should display the Settings page', async () => {
+    const { getByText, store } = await render();
     store.uiStore.goToSettings();
     expect(getByText('Settings')).toBeInTheDocument();
     expect(store.uiStore.page).toBe('settings');

app/src/__tests__/components/auth/AuthPage.spec.tsx

@@ -0,0 +1,62 @@
+import React from 'react';
+import { grpc } from '@improbable-eng/grpc-web';
+import { fireEvent } from '@testing-library/react';
+import { renderWithProviders } from 'util/tests';
+import { createStore, Store } from 'store';
+import AuthPage from 'components/auth/AuthPage';
+
+const grpcMock = grpc as jest.Mocked<typeof grpc>;
+
+describe('AuthPage ', () => {
+  let store: Store;
+
+  beforeEach(async () => {
+    store = createStore();
+    await store.init();
+  });
+
+  const render = () => {
+    return renderWithProviders(<AuthPage />, store);
+  };
+
+  it('should display the title', () => {
+    const { getByText } = render();
+    expect(getByText('Shushtar')).toBeInTheDocument();
+  });
+
+  it('should display the password field', () => {
+    const { getByLabelText } = render();
+    expect(getByLabelText('Enter your password in the field above')).toBeInTheDocument();
+  });
+
+  it('should display the submit button', () => {
+    const { getByText } = render();
+    expect(getByText('Submit')).toBeInTheDocument();
+  });
+
+  it('should display nothing when the store is not initialized', () => {
+    const { getByText, queryByText } = render();
+    expect(getByText('Shushtar')).toBeInTheDocument();
+    store.initialized = false;
+    expect(queryByText('Shushtar')).not.toBeInTheDocument();
+  });
+
+  it('should display an error when submitting an empty password', async () => {
+    const { getByText, findByText } = render();
+    fireEvent.click(getByText('Submit'));
+    expect(await findByText('oops, password is required')).toBeInTheDocument();
+  });
+
+  it('should display an error when submitting an invalid password', async () => {
+    grpcMock.unary.mockImplementationOnce(desc => {
+      if (desc.methodName === 'GetInfo') throw new Error('test-err');
+      return undefined as any;
+    });
+
+    const { getByText, getByLabelText, findByText } = render();
+    const input = getByLabelText('Enter your password in the field above');
+    fireEvent.change(input, { target: { value: 'test-pw' } });
+    fireEvent.click(getByText('Submit'));
+    expect(await findByText('oops, that password is incorrect')).toBeInTheDocument();
+  });
+});

app/src/__tests__/components/layout/Layout.spec.tsx

@@ -1,11 +1,14 @@
 import React from 'react';
 import { fireEvent } from '@testing-library/react';
 import { renderWithProviders } from 'util/tests';
+import { createStore } from 'store';
 import Layout from 'components/layout/Layout';
 
 describe('Layout component', () => {
   const render = () => {
-    return renderWithProviders(<Layout />);
+    const store = createStore();
+    store.uiStore.page = 'loop';
+    return renderWithProviders(<Layout />, store);
   };
 
   it('should display the hamburger menu', () => {
@@ -41,7 +44,7 @@ describe('Layout component', () => {
     expect(getByText('Lightning Loop').parentElement).toHaveClass('active');
   });
 
-  it('should navigate back to the Settings page', () => {
+  it('should navigate to the Settings page', () => {
     const { getByText, store } = render();
     expect(store.uiStore.page).toBe('loop');
     fireEvent.click(getByText('Settings'));
@@ -51,4 +54,11 @@ describe('Layout component', () => {
     expect(store.uiStore.page).toBe('loop');
     expect(getByText('Lightning Loop').parentElement).toHaveClass('active');
   });
+
+  it('should not display the sidebar on the auth page', () => {
+    const { getByText, queryByText, store } = render();
+    expect(getByText('menu.svg')).toBeInTheDocument();
+    store.uiStore.page = 'auth';
+    expect(queryByText('menu.svg')).not.toBeInTheDocument();
+  });
 });

app/src/__tests__/components/loop/LoopHistory.spec.tsx

@@ -10,7 +10,7 @@ describe('LoopHistory component', () => {
 
   beforeEach(async () => {
     store = createStore();
-    await store.init();
+    await store.fetchAllData();
 
     // remove all but one swap to prevent `getByText` from
     // complaining about multiple elements in tests

app/src/__tests__/components/loop/LoopPage.spec.tsx

@@ -16,7 +16,7 @@ describe('LoopPage component', () => {
 
   beforeEach(async () => {
     store = createStore();
-    await store.init();
+    await store.fetchAllData();
   });
 
   const render = () => {
@@ -74,8 +74,8 @@ describe('LoopPage component', () => {
       const { getByText } = render();
       expect(getByText('Loop')).toBeInTheDocument();
       fireEvent.click(getByText('Loop'));
-      expect(getByText('Loop out')).toBeInTheDocument();
-      expect(getByText('Loop in')).toBeInTheDocument();
+      expect(getByText('Loop Out')).toBeInTheDocument();
+      expect(getByText('Loop In')).toBeInTheDocument();
     });
 
     it('should display swap wizard when Loop out is clicked', async () => {
@@ -85,7 +85,7 @@ describe('LoopPage component', () => {
       store.channelStore.sortedChannels.slice(0, 3).forEach(c => {
         store.buildSwapStore.toggleSelectedChannel(c.chanId);
       });
-      fireEvent.click(getByText('Loop out'));
+      fireEvent.click(getByText('Loop Out'));
       expect(getByText('Step 1 of 2')).toBeInTheDocument();
     });
 
@@ -96,7 +96,7 @@ describe('LoopPage component', () => {
       store.channelStore.sortedChannels.slice(0, 1).forEach(c => {
         store.buildSwapStore.toggleSelectedChannel(c.chanId);
       });
-      fireEvent.click(getByText('Loop in'));
+      fireEvent.click(getByText('Loop In'));
       expect(getByText('Step 1 of 2')).toBeInTheDocument();
     });
 
@@ -107,7 +107,7 @@ describe('LoopPage component', () => {
       store.channelStore.sortedChannels.slice(0, 1).forEach(c => {
         store.buildSwapStore.toggleSelectedChannel(c.chanId);
       });
-      fireEvent.click(getByText('Loop in'));
+      fireEvent.click(getByText('Loop In'));
       expect(getByText('Step 1 of 2')).toBeInTheDocument();
       fireEvent.click(getByText('arrow-left.svg'));
       expect(getByText('Loop History')).toBeInTheDocument();
@@ -120,7 +120,7 @@ describe('LoopPage component', () => {
       store.channelStore.sortedChannels.slice(0, 3).forEach(c => {
         store.buildSwapStore.toggleSelectedChannel(c.chanId);
       });
-      fireEvent.click(getByText('Loop out'));
+      fireEvent.click(getByText('Loop Out'));
       expect(getByText('Step 1 of 2')).toBeInTheDocument();
       fireEvent.click(getByText('Next'));
       expect(getByText('Step 2 of 2')).toBeInTheDocument();
@@ -141,7 +141,7 @@ describe('LoopPage component', () => {
       store.channelStore.sortedChannels.slice(0, 3).forEach(c => {
         store.buildSwapStore.toggleSelectedChannel(c.chanId);
       });
-      fireEvent.click(getByText('Loop out'));
+      fireEvent.click(getByText('Loop Out'));
       expect(getByText('Step 1 of 2')).toBeInTheDocument();
       fireEvent.click(getByText('Next'));
       expect(getByText('Step 2 of 2')).toBeInTheDocument();

app/src/__tests__/store/authStore.spec.ts

@@ -0,0 +1,68 @@
+import { grpc } from '@improbable-eng/grpc-web';
+import AppStorage from 'util/appStorage';
+import { AuthStore, createStore, Store } from 'store';
+import { PersistentSettings } from 'store/stores/settingsStore';
+
+const grpcMock = grpc as jest.Mocked<typeof grpc>;
+const appStorageMock = AppStorage as jest.Mock<AppStorage<PersistentSettings>>;
+
+describe('AuthStore', () => {
+  let rootStore: Store;
+  let store: AuthStore;
+
+  beforeEach(() => {
+    rootStore = createStore();
+    store = rootStore.authStore;
+  });
+
+  it('should set credentials', () => {
+    expect(store.credentials).toBe('');
+    store.setCredentials('test');
+    expect(store.credentials).toEqual('test');
+    store.setCredentials('');
+    expect(store.credentials).toEqual('');
+  });
+
+  it('should login successfully', async () => {
+    await store.login('test-pw');
+    expect(store.credentials).toBe('dGVzdC1wdzp0ZXN0LXB3');
+  });
+
+  it('should fail to login with a blank password', async () => {
+    await expect(store.login('')).rejects.toThrow('oops, password is required');
+    expect(store.credentials).toBe('');
+  });
+
+  it('should fail to login with an invalid password', async () => {
+    grpcMock.unary.mockImplementationOnce(desc => {
+      if (desc.methodName === 'GetInfo') throw new Error('test-err');
+      return undefined as any;
+    });
+    await expect(store.login('test-pw')).rejects.toThrow(
+      'oops, that password is incorrect',
+    );
+    expect(store.credentials).toBe('');
+  });
+
+  it('should load credentials from session storage', async () => {
+    const getMock = appStorageMock.mock.instances[0].getSession as jest.Mock;
+    getMock.mockReturnValue('test-creds');
+    await store.init();
+    expect(store.credentials).toBe('test-creds');
+  });
+
+  it('should not store invalid credentials from session storage', async () => {
+    grpcMock.unary.mockImplementationOnce((desc, opts) => {
+      if (desc.methodName === 'GetInfo') {
+        opts.onEnd({
+          status: grpc.Code.Unauthenticated,
+        } as any);
+      }
+      return undefined as any;
+    });
+    const getMock = appStorageMock.mock.instances[0].getSession as jest.Mock;
+    getMock.mockReturnValue('test-creds');
+    await store.init();
+    expect(store.credentials).toBe('');
+  });
+});