Auth - URL Navigation

config.json

@@ -1,4 +1,6 @@
 {
+  "appVersion": "3.2.0",
+  "basename": "/",
   "defaultHomeserver": 2,
   "homeserverList": [
     "converser.eu",

index.html

@@ -96,6 +96,6 @@
     <audio id="inviteSound">
       <source src="./public/sound/invite.ogg" type="audio/ogg" />
     </audio>
-    <script type="module" src="./src/index.jsx"></script>
+    <script type="module" src="./src/index.tsx"></script>
   </body>
 </html>

package.json

@@ -45,7 +45,7 @@
     "html-react-parser": "4.2.0",
     "immer": "9.0.16",
     "is-hotkey": "0.2.0",
-    "jotai": "1.12.0",
+    "jotai": "2.6.0",
     "katex": "0.16.4",
     "linkify-html": "4.0.2",
     "linkify-react": "4.1.1",
@@ -55,17 +55,18 @@
     "pdfjs-dist": "3.10.111",
     "prismjs": "1.29.0",
     "prop-types": "15.8.1",
-    "react": "17.0.2",
+    "react": "18.2.0",
     "react-aria": "3.29.1",
     "react-autosize-textarea": "7.1.0",
     "react-blurhash": "0.2.0",
-    "react-dnd": "15.1.2",
-    "react-dnd-html5-backend": "15.1.3",
-    "react-dom": "17.0.2",
+    "react-dnd": "16.0.1",
+    "react-dnd-html5-backend": "16.0.1",
+    "react-dom": "18.2.0",
     "react-error-boundary": "4.0.10",
     "react-google-recaptcha": "2.1.0",
     "react-modal": "3.16.1",
     "react-range": "1.8.14",
+    "react-router-dom": "6.20.0",
     "sanitize-html": "2.8.0",
     "slate": "0.94.1",
     "slate-history": "0.93.0",
@@ -81,13 +82,13 @@
     "@types/file-saver": "2.0.5",
     "@types/node": "18.11.18",
     "@types/prismjs": "1.26.0",
-    "@types/react": "18.0.26",
-    "@types/react-dom": "18.0.9",
+    "@types/react": "18.2.39",
+    "@types/react-dom": "18.2.17",
     "@types/sanitize-html": "2.9.0",
     "@types/ua-parser-js": "0.7.36",
     "@typescript-eslint/eslint-plugin": "5.46.1",
     "@typescript-eslint/parser": "5.46.1",
-    "@vitejs/plugin-react": "3.0.0",
+    "@vitejs/plugin-react": "4.2.0",
     "buffer": "6.0.3",
     "eslint": "8.29.0",
     "eslint-config-airbnb": "19.0.4",
@@ -100,7 +101,7 @@
     "prettier": "2.8.1",
     "sass": "1.56.2",
     "typescript": "4.9.4",
-    "vite": "4.3.9",
+    "vite": "5.0.8",
     "vite-plugin-static-copy": "0.13.0"
   }
 }

src/app/components/AuthFlowsLoader.tsx

@@ -0,0 +1,80 @@
+import { ReactNode, useCallback, useMemo } from 'react';
+import { IAuthData, MatrixError, createClient } from 'matrix-js-sdk';
+import { AsyncStatus, useAsyncCallback } from '../hooks/useAsyncCallback';
+import { useAutoDiscoveryInfo } from '../hooks/useAutoDiscoveryInfo';
+import { promiseFulfilledResult, promiseRejectedResult } from '../utils/common';
+import { AuthFlows, RegisterFlowStatus, RegisterFlowsResponse } from '../hooks/useAuthFlows';
+
+type AuthFlowsLoaderProps = {
+  fallback?: () => ReactNode;
+  error?: (err: unknown) => ReactNode;
+  children: (versions: AuthFlows) => ReactNode;
+};
+export function AuthFlowsLoader({ fallback, error, children }: AuthFlowsLoaderProps) {
+  const autoDiscoveryInfo = useAutoDiscoveryInfo();
+  const baseUrl = autoDiscoveryInfo['m.homeserver'].base_url;
+
+  const mx = useMemo(() => createClient({ baseUrl }), [baseUrl]);
+
+  const [state, load] = useAsyncCallback(
+    useCallback(async () => {
+      const result = await Promise.allSettled([mx.loginFlows(), mx.registerRequest({})]);
+      const loginFlows = promiseFulfilledResult(result[0]);
+      const registerReason = promiseRejectedResult(result[1]) as MatrixError | undefined;
+      let registerFlows: RegisterFlowsResponse = { status: RegisterFlowStatus.InvalidRequest };
+
+      if (typeof registerReason === 'object' && registerReason.httpStatus) {
+        switch (registerReason.httpStatus) {
+          case RegisterFlowStatus.InvalidRequest: {
+            registerFlows = { status: RegisterFlowStatus.InvalidRequest };
+            break;
+          }
+          case RegisterFlowStatus.RateLimited: {
+            registerFlows = { status: RegisterFlowStatus.RateLimited };
+            break;
+          }
+          case RegisterFlowStatus.RegistrationDisabled: {
+            registerFlows = { status: RegisterFlowStatus.RegistrationDisabled };
+            break;
+          }
+          case RegisterFlowStatus.FlowRequired: {
+            registerFlows = {
+              status: RegisterFlowStatus.FlowRequired,
+              data: registerReason.data as IAuthData,
+            };
+            break;
+          }
+          default: {
+            registerFlows = { status: RegisterFlowStatus.InvalidRequest };
+          }
+        }
+      }
+
+      if (!loginFlows) {
+        throw new Error('Missing auth flow!');
+      }
+      if ('errcode' in loginFlows) {
+        throw new Error('Failed to load auth flow!');
+      }
+
+      const authFlows: AuthFlows = {
+        loginFlows,
+        registerFlows,
+      };
+
+      return authFlows;
+    }, [mx])
+  );
+
+  if (state.status === AsyncStatus.Idle) load();
+
+  if (state.status === AsyncStatus.Idle || state.status === AsyncStatus.Loading) {
+    return fallback?.();
+  }
+
+  if (state.status === AsyncStatus.Error) {
+    return error?.(state.error);
+  }
+
+  return children(state.data);
+}

src/app/components/ClientConfigLoader.tsx

@@ -0,0 +1,26 @@
+import { ReactNode } from 'react';
+import { AsyncStatus, useAsyncCallback } from '../hooks/useAsyncCallback';
+import { ClientConfig } from '../hooks/useClientConfig';
+
+const getClientConfig = async (): Promise<ClientConfig> => {
+  const config = await fetch('/config.json', { method: 'GET' });
+  return config.json();
+};
+
+type ClientConfigLoaderProps = {
+  fallback?: () => ReactNode;
+  children: (config: ClientConfig) => ReactNode;
+};
+export function ClientConfigLoader({ fallback, children }: ClientConfigLoaderProps) {
+  const [state, load] = useAsyncCallback(getClientConfig);
+
+  if (state.status === AsyncStatus.Idle) load();
+
+  if (state.status === AsyncStatus.Idle || state.status === AsyncStatus.Loading) {
+    return fallback?.();
+  }
+
+  const config: ClientConfig = state.status === AsyncStatus.Success ? state.data : {};
+
+  return children(config);
+}

src/app/components/SpecVersionsLoader.tsx

@@ -0,0 +1,30 @@
+import { ReactNode, useCallback } from 'react';
+import { AsyncStatus, useAsyncCallback } from '../hooks/useAsyncCallback';
+import { SpecVersions, specVersions } from '../cs-api';
+import { useAutoDiscoveryInfo } from '../hooks/useAutoDiscoveryInfo';
+
+type SpecVersionsLoaderProps = {
+  fallback?: () => ReactNode;
+  error?: (err: unknown) => ReactNode;
+  children: (versions: SpecVersions) => ReactNode;
+};
+export function SpecVersionsLoader({ fallback, error, children }: SpecVersionsLoaderProps) {
+  const autoDiscoveryInfo = useAutoDiscoveryInfo();
+  const baseUrl = autoDiscoveryInfo['m.homeserver'].base_url;
+
+  const [state, load] = useAsyncCallback(
+    useCallback(() => specVersions(fetch, baseUrl), [baseUrl])
+  );
+
+  if (state.status === AsyncStatus.Idle) load();
+
+  if (state.status === AsyncStatus.Idle || state.status === AsyncStatus.Loading) {
+    return fallback?.();
+  }
+
+  if (state.status === AsyncStatus.Error) {
+    return error?.(state.error);
+  }
+
+  return children(state.data);
+}

src/app/cs-api.ts

@@ -0,0 +1,115 @@
+import to from 'await-to-js';
+import { trimTrailingSlash } from './utils/common';
+
+export enum AutoDiscoveryAction {
+  PROMPT = 'PROMPT',
+  IGNORE = 'IGNORE',
+  FAIL_PROMPT = 'FAIL_PROMPT',
+  FAIL_ERROR = 'FAIL_ERROR',
+}
+
+export type AutoDiscoveryError = {
+  host: string;
+  action: AutoDiscoveryAction;
+};
+
+export type AutoDiscoveryInfo = Record<string, unknown> & {
+  'm.homeserver': {
+    base_url: string;
+  };
+  'm.identity_server'?: {
+    base_url: string;
+  };
+};
+
+export const autoDiscovery = async (
+  request: typeof fetch,
+  server: string
+): Promise<[AutoDiscoveryError, undefined] | [undefined, AutoDiscoveryInfo]> => {
+  const host = /^https?:\/\//.test(server) ? trimTrailingSlash(server) : `https://${server}`;
+  const autoDiscoveryUrl = `${host}/.well-known/matrix/client`;
+
+  const [err, response] = await to(request(autoDiscoveryUrl, { method: 'GET' }));
+
+  if (err || response.status === 404) {
+    // AutoDiscoveryAction.IGNORE
+    // We will use default value for IGNORE action
+    return [
+      undefined,
+      {
+        'm.homeserver': {
+          base_url: host,
+        },
+      },
+    ];
+  }
+  if (response.status !== 200) {
+    return [
+      {
+        host,
+        action: AutoDiscoveryAction.FAIL_PROMPT,
+      },
+      undefined,
+    ];
+  }
+
+  const [contentErr, content] = await to<AutoDiscoveryInfo>(response.json());
+
+  if (contentErr || typeof content !== 'object') {
+    return [
+      {
+        host,
+        action: AutoDiscoveryAction.FAIL_PROMPT,
+      },
+      undefined,
+    ];
+  }
+
+  const baseUrl = content['m.homeserver']?.base_url;
+  if (typeof baseUrl !== 'string') {
+    return [
+      {
+        host,
+        action: AutoDiscoveryAction.FAIL_PROMPT,
+      },
+      undefined,
+    ];
+  }
+
+  if (/^https?:\/\//.test(baseUrl) === false) {
+    return [
+      {
+        host,
+        action: AutoDiscoveryAction.FAIL_ERROR,
+      },
+      undefined,
+    ];
+  }
+
+  content['m.homeserver'].base_url = trimTrailingSlash(baseUrl);
+  if (content['m.identity_server']) {
+    content['m.identity_server'].base_url = trimTrailingSlash(
+      content['m.identity_server'].base_url
+    );
+  }
+
+  return [undefined, content];
+};
+
+export type SpecVersions = {
+  versions: string[];
+  unstable_features?: Record<string, boolean>;
+};
+export const specVersions = async (
+  request: typeof fetch,
+  baseUrl: string
+): Promise<SpecVersions> => {
+  const res = await request(`${baseUrl}/_matrix/client/versions`);
+
+  const data = (await res.json()) as unknown;
+
+  if (data && typeof data === 'object' && 'versions' in data && Array.isArray(data.versions)) {
+    return data as SpecVersions;
+  }
+  throw new Error('Homeserver URL does not appear to be a valid Matrix homeserver');
+};