update matrix-js-sdk with the new oauth api

.changeset/update-oauth-implementation.md

@@ -0,0 +1,5 @@
+---
+default: patch
+---
+
+Updated OIDC implementation with new matrix-js-sdk version.

package.json

@@ -90,7 +90,7 @@
     "linkify-react": "^4.3.3",
     "linkifyjs": "^4.3.3",
     "marked": "^18.0.5",
-    "matrix-js-sdk": "^41.9.0",
+    "matrix-js-sdk": "42.0.0",
     "matrix-widget-api": "^1.17.0",
     "pdfjs-dist": "^6.1.200",
     "react": "^18.3.1",

pnpm-workspace.yaml

@@ -10,6 +10,7 @@ allowBuilds:
 engineStrict: true
 minimumReleaseAge: 1440
 minimumReleaseAgeExclude:
+  - 'matrix-js-sdk'
   - '@sableclient/sable-call-embedded'
   - '@sableclient/twemoji-font'
 

src/app/components/ServerConfigsLoader.tsx

@@ -1,12 +1,10 @@
 import type { ReactNode } from 'react';
 import { useCallback, useMemo } from 'react';
 import type { Capabilities, ValidatedAuthMetadata } from '$types/matrix-sdk';
-import { validateAuthMetadata } from '$types/matrix-sdk';
 import { AsyncStatus, useAsyncCallbackValue } from '$hooks/useAsyncCallback';
 import { useMatrixClient } from '$hooks/useMatrixClient';
 import type { MediaConfig } from '$hooks/useMediaConfig';
 import { promiseFulfilledResult } from '$utils/common';
-import { createLogger } from '$utils/debug';
 
 export type ServerConfigs = {
   capabilities?: Capabilities;
@@ -18,8 +16,6 @@ type ServerConfigsLoaderProps = {
   children: (configs: ServerConfigs) => ReactNode;
 };
 
-const log = createLogger('ServerConfigsLoader');
-
 export function ServerConfigsLoader({ children }: ServerConfigsLoaderProps) {
   const mx = useMatrixClient();
   const fallbackConfigs = useMemo(() => ({}), []);
@@ -35,18 +31,11 @@ export function ServerConfigsLoader({ children }: ServerConfigsLoaderProps) {
       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) {
-        log.error('Failed to validate auth metadata:', e);
-      }
 
       return {
         capabilities,
         mediaConfig,
-        authMetadata: validatedAuthMetadata,
+        authMetadata,
       };
     }, [mx])
   );

src/app/features/settings/devices/OtherDevices.tsx

@@ -11,8 +11,7 @@ import { useUIAMatrixError } from '$hooks/useUIAFlows';
 import { DeviceVerificationStatus } from '$components/DeviceVerificationStatus';
 import { VerificationStatus } from '$hooks/useDeviceVerificationStatus';
 import { useAuthMetadata } from '$hooks/useAuthMetadata';
-import { withSearchParam } from '$pages/pathUtils';
-import { useAccountManagementActions } from '$hooks/useAccountManagement';
+import { getAccountManagementUrl, useAccountManagementActions } from '$hooks/useAccountManagement';
 import { SettingTile } from '$components/setting-tile';
 import { SequenceCardStyle } from '$features/settings/styles.css';
 import { VerifyOtherDeviceTile } from './Verification';
@@ -63,12 +62,8 @@ export function OtherDevices({ devices, refreshDeviceList, showVerification }: O
   const [deleted, setDeleted] = useState(new Set());
 
   const handleDashboardOIDC = useCallback(() => {
-    const authUrl = authMetadata?.account_management_uri ?? authMetadata?.issuer;
-    if (!authUrl) return;
-
-    const url = withSearchParam(authUrl, {
-      action: accountManagementActions.sessionsList,
-    });
+    const url = getAccountManagementUrl(authMetadata, accountManagementActions.sessionsList);
+    if (!url) return;
     if (isTauri()) {
       import('@tauri-apps/plugin-opener')
         .then(({ openUrl }) => openUrl(url))
@@ -80,13 +75,12 @@ export function OtherDevices({ devices, refreshDeviceList, showVerification }: O
 
   const handleDeleteOIDC = useCallback(
     (deviceId: string) => {
-      const authUrl = authMetadata?.account_management_uri ?? authMetadata?.issuer;
-      if (!authUrl) return;
-
-      const url = withSearchParam(authUrl, {
-        action: accountManagementActions.sessionEnd,
-        device_id: deviceId,
-      });
+      const url = getAccountManagementUrl(
+        authMetadata,
+        accountManagementActions.sessionEnd,
+        deviceId
+      );
+      if (!url) return;
       if (isTauri()) {
         import('@tauri-apps/plugin-opener')
           .then(({ openUrl }) => openUrl(url))
@@ -159,7 +153,7 @@ export function OtherDevices({ devices, refreshDeviceList, showVerification }: O
     <>
       <Box direction="Column" gap="100">
         <Text size="L400">Others</Text>
-        {authMetadata && (
+        {authMetadata?.account_management_uri && (
           <SequenceCard
             className={SequenceCardStyle}
             variant="SurfaceVariant"
@@ -204,13 +198,13 @@ export function OtherDevices({ devices, refreshDeviceList, showVerification }: O
                 refreshDeviceList={refreshDeviceList}
                 disabled={deleting}
                 options={
-                  authMetadata ? (
+                  authMetadata?.account_management_uri ? (
                     <DeviceDeleteBtn
                       deviceId={device.device_id}
                       deleted={false}
                       onDeleteToggle={handleDeleteOIDC}
                     />
-                  ) : (
+                  ) : authMetadata ? undefined : (
                     <DeviceDeleteBtn
                       deviceId={device.device_id}
                       deleted={deleted.has(device.device_id)}

src/app/features/settings/devices/Verification.tsx

@@ -35,8 +35,7 @@ import {
 } from '$components/DeviceVerificationSetup';
 import { stopPropagation } from '$utils/keyboard';
 import { useAuthMetadata } from '$hooks/useAuthMetadata';
-import { withSearchParam } from '$pages/pathUtils';
-import { useAccountManagementActions } from '$hooks/useAccountManagement';
+import { getAccountManagementUrl, useAccountManagementActions } from '$hooks/useAccountManagement';
 
 type VerificationStatusBadgeProps = {
   verificationStatus: VerificationStatus;
@@ -273,11 +272,8 @@ export function DeviceVerificationOptions() {
   const handleReset = () => {
     setMenuCords(undefined);
 
-    if (authMetadata) {
-      const authUrl = authMetadata.account_management_uri ?? authMetadata.issuer;
-      const url = withSearchParam(authUrl, {
-        action: accountManagementActions.crossSigningReset,
-      });
+    const url = getAccountManagementUrl(authMetadata, accountManagementActions.crossSigningReset);
+    if (url) {
       if (isTauri()) {
         import('@tauri-apps/plugin-opener')
           .then(({ openUrl }) => openUrl(url))

src/app/hooks/useAccountManagement.ts

@@ -1,4 +1,20 @@
 import { useMemo } from 'react';
+import type { ValidatedAuthMetadata } from '$types/matrix-sdk';
+
+export const getAccountManagementUrl = (
+  metadata: ValidatedAuthMetadata | undefined,
+  action: string,
+  deviceId?: string
+): string | undefined => {
+  if (!metadata?.account_management_uri) return undefined;
+
+  const url = new URL(metadata.account_management_uri);
+  if (metadata.account_management_actions_supported?.includes(action)) {
+    url.searchParams.set('action', action);
+    if (deviceId) url.searchParams.set('device_id', deviceId);
+  }
+  return url.toString();
+};
 
 export const useAccountManagementActions = () => {
   const actions = useMemo(

src/app/hooks/useAuthFlows.ts

@@ -3,7 +3,7 @@ import type {
   IAuthData,
   MatrixError,
   ILoginFlowsResponse,
-  OidcClientConfig,
+  ValidatedAuthMetadata,
 } from '$types/matrix-sdk';
 
 export enum RegisterFlowStatus {
@@ -48,7 +48,7 @@ export const parseRegisterErrResp = (matrixError: MatrixError): RegisterFlowsRes
 export type AuthFlows = {
   loginFlows: ILoginFlowsResponse;
   registerFlows: RegisterFlowsResponse;
-  authMetadata?: OidcClientConfig;
+  authMetadata?: ValidatedAuthMetadata;
 };
 
 const AuthFlowsContext = createContext<AuthFlows | null>(null);

src/app/pages/App.tsx

@@ -18,6 +18,7 @@ import { createRouter } from './Router';
 import { isReactQueryDevtoolsEnabled } from './reactQueryDevtoolsGate';
 import { bootstrapSettingsStore } from '$state/settings';
 import { AppShell } from '$components/app-shell';
+import { normalizeOAuthCallbackUrl } from '$utils/oauthCallback';
 
 const queryClient = new QueryClient();
 const ReactQueryDevtools = lazy(async () => {
@@ -32,6 +33,7 @@ type BootstrappedAppShellProps = {
 };
 
 function BootstrappedAppShell({ clientConfig, screenSize }: BootstrappedAppShellProps) {
+  normalizeOAuthCallbackUrl(clientConfig.hashRouter);
   const jotaiStoreRef = useRef<ReturnType<typeof createStore>>();
   if (!jotaiStoreRef.current) {
     jotaiStoreRef.current = createStore();

src/app/pages/Router.tsx

@@ -176,6 +176,7 @@ export const createRouter = (clientConfig: ClientConfig, screenSize: ScreenSize)
           if (url.searchParams.get('addAccount') === '1') return null;
           if (url.searchParams.has('loginToken')) return null;
           if (url.searchParams.has('code') && url.searchParams.has('state')) return null;
+          if (url.searchParams.has('error') && url.searchParams.has('state')) return null;
           if (hasStoredSession()) return redirect(getHomePath());
           return null;
         }}

src/app/pages/TauriDeepLinkBridge.tsx

@@ -5,9 +5,9 @@ import { createLogger } from '$utils/debug';
 import {
   parseTauriOidcCallback,
   parseTauriSsoCallback,
-  takeTauriOidcServer,
   takeTauriSsoNonce,
 } from '$pages/auth/SSOTauri';
+import { getOauthContextServer } from '$pages/auth/login/oidcLoginUtil';
 import { getLoginPath, withSearchParam } from './pathUtils';
 
 const log = createLogger('TauriDeepLinkBridge');
@@ -27,10 +27,20 @@ export const mapDeepLinkToLoginPath = (rawUrl: string): string | undefined => {
 
   const oidcCallback = parseTauriOidcCallback(rawUrl);
   if (oidcCallback) {
-    return withSearchParam(getLoginPath(takeTauriOidcServer()), {
-      code: oidcCallback.code,
-      state: oidcCallback.state,
-    });
+    const loginPath = getLoginPath(getOauthContextServer(oidcCallback.state));
+    return 'code' in oidcCallback
+      ? withSearchParam(loginPath, {
+          code: oidcCallback.code,
+          state: oidcCallback.state,
+        })
+      : withSearchParam(loginPath, {
+          error: oidcCallback.error,
+          ...(oidcCallback.errorDescription
+            ? { error_description: oidcCallback.errorDescription }
+            : {}),
+          ...(oidcCallback.errorUri ? { error_uri: oidcCallback.errorUri } : {}),
+          state: oidcCallback.state,
+        });
   }
 
   return undefined;