load auth metadata configs on startup

src/app/components/CapabilitiesAndMediaConfigLoader.tsx

@@ -1,36 +0,0 @@
-import { ReactNode, useCallback, useEffect } from 'react';
-import { Capabilities } from 'matrix-js-sdk';
-import { AsyncStatus, useAsyncCallback } from '../hooks/useAsyncCallback';
-import { useMatrixClient } from '../hooks/useMatrixClient';
-import { MediaConfig } from '../hooks/useMediaConfig';
-import { promiseFulfilledResult } from '../utils/common';
-
-type CapabilitiesAndMediaConfigLoaderProps = {
-  children: (capabilities?: Capabilities, mediaConfig?: MediaConfig) => ReactNode;
-};
-export function CapabilitiesAndMediaConfigLoader({
-  children,
-}: CapabilitiesAndMediaConfigLoaderProps) {
-  const mx = useMatrixClient();
-
-  const [state, load] = useAsyncCallback<
-    [Capabilities | undefined, MediaConfig | undefined],
-    unknown,
-    []
-  >(
-    useCallback(async () => {
-      const result = await Promise.allSettled([mx.getCapabilities(), mx.getMediaConfig()]);
-      const capabilities = promiseFulfilledResult(result[0]);
-      const mediaConfig = promiseFulfilledResult(result[1]);
-      return [capabilities, mediaConfig];
-    }, [mx])
-  );
-
-  useEffect(() => {
-    load();
-  }, [load]);
-
-  const [capabilities, mediaConfig] =
-    state.status === AsyncStatus.Success ? state.data : [undefined, undefined];
-  return children(capabilities, mediaConfig);
-}

src/app/components/ServerConfigsLoader.tsx

@@ -0,0 +1,52 @@
+import { ReactNode, useCallback, useMemo } from 'react';
+import { Capabilities, validateAuthMetadata, ValidatedAuthMetadata } from 'matrix-js-sdk';
+import { AsyncStatus, useAsyncCallbackValue } from '../hooks/useAsyncCallback';
+import { useMatrixClient } from '../hooks/useMatrixClient';
+import { MediaConfig } from '../hooks/useMediaConfig';
+import { promiseFulfilledResult } from '../utils/common';
+
+export type ServerConfigs = {
+  capabilities?: Capabilities;
+  mediaConfig?: MediaConfig;
+  authMetadata?: ValidatedAuthMetadata;
+};
+
+type ServerConfigsLoaderProps = {
+  children: (configs: ServerConfigs) => ReactNode;
+};
+export function ServerConfigsLoader({ children }: ServerConfigsLoaderProps) {
+  const mx = useMatrixClient();
+  const fallbackConfigs = useMemo(() => ({}), []);
+
+  const [configsState] = useAsyncCallbackValue<ServerConfigs, unknown>(
+    useCallback(async () => {
+      const result = await Promise.allSettled([
+        mx.getCapabilities(),
+        mx.getMediaConfig(),
+        mx.getAuthMetadata(),
+      ]);
+
+      const capabilities = promiseFulfilledResult(result[0]);
+      const mediaConfig = promiseFulfilledResult(result[1]);
+      const authMetadata = promiseFulfilledResult(result[2]);
+      let validatedAuthMetadata: ValidatedAuthMetadata | undefined;
+
+      try {
+        validatedAuthMetadata = validateAuthMetadata(authMetadata);
+      } catch (e) {
+        console.error(e);
+      }
+
+      return {
+        capabilities,
+        mediaConfig,
+        authMetadata: validatedAuthMetadata,
+      };
+    }, [mx])
+  );
+
+  const configs: ServerConfigs =
+    configsState.status === AsyncStatus.Success ? configsState.data : fallbackConfigs;
+
+  return children(configs);
+}

src/app/hooks/useAuthMetadata.ts

@@ -0,0 +1,12 @@
+import { ValidatedAuthMetadata } from 'matrix-js-sdk';
+import { createContext, useContext } from 'react';
+
+const AuthMetadataContext = createContext<ValidatedAuthMetadata | undefined>(undefined);
+
+export const AuthMetadataProvider = AuthMetadataContext.Provider;
+
+export const useAuthMetadata = (): ValidatedAuthMetadata | undefined => {
+  const metadata = useContext(AuthMetadataContext);
+
+  return metadata;
+};

src/app/pages/client/ClientRoot.tsx

@@ -25,7 +25,7 @@ import {
 } from '../../../client/initMatrix';
 import { getSecret } from '../../../client/state/auth';
 import { SplashScreen } from '../../components/splash-screen';
-import { CapabilitiesAndMediaConfigLoader } from '../../components/CapabilitiesAndMediaConfigLoader';
+import { ServerConfigsLoader } from '../../components/ServerConfigsLoader';
 import { CapabilitiesProvider } from '../../hooks/useCapabilities';
 import { MediaConfigProvider } from '../../hooks/useMediaConfig';
 import { MatrixClientProvider } from '../../hooks/useMatrixClient';
@@ -37,6 +37,7 @@ import { AsyncStatus, useAsyncCallback } from '../../hooks/useAsyncCallback';
 import { useSyncState } from '../../hooks/useSyncState';
 import { stopPropagation } from '../../utils/keyboard';
 import { SyncStatus } from './SyncStatus';
+import { AuthMetadataProvider } from '../../hooks/useAuthMetaData';
 
 function ClientRootLoading() {
   return (
@@ -207,18 +208,20 @@ export function ClientRoot({ children }: ClientRootProps) {
         <ClientRootLoading />
       ) : (
         <MatrixClientProvider value={mx}>
-          <CapabilitiesAndMediaConfigLoader>
+          <ServerConfigsLoader>
-            {(capabilities, mediaConfig) => (
+            {(serverConfigs) => (
-              <CapabilitiesProvider value={capabilities ?? {}}>
+              <CapabilitiesProvider value={serverConfigs.capabilities ?? {}}>
-                <MediaConfigProvider value={mediaConfig ?? {}}>
+                <MediaConfigProvider value={serverConfigs.mediaConfig ?? {}}>
-                  {children}
+                  <AuthMetadataProvider value={serverConfigs.authMetadata}>
-                  <Windows />
+                    {children}
-                  <Dialogs />
+                    <Windows />
-                  <ReusableContextMenu />
+                    <Dialogs />
+                    <ReusableContextMenu />
+                  </AuthMetadataProvider>
                 </MediaConfigProvider>
               </CapabilitiesProvider>
             )}
-          </CapabilitiesAndMediaConfigLoader>
+          </ServerConfigsLoader>
         </MatrixClientProvider>
       )}
     </SpecVersions>