feat: Logging out (#1244)

- Write auth plugin components as wrappers
- Allows plugins to always be mounted and control the transition to
loading the app
  - Needed to ensure keycloak plugin can wipe token on logout
- Refactor auth plugins to just use `AuthPluginBase`
- There was a lot of the same code, just refactored it into one common
base
  - Also added a `useContextOrThrow` hook
- Added login screen for `AuthPluginPsk`
- Took the `LoginAnimation` from Enterprise, renamed to
`RandomAreaPlotAnimation`
- Added a `Login` and `LoginForm` components to allow others to reuse if
desired
  - Also stores the pre-shared key as a cookie after successful login
- Add broadcast channel for notifying other tabs about login/logout
  - Notifies after successful login, or when logout button is pressed
- Added permission for `canLogout` (since you can't logout when
anonymous
- Add context providers for overriding user info and permissions (used
by auth plugins)

Author: mofojed

package-lock.json

@@ -31,9 +31,11 @@
     "@deephaven/auth-plugins": "file:../auth-plugins",
     "@deephaven/components": "file:../components",
     "@deephaven/jsapi-bootstrap": "file:../jsapi-bootstrap",
+    "@deephaven/jsapi-components": "file:../jsapi-components",
     "@deephaven/jsapi-types": "file:../jsapi-types",
+    "@deephaven/jsapi-utils": "file:../jsapi-utils",
     "@deephaven/log": "file:../log",
-    "@deephaven/redux": "file:../redux",
+    "@deephaven/react-hooks": "file:../react-hooks",
     "@paciolan/remote-component": "2.13.0",
     "@paciolan/remote-module-loader": "^3.0.2",
     "fira": "mozilla/fira#4.202"

packages/app-utils/package.json

@@ -1,6 +1,7 @@
 import React from 'react';
 import { AUTH_HANDLER_TYPE_ANONYMOUS } from '@deephaven/auth-plugins';
 import { ApiContext } from '@deephaven/jsapi-bootstrap';
+import { BROADCAST_LOGIN_MESSAGE } from '@deephaven/jsapi-utils';
 import {
   CoreClient,
   IdeConnection,
@@ -19,13 +20,42 @@ jest.mock('../plugins', () => ({
   loadModulePlugins: jest.fn(() => mockPluginsPromise),
 }));
 
+const mockChannel = {
+  postMessage: jest.fn(),
+};
+jest.mock('@deephaven/jsapi-components', () => ({
+  ...jest.requireActual('@deephaven/jsapi-components'),
+  RefreshTokenBootstrap: jest.fn(({ children }) => children),
+  useBroadcastChannel: jest.fn(() => mockChannel),
+  useBroadcastLoginListener: jest.fn(),
+}));
+
 const mockChildText = 'Mock Child';
 const mockChild = <div>{mockChildText}</div>;
 
 function expectMockChild() {
   return expect(screen.queryByText(mockChildText));
 }
 
+function renderComponent(client: CoreClient) {
+  const api = TestUtils.createMockProxy<DhType>({
+    CoreClient: (jest
+      .fn()
+      .mockImplementation(() => client) as unknown) as CoreClient,
+  });
+  return render(
+    <ApiContext.Provider value={api}>
+      <AppBootstrap apiUrl={API_URL} pluginsUrl={PLUGINS_URL}>
+        {mockChild}
+      </AppBootstrap>
+    </ApiContext.Provider>
+  );
+}
+
+beforeEach(() => {
+  jest.clearAllMocks();
+});
+
 it('should throw if api has not been bootstrapped', () => {
   expect(() =>
     render(
@@ -49,19 +79,7 @@ it('should display an error if no login plugin matches the provided auth handler
     getAuthConfigValues: mockGetAuthConfigValues,
     login: mockLogin,
   });
-  const api = TestUtils.createMockProxy<DhType>({
-    CoreClient: (jest
-      .fn()
-      .mockImplementation(() => client) as unknown) as CoreClient,
-  });
-
-  render(
-    <ApiContext.Provider value={api}>
-      <AppBootstrap apiUrl={API_URL} pluginsUrl={PLUGINS_URL}>
-        {mockChild}
-      </AppBootstrap>
-    </ApiContext.Provider>
-  );
+  renderComponent(client);
   expectMockChild().toBeNull();
   expect(mockGetAuthConfigValues).toHaveBeenCalled();
 
@@ -105,19 +123,8 @@ it('should log in automatically when the anonymous handler is supported', async
     login: mockLogin,
     getAsIdeConnection: mockGetAsConnection,
   });
-  const api = TestUtils.createMockProxy<DhType>({
-    CoreClient: (jest
-      .fn()
-      .mockImplementation(() => client) as unknown) as CoreClient,
-  });
 
-  render(
-    <ApiContext.Provider value={api}>
-      <AppBootstrap apiUrl={API_URL} pluginsUrl={PLUGINS_URL}>
-        <div>{mockChild}</div>
-      </AppBootstrap>
-    </ApiContext.Provider>
-  );
+  renderComponent(client);
 
   expectMockChild().toBeNull();
   expect(mockLogin).not.toHaveBeenCalled();
@@ -127,25 +134,31 @@ it('should log in automatically when the anonymous handler is supported', async
     await mockPluginsPromise;
   });
 
+  expect(mockChannel.postMessage).not.toHaveBeenCalled();
   expectMockChild().toBeNull();
   expect(mockLogin).toHaveBeenCalled();
-  expect(screen.queryByTestId('auth-anonymous-loading')).not.toBeNull();
+  expect(screen.queryByTestId('auth-base-loading')).not.toBeNull();
 
   // Wait for login to complete
   await act(async () => {
     mockLoginResolve();
   });
 
-  expect(screen.queryByTestId('auth-anonymous-loading')).toBeNull();
+  expect(screen.queryByTestId('auth-base-loading')).toBeNull();
   expect(screen.queryByTestId('connection-bootstrap-loading')).not.toBeNull();
   expect(screen.queryByText(mockChildText)).toBeNull();
+  expect(mockChannel.postMessage).toHaveBeenCalledWith(
+    expect.objectContaining({
+      message: BROADCAST_LOGIN_MESSAGE,
+    })
+  );
 
   // Wait for IdeConnection to resolve
   await act(async () => {
     mockConnectionResolve(mockConnection);
   });
 
-  expect(screen.queryByTestId('auth-anonymous-loading')).toBeNull();
+  expect(screen.queryByTestId('auth-base-loading')).toBeNull();
   expect(screen.queryByTestId('connection-bootstrap-loading')).toBeNull();
   expectMockChild().not.toBeNull();
 });

packages/app-utils/src/components/AppBootstrap.test.tsx

@@ -1,7 +1,11 @@
-import React from 'react';
+import React, { useCallback, useMemo, useState } from 'react';
 import '@deephaven/components/scss/BaseStyleSheet.scss';
+import { ClientBootstrap } from '@deephaven/jsapi-bootstrap';
+import {
+  RefreshTokenBootstrap,
+  useBroadcastLoginListener,
+} from '@deephaven/jsapi-components';
 import FontBootstrap from './FontBootstrap';
-import ClientBootstrap from './ClientBootstrap';
 import PluginsBootstrap from './PluginsBootstrap';
 import AuthBootstrap from './AuthBootstrap';
 import ConnectionBootstrap from './ConnectionBootstrap';
@@ -35,18 +39,32 @@ export function AppBootstrap({
   children,
 }: AppBootstrapProps) {
   const serverUrl = getBaseUrl(apiUrl).origin;
-  const clientOptions = getConnectOptions();
+  const clientOptions = useMemo(() => getConnectOptions(), []);
+
+  // On logout, we reset the client and have user login again
+  const [logoutCount, setLogoutCount] = useState(0);
+  const onLogin = useCallback(() => undefined, []);
+  const onLogout = useCallback(() => {
+    setLogoutCount(value => value + 1);
+  }, []);
+  useBroadcastLoginListener(onLogin, onLogout);
   return (
     <FontBootstrap fontClassNames={fontClassNames}>
-      <ClientBootstrap serverUrl={serverUrl} options={clientOptions}>
-        <PluginsBootstrap pluginsUrl={pluginsUrl}>
-          <AuthBootstrap>
-            <ConnectionBootstrap>
-              <FontsLoaded>{children}</FontsLoaded>
-            </ConnectionBootstrap>
-          </AuthBootstrap>
-        </PluginsBootstrap>
-      </ClientBootstrap>
+      <PluginsBootstrap pluginsUrl={pluginsUrl}>
+        <ClientBootstrap
+          serverUrl={serverUrl}
+          options={clientOptions}
+          key={logoutCount}
+        >
+          <RefreshTokenBootstrap>
+            <AuthBootstrap>
+              <ConnectionBootstrap>
+                <FontsLoaded>{children}</FontsLoaded>
+              </ConnectionBootstrap>
+            </AuthBootstrap>
+          </RefreshTokenBootstrap>
+        </ClientBootstrap>
+      </PluginsBootstrap>
     </FontBootstrap>
   );
 }