@ethora/chat-component-rn 26.6.11 → 26.6.13

package/src/helpers/secureFileUrl.ts

@@ -0,0 +1,103 @@
+import { store } from '../roomStore';
+import { getCurrentBaseURL } from '../networking/apiClient';
+import { refreshAuthTokens } from '../networking/authRefresh';
+
+const SECURE_FILES_HOST_PREFIX = 'secure-files.';
+const SECURE_MEDIA_PATH_PREFIX = '/secure-media/';
+
+const FILE_TOKEN_PARAM = 'ft';
+
+export const resolveFileUrl = (url?: string | null): string => {
+  if (!url) {return '';}
+  // Any scheme at all — http(s), data, file, content, blob.
+  if (/^[a-z][a-z0-9+.-]*:/i.test(url)) {return url;}
+  if (!url.startsWith('/')) {return url;}
+
+  const base = getCurrentBaseURL().replace(/\/+$/, '');
+  return base ? `${base}${url}` : url;
+};
+
+export const isSecureFileUrl = (url?: string | null): boolean => {
+  if (!url) {return false;}
+
+  const path = url.replace(/^[a-z][a-z0-9+.-]*:\/\/[^/]*/i, '');
+  if (path.startsWith(SECURE_MEDIA_PATH_PREFIX)) {return true;}
+
+  const match = /^https?:\/\/(?:[^@/]+@)?([^:/?#]+)/i.exec(url);
+  if (!match) {return false;}
+  return match[1].toLowerCase().startsWith(SECURE_FILES_HOST_PREFIX);
+};
+
+export const appendFileToken = (
+  url: string | null | undefined,
+  fileToken: string | null | undefined
+): string => {
+  if (!url) {return '';}
+
+  const resolved = resolveFileUrl(url);
+  if (!fileToken || !isSecureFileUrl(resolved)) {return resolved;}
+  url = resolved;
+
+  const hashIndex = url.indexOf('#');
+  const hash = hashIndex === -1 ? '' : url.slice(hashIndex);
+  const withoutHash = hashIndex === -1 ? url : url.slice(0, hashIndex);
+
+  const queryIndex = withoutHash.indexOf('?');
+  const base = queryIndex === -1 ? withoutHash : withoutHash.slice(0, queryIndex);
+  const query = queryIndex === -1 ? '' : withoutHash.slice(queryIndex + 1);
+
+  const params = query
+    .split('&')
+    .filter(Boolean)
+    .filter((pair) => pair.split('=')[0] !== FILE_TOKEN_PARAM);
+
+  params.push(`${FILE_TOKEN_PARAM}=${encodeURIComponent(fileToken)}`);
+
+  return `${base}?${params.join('&')}${hash}`;
+};
+
+export const withFileToken = (url?: string | null): string =>
+  appendFileToken(
+    url,
+    store.getState().chatSettingStore?.user?.fileToken || ''
+  );
+
+const RECOVERY_COOLDOWN_MS = 30_000;
+let recoveryInFlight: Promise<boolean> | null = null;
+let lastRecoveryAt = 0;
+
+export const requestFileTokenRecovery = (): Promise<boolean> => {
+  if (recoveryInFlight) {return recoveryInFlight;}
+
+  const now = Date.now();
+  if (now - lastRecoveryAt < RECOVERY_COOLDOWN_MS) {
+    return Promise.resolve(false);
+  }
+  lastRecoveryAt = now;
+
+  const state = store.getState();
+  const refreshConfig = state.chatSettingStore?.config?.refreshTokens;
+  const user = state.chatSettingStore?.user;
+
+  if (!refreshConfig?.enabled) {return Promise.resolve(false);}
+
+  const run = async (): Promise<boolean> => {
+    if (!refreshConfig.refreshFunction && !user?.refreshToken) {return false;}
+
+    const tokens = await refreshAuthTokens();
+    return Boolean(tokens.fileToken);
+  };
+
+  recoveryInFlight = run()
+    .catch(() => false)
+    .finally(() => {
+      recoveryInFlight = null;
+    });
+
+  return recoveryInFlight;
+};
+
+export const __resetFileTokenRecoveryForTests = (): void => {
+  recoveryInFlight = null;
+  lastRecoveryAt = 0;
+};

package/src/hooks/useChatWrapperInit.ts

@@ -10,7 +10,7 @@ import { chatAutoEnterer } from '../helpers/chatAutoEnterer';
 import { initRoomsPresence } from '../helpers/initRoomsPresence';
 import { updatedChatLastTimestamps } from '../helpers/updatedChatLastTimestamps';
 import { updateMessagesTillLast } from '../helpers/updateMessagesTillLast';
-import { refresh } from '../networking/apiClient';
+import { refreshAuthTokensQuietly } from '../networking/authRefresh';
 import { setLangSource, setConfig } from '../roomStore/chatSettingsSlice';
 import { setIsLoading } from '../roomStore/roomsSlice';
 import { useRoomState } from './useRoomState';
@@ -179,7 +179,7 @@ const useChatWrapperInit = ({
               }
 
               {
-                config?.refreshTokens?.enabled && refresh();
+                config?.refreshTokens?.enabled && refreshAuthTokensQuietly();
               }
             } catch (error) {
               console.error(' Error during initialization', error);
@@ -233,7 +233,7 @@ const useChatWrapperInit = ({
               setConnectionLost(false);
             }
             {
-              config?.refreshTokens?.enabled && refresh();
+              config?.refreshTokens?.enabled && refreshAuthTokensQuietly();
             }
           }
         }

package/src/hooks/useFileToken.ts

@@ -0,0 +1,7 @@
+import { useSelector } from 'react-redux';
+import { RootState } from '../roomStore';
+
+export const useFileToken = (): string =>
+  useSelector(
+    (state: RootState) => state.chatSettingStore.user?.fileToken || ''
+  );

package/src/hooks/useSendMessage.tsx

@@ -9,7 +9,7 @@ import {
   clearMessageFailure,
   markMessageFailed,
 } from '../roomStore/roomHeapSlice';
-import { uploadFileMultipart } from '../networking/api-requests/auth.api';
+import { uploadFileV2 } from '../networking/api-requests/auth.api';
 import { enqueueOutboundSend } from '../networking/outboundQueue';
 import { RootState, store } from '../roomStore';
 import { getGlobalXmppClient } from '../utils/clientRegistry';
@@ -182,13 +182,34 @@ export const useSendMessage = (_configOverride?: IConfig) => {
       // PENDING_WATCHDOG_MS, flip the bubble to "failed → tap to
       // retry". We check at fire-time whether the message is still
       // pending and not already marked failed by the catch path.
-      const watchdogTimer = setTimeout(() => {
+      // One-shot extension for the case below. Declared outside the
+      // timer so the rescheduled run can't extend again.
+      let watchdogExtended = false;
+      const runWatchdog = () => {
         const state = reduxStore.getState();
         const roomMsgs = state.rooms?.rooms?.[activeRoomJID]?.messages || [];
         const stillPending = roomMsgs.find(
           (m: any) => m.id === optimisticId && m.pending
         );
         const alreadyFailed = state.roomHeapSlice?.failedMessages?.[optimisticId];
+
+        // Don't call it a failure while the stream is still coming back.
+        // A reconnect tears the old client down and builds a new one, and
+        // any echo in flight during that window is simply lost — the
+        // message may well have been delivered (it has been observed
+        // arriving twice on the receiving side). Failing it here shows a
+        // red "tap to retry" under a message that actually went through.
+        // Give the reconnect one more window to produce an echo, once.
+        const streamOnline = getGlobalXmppClient()?.status === 'online';
+        if (stillPending && !alreadyFailed && !streamOnline && !watchdogExtended) {
+          watchdogExtended = true;
+          console.warn(
+            `Send watchdog — ${optimisticId} still pending but the stream is not online; extending one window`
+          );
+          watchdogTimer = setTimeout(runWatchdog, PENDING_WATCHDOG_MS);
+          return;
+        }
+
         if (stillPending && !alreadyFailed) {
           console.warn(
             `Send watchdog fired — message ${optimisticId} stuck pending > ${PENDING_WATCHDOG_MS}ms; marking failed`
@@ -211,7 +232,9 @@ export const useSendMessage = (_configOverride?: IConfig) => {
             messageType: 'text',
           });
         }
-      }, PENDING_WATCHDOG_MS);
+      };
+
+      let watchdogTimer = setTimeout(runWatchdog, PENDING_WATCHDOG_MS);
 
       try {
         // The single send closure, used both for the immediate send and for
@@ -467,19 +490,11 @@ export const useSendMessage = (_configOverride?: IConfig) => {
         name: data?.name || data?.fileName || `media_${Date.now()}`,
       };
 
-      // Mirror the web client: a single multipart POST to /files/ with
-      // the file under the plural "files" field. We send it via fetch
-      // (not axios) because RN's fetch sets the multipart boundary on the
-      // Content-Type header correctly. The previous axios fallback omitted
-      // a valid boundary, so the server mis-parsed one file as many and
-      // rejected the request with HTTP 413 "TOO_MANY_FILES". The only
-      // retry is the documented singular-"file" fallback for deployments
-      // that 500 on the plural field (bug #10).
       const tryUpload = async () => {
         const fd = new FormData();
         fd.append('files', fileBlob as any);
         try {
-          return await uploadFileMultipart(fd);
+          return await uploadFileV2(fd, activeRoomJID);
         } catch (err: any) {
           if (err?.response?.status === 500) {
             console.warn(
@@ -488,7 +503,7 @@ export const useSendMessage = (_configOverride?: IConfig) => {
             );
             const fd2 = new FormData();
             fd2.append('file', fileBlob as any);
-            return await uploadFileMultipart(fd2);
+            return await uploadFileV2(fd2, activeRoomJID);
           }
           throw err;
         }

package/src/main.ts

@@ -7,7 +7,10 @@
  *
  *   <Chat
  *     config={{
- *       baseUrl: 'https://api.chat.ethora.com/v1',
+ *       // The API ROOT — the SDK versions every path itself
+ *       // (`/v1/...`, `/v2/...`). A legacy `.../v1` is accepted and
+ *       // normalised, so existing integrations keep working.
+ *       baseUrl: 'https://api.chat.ethora.com',
  *       xmppSettings: { host: 'xmpp.chat.ethora.com' },
  *       jwtLogin: { enabled: true, token: '<paste JWT>' },
  *       initBeforeLoad: true,
@@ -66,3 +69,21 @@ export type {
 } from './types/types';
 export type { Iso639_1Codes } from './types/models/language.model';
 export type { TranslateMode } from './utils/translateModePolicy';
+
+// Auth-token rotation. Exposed so hosts can drive a refresh themselves
+// (it is deduped and shares the SDK's lock) and, more importantly, so
+// they can tell a dead session from a transient failure: only
+// `RefreshFatalError` means "log the user out". Every other rejection —
+// network, 5xx, a lost REFRESH_IN_PROGRESS race — must leave the
+// session alone.
+export {
+  refreshAuthTokens,
+  refreshAuthTokensQuietly,
+  RefreshFatalError,
+  isRefreshFatalError,
+} from './networking/authRefresh';
+export type {
+  RefreshErrorCode,
+  RefreshResult,
+  RefreshOptions,
+} from './networking/authRefresh';

package/src/networking/api-requests/auth.api.ts

@@ -18,8 +18,9 @@ export async function loginEmail(email: string, password: string) {
     user: User;
     refreshToken: string;
     token: string;
+    fileToken?: string;
   }>(
-    '/users/login-with-email',
+    '/v1/users/login-with-email',
     {
       email,
       password,
@@ -29,6 +30,16 @@ export async function loginEmail(email: string, password: string) {
 
   console.log('loginEmail res', res.data);
 
+  // The fileToken arrives at the TOP level of the login response, next to
+  // token/refreshToken — not inside `user`. Folding it in here is what
+  // makes secure media (`secure-files.*`, uploaded via /v2/files/secure)
+  // render at all: without it every such image 403s and the bubble comes
+  // up blank.
+  res.data.user = {
+    ...res.data.user,
+    fileToken: res.data.fileToken || '',
+  };
+
   return res;
 }
 
@@ -39,7 +50,7 @@ export function loginSocial(
   authToken: string = 'authToken'
 ) {
   return http.post<any>(
-    '/users/login',
+    '/v1/users/login',
     {
       idToken,
       accessToken,
@@ -58,7 +69,7 @@ export function registerSocial(
   signUpPlan?: string
 ) {
   return http.post(
-    '/users',
+    '/v1/users',
     {
       idToken,
       accessToken,
@@ -72,7 +83,7 @@ export function registerSocial(
 
 export function checkEmailExist(email: string) {
   return http.get(
-    '/users/checkEmail/' + email,
+    '/v1/users/checkEmail/' + email,
 
     { headers: { Authorization: getCurrentAppToken() } }
   );
@@ -84,7 +95,8 @@ export async function loginViaJwt(clientToken: string): Promise<User> {
     user: User;
     refreshToken: string;
     token: string;
-  }>('/users/client', null, { headers: { 'x-custom-token': clientToken } });
+    fileToken?: string;
+  }>('/v1/users/client', null, { headers: { 'x-custom-token': clientToken } });
 
   console.log('✅ loginViaJwt: Received response', {
     hasUser: !!response.data.user,
@@ -103,6 +115,8 @@ export async function loginViaJwt(clientToken: string): Promise<User> {
     ...response.data.user,
     refreshToken: response.data.refreshToken,
     token: response.data.token,
+    // Top-level, same as loginEmail — see the note there.
+    fileToken: response.data.fileToken || '',
   };
 
   return user;
@@ -131,7 +145,7 @@ export async function loginViaJwt(clientToken: string): Promise<User> {
 
 export function uploadFile(formData: FormData) {
   const token = store.getState().chatSettingStore?.user?.token ?? '';
-  return http.post('/files/', formData, {
+  return http.post('/v1/files/', formData, {
     headers: {
       Authorization: token,
       Accept: '*/*',
@@ -144,79 +158,91 @@ export function uploadFile(formData: FormData) {
   });
 }
 
-const UPLOAD_PATH = '/files/';
-
-/**
- * Multipart upload of a picked file, sent over `XMLHttpRequest`.
- *
- * The transport matters here, and both obvious alternatives are wrong:
- *
- *   - `fetch`. Expo SDK 54 shipped a WinterCG-compliant fetch and SDK 57
- *     installs it as the GLOBAL fetch. It accepts only `Blob` / `File` /
- *     string form parts, so React Native's own `{ uri, type, name }` part
- *     — which is exactly what an image/document picker hands us — is
- *     rejected with "Unsupported FormDataPart implementation", surfacing
- *     to the caller as ERR_NETWORK. A host can set
- *     `EXPO_PUBLIC_USE_RN_FETCH=1`, but that opts their whole app out of
- *     Expo's fetch just to satisfy this SDK; not a cost we get to impose
- *     on a consumer.
- *   - axios. It forces its own `Content-Type: multipart/form-data`
- *     WITHOUT a boundary, so the server mis-parses one file as many and
- *     answers HTTP 413 TOO_MANY_FILES (bug #10 — this is why the upload
- *     was moved off axios in the first place).
- *
- * `XMLHttpRequest` avoids both. Expo replaces `fetch`, not `XHR`, so the
- * request still goes through React Native's native networking module,
- * which understands the `{ uri, type, name }` part, streams the file
- * straight from disk (a 50MB video never lands in JS memory) and writes
- * its own `Content-Type` with a valid boundary — which is precisely why
- * we must NOT set that header ourselves below.
- */
-export function uploadFileMultipart(formData: FormData): Promise<{ data: any }> {
+const SECURE_UPLOAD_PATH = '/v2/files/secure';
+const LEGACY_UPLOAD_PATH = '/v1/files/';
+
+const cloneFormData = (formData: FormData): FormData => {
+  const copy = new FormData();
+  const source = formData as any;
+
+  if (Array.isArray(source?._parts)) {
+    for (const [key, value] of source._parts) {
+      copy.append(key, value);
+    }
+    return copy;
+  }
+
+  if (typeof source?.forEach === 'function') {
+    source.forEach((value: any, key: string) => copy.append(key, value));
+    return copy;
+  }
+
+  if (typeof source?.getParts === 'function') {
+    for (const part of source.getParts()) {
+      // `headers` is derived by getParts() and must not be copied back —
+      // RN regenerates it from the value.
+      const { fieldName, string, headers: _headers, ...file } = part;
+      copy.append(fieldName, string !== undefined ? string : file);
+    }
+  }
+
+  return copy;
+};
+
+function postMultipart(
+  url: string,
+  body: FormData,
+  path: string
+): Promise<{ data: any }> {
   const token = store.getState().chatSettingStore?.user?.token ?? '';
-  const baseUrl = getCurrentBaseURL();
-  const url = `${baseUrl.replace(/\/$/, '')}${UPLOAD_PATH}`;
 
   pushLog('http', `→ POST ${url} (xhr)`, {
-    headers: { Authorization: token ? token.slice(0, 16) + '…' : '[empty]', Accept: '*/*' },
+    path,
+    baseUrl: getCurrentBaseURL() || '[empty]',
+    headers: {
+      Authorization: token ? token.slice(0, 16) + '…' : '[empty]',
+      Accept: '*/*',
+    },
   });
 
   return new Promise((resolve, reject) => {
     const xhr = new XMLHttpRequest();
 
     const failNetwork = (reason: string) => {
-      pushLog('http', `← ERR xhr ${UPLOAD_PATH}`, { reason });
+      pushLog('http', `← ERR xhr ${path}`, { reason, url });
       const err: any = new Error(reason);
       err.code = 'ERR_NETWORK';
-      err.config = { url: UPLOAD_PATH };
+      err.config = { url: path };
       reject(err);
     };
 
     xhr.onload = () => {
       const status = xhr.status;
-      let body: any = null;
+      let responseBody: any = null;
       try {
-        body = JSON.parse(xhr.responseText);
+        responseBody = JSON.parse(xhr.responseText);
       } catch {
-        body = xhr.responseText || null;
+        responseBody = xhr.responseText || null;
       }
 
       if (status < 200 || status >= 300) {
-        pushLog('http', `← ${status} POST ${UPLOAD_PATH} (xhr)`, body);
+        pushLog('http', `← ${status} POST ${path} (xhr)`, responseBody);
         const err: any = new Error(`Upload failed: ${status}`);
         // Shaped like an axios error so callers' `err.response.status`
         // checks keep working — notably useSendMessage's retry with the
         // singular "file" field on 500.
-        err.response = { status, statusText: xhr.statusText, data: body };
-        err.config = { url: UPLOAD_PATH };
+        err.response = { status, statusText: xhr.statusText, data: responseBody };
+        err.config = { url: path };
         reject(err);
         return;
       }
 
-      pushLog('http', `← ${status} POST ${UPLOAD_PATH} (xhr)`, {
-        resultsCount: Array.isArray(body?.results) ? body.results.length : 'n/a',
+      pushLog('http', `← ${status} POST ${path} (xhr)`, {
+        resultsCount: Array.isArray(responseBody?.results)
+          ? responseBody.results.length
+          : 'n/a',
       });
-      resolve({ data: body });
+      resolve({ data: responseBody });
     };
 
     xhr.onerror = () => failNetwork('Network request failed');
@@ -226,8 +252,55 @@ export function uploadFileMultipart(formData: FormData): Promise<{ data: any }>
     xhr.open('POST', url);
     xhr.setRequestHeader('Authorization', token);
     xhr.setRequestHeader('Accept', '*/*');
-    // Deliberately no Content-Type — see the note above: RN fills it in
-    // along with the multipart boundary it generated.
-    xhr.send(formData as any);
+    // Deliberately no Content-Type — see the note above.
+    xhr.send(body as any);
   });
 }
+
+const canFallBackToLegacyUpload = (error: unknown): boolean => {
+  const status = (error as { response?: { status?: number } })?.response
+    ?.status;
+  if (typeof status !== 'number') {return true;}
+  return status !== 401 && status !== 413;
+};
+
+let secureUploadUnavailable = false;
+
+export async function uploadFileV2(
+  formData: FormData,
+  activeRoomJID: string
+): Promise<{ data: any }> {
+  const chatName = (activeRoomJID || '').split('@')[0];
+  const apiRoot = getCurrentBaseURL().replace(/\/$/, '');
+
+  if (!secureUploadUnavailable && chatName) {
+    const body = cloneFormData(formData);
+    body.append('chatName', chatName);
+
+    try {
+      return await postMultipart(
+        `${apiRoot}${SECURE_UPLOAD_PATH}`,
+        body,
+        SECURE_UPLOAD_PATH
+      );
+    } catch (error) {
+      if (!canFallBackToLegacyUpload(error)) {throw error;}
+
+      secureUploadUnavailable = true;
+      console.warn(
+        `[chat] ${SECURE_UPLOAD_PATH} unreachable, falling back to ${LEGACY_UPLOAD_PATH} for this session`,
+        error
+      );
+    }
+  }
+
+  return postMultipart(
+    `${apiRoot}${LEGACY_UPLOAD_PATH}`,
+    formData,
+    LEGACY_UPLOAD_PATH
+  );
+}
+
+export const __resetSecureUploadLatchForTests = (): void => {
+  secureUploadUnavailable = false;
+};

package/src/networking/api-requests/roomMembers.api.ts

@@ -7,7 +7,7 @@ export async function getUserByXmppUsername(
 ): Promise<RoomMember | null> {
   try {
     const res = await http.get<{ result: RoomMember }>(
-      `/apps/users/${xmppUsername}`,
+      `/v1/apps/users/${xmppUsername}`,
       {
         headers: { Authorization: token },
       }

package/src/networking/api-requests/rooms.api.ts

@@ -181,7 +181,7 @@ export async function getRooms(): Promise<{ items: ApiRoom[] }> {
 
   getRoomsInFlightToken = token;
   getRoomsInFlight = (async () => {
-    const response = await http.get('/chats/my', {
+    const response = await http.get('/v1/chats/my', {
       headers: { Authorization: token },
     });
     lastGetRoomsResponse = response.data;
@@ -206,7 +206,7 @@ export async function getRoomByName(chatName: string): Promise<ApiRoom> {
   const token = store.getState().chatSettingStore.user.token || '';
 
   try {
-    const response = await http.get(`/chats/my/${chatName}`, {
+    const response = await http.get(`/v1/chats/my/${chatName}`, {
       headers: {
         Authorization: token,
       },
@@ -221,7 +221,7 @@ export async function postRoom(data: PostRoom) {
   const token = store.getState().chatSettingStore.user.token || '';
 
   try {
-    const response = await http.post('/chats', data, {
+    const response = await http.post('/v1/chats', data, {
       headers: {
         Authorization: token,
       },
@@ -240,7 +240,7 @@ export async function postPrivateRoom(
 
   try {
     const response = await http.post(
-      '/chats/private',
+      '/v1/chats/private',
       { username },
       {
         headers: {
@@ -260,7 +260,7 @@ export async function postReportRoom(data: PostReportRoom) {
 
   try {
     const response = await http.post(
-      `/chats/reports/${chatName}`,
+      `/v1/chats/reports/${chatName}`,
       { category, text },
       {
         headers: {
@@ -282,7 +282,7 @@ export async function postAddRoomMember(
 
   try {
     const response = await http.post(
-      `/chats/users-access`,
+      `/v1/chats/users-access`,
       { chatName, members },
       {
         headers: {
@@ -301,7 +301,7 @@ export async function deleteRoomMember(data: DeleteRoomMember) {
   const token = store.getState().chatSettingStore.user.token || '';
 
   try {
-    const response = await http.delete(`/chats/users-access`, {
+    const response = await http.delete(`/v1/chats/users-access`, {
       headers: {
         Authorization: token,
       },
@@ -320,7 +320,7 @@ export async function deleteRoom(name: string) {
   const token = store.getState().chatSettingStore.user.token || '';
 
   try {
-    const response = await http.delete('/chats', {
+    const response = await http.delete('/v1/chats', {
       headers: {
         Authorization: token,
       },
@@ -360,7 +360,7 @@ export async function createChatCall(
 
   try {
     await http.post(
-      `/chats/call/create/${chatName}`,
+      `/v1/chats/call/create/${chatName}`,
       { kind },
       {
         headers: {