@ethora/chat-component-rn 26.6.12 → 26.6.13

package/src/components/MainComponents/ChatHeader.tsx

@@ -28,6 +28,8 @@ import { MODAL_TYPES } from '../../helpers/constants/MODAL_TYPES';
 import { RoomMenu } from '../MenuRoom/MenuRoom';
 import { useRoomState } from '../../hooks/useRoomState';
 import { useChatSettingState } from '../../hooks/useChatSettingState';
+import { useFileToken } from '../../hooks/useFileToken';
+import { appendFileToken } from '../../helpers/secureFileUrl';
 import { View, StyleSheet, Text, Keyboard } from 'react-native';
 import { getIconColor } from '../../helpers/getIconColor';
 import { resolveHeaderHeight } from '../../helpers/headerLayout';
@@ -43,6 +45,7 @@ const ChatHeader: React.FC<ChatHeaderProps> = ({
   currentRoom,
   handleBackClick,
 }) => {
+  const fileToken = useFileToken();
   const dispatch = useDispatch();
   const { client } = useXmppClient();
 
@@ -152,7 +155,7 @@ const ChatHeader: React.FC<ChatHeaderProps> = ({
             <ProfileImagePlaceholder
               name={currentRoom?.title || currentRoom?.name}
               size={40}
-              icon={currentRoom?.icon}
+              icon={appendFileToken(currentRoom?.icon, fileToken)}
               active={!config?.disableChatInfo?.disableChatHeaderMenu}
               click={
                 config?.disableChatInfo?.disableChatHeaderMenu

package/src/components/MainComponents/ChatWrapper.tsx

@@ -23,7 +23,7 @@ import {
   setIsLoading,
   setLastViewedTimestamp,
 } from '../../roomStore/roomsSlice';
-import {refresh} from '../../networking/apiClient';
+import {refreshAuthTokensQuietly} from '../../networking/authRefresh';
 import RoomList from './RoomList';
 import {StyledLoaderWrapper} from '../styled/StyledComponents';
 import Modal from '../Modals/Modal/Modal';
@@ -170,6 +170,16 @@ const ChatWrapper: FC<ChatWrapperProps> = ({
       );
     }
 
+    // Top-up rotation after the client is up. Deduped inside
+    // `refreshAuthTokensQuietly`, so it can no longer race the 401
+    // interceptor into a second, parallel rotation — which the backend
+    // would read as reuse. Never rejects, hence no `.catch` here.
+    const ensureFreshTokens = () => {
+      if (config?.refreshTokens?.enabled) {
+        refreshAuthTokensQuietly();
+      }
+    };
+
     const initXmmpClient = async () => {
       // Only sync config to redux if we have one — passing `undefined`
       // wipes whatever XmppProvider already set up.
@@ -252,14 +262,7 @@ const ChatWrapper: FC<ChatWrapperProps> = ({
             devPushLog('warn', 'initializeClient failed (legacy path)', err);
           }
           setInited(true);
-          if (config?.refreshTokens?.enabled) {
-            // refresh() is fire-and-forget but rejects on bad
-            // refreshToken / network — surface via .catch instead of
-            // leaving the rejection unhandled (was bug #4, id:2).
-            refresh().catch((err) =>
-              console.warn('refresh failed', err)
-            );
-          }
+          ensureFreshTokens();
         } else if (storedClient) {
           devPushLog('rn', 'ChatWrapper: reusing storedClient');
           setClient(storedClient);
@@ -274,11 +277,7 @@ const ChatWrapper: FC<ChatWrapperProps> = ({
               .catch((err: unknown) => console.warn('getRoomsStanza failed', err));
           }
           setInited(true);
-          if (config?.refreshTokens?.enabled) {
-            refresh().catch((err) =>
-              console.warn('refresh failed', err)
-            );
-          }
+          ensureFreshTokens();
         } else if (client) {
           devPushLog('rn', 'ChatWrapper: reusing provider client');
           if (!activeRoomJID) {
@@ -295,11 +294,7 @@ const ChatWrapper: FC<ChatWrapperProps> = ({
             console.warn('getChatsPrivateStoreRequestStanza failed', err)
           );
           setInited(true);
-          if (config?.refreshTokens?.enabled) {
-            refresh().catch((err) =>
-              console.warn('refresh failed', err)
-            );
-          }
+          ensureFreshTokens();
         }
 
         dispatch(setIsLoading({loading: false}));

package/src/components/MainComponents/LoginWrapper.tsx

@@ -36,6 +36,7 @@ const LoginWrapper: React.FC<LoginWrapperProps> = ({...props}) => {
         ...authData.data.user,
         token: authData.data.token,
         refreshToken: authData.data.refreshToken,
+        fileToken: (authData.data as any).fileToken || '',
       };
     } catch (error) {
       console.error('Login failed:', error);

package/src/components/MainComponents/MediaMessage.tsx

@@ -15,6 +15,8 @@ import { deriveDisplayFilename, isLikelyAudio } from '../../helpers/mimeToExtens
 import { FileIcon, PlayIcon } from '../../assets/icons';
 import { defaultMediaDims } from '../../helpers/mediaDimensions';
 import { useChatSettingState } from '../../hooks/useChatSettingState';
+import { useFileToken } from '../../hooks/useFileToken';
+import { appendFileToken } from '../../helpers/secureFileUrl';
 
 interface MediaMessageProps {
   mimeType?: string;
@@ -136,22 +138,26 @@ const PendingMediaMessage: React.FC<{
 
 const MediaMessage: React.FC<MediaMessageProps> = ({
   mimeType,
-  location,
-  messageText,
+  location: rawLocation,
+  messageText: rawMessageText,
   message,
   isUser,
 }) => {
+  const fileToken = useFileToken();
+  const location = appendFileToken(rawLocation, fileToken);
+  const messageText = appendFileToken(rawMessageText, fileToken);
+
   if (mimeType) {
     const displayName = deriveDisplayFilename({
       fileName: message?.fileName,
       originalName: (message as any)?.originalName,
-      url: location || messageText,
+      url: rawLocation || rawMessageText,
       mime: mimeType,
     });
     const isAudioPayload = isLikelyAudio(
       mimeType,
       displayName,
-      location,
+      rawLocation,
       {
         duration: (message as any)?.duration,
         waveForm: (message as any)?.waveForm,
@@ -174,7 +180,11 @@ const MediaMessage: React.FC<MediaMessageProps> = ({
         return (
           <CustomMessageImage
             fileName={displayName}
+            // Full-size original: opened by the preview modal.
             fileURL={location || messageText || ''}
+            // ...and the thumbnail the bubble actually renders, which is
+            // what the web client shows too.
+            locationPreview={messageText}
             mimetype={mimeType}
           />
         );

package/src/components/Modals/ChatProfileModal/ChatProfileModal.tsx

@@ -1,4 +1,6 @@
 import React, { useEffect, useMemo, useState } from 'react';
+import { useFileToken } from '../../../hooks/useFileToken';
+import { appendFileToken } from '../../../helpers/secureFileUrl';
 import {
   CenterContainer,
   UserInfo,
@@ -69,6 +71,7 @@ const ChatProfileModal: React.FC<ChatProfileModalProps> = ({
   const { client } = useXmppClient();
   const { user: stateUser, config } = useChatSettingState();
   const activeRoom = useSelector((state: RootState) => getActiveRoom(state));
+  const fileToken = useFileToken();
 
   // Pull live member list from the MUC when the modal opens — REST
   // hydration only fills the *count* (item.participants /
@@ -295,7 +298,7 @@ const ChatProfileModal: React.FC<ChatProfileModalProps> = ({
       <CenterContainer>
         <ProfileImagePlaceholder
           name={activeRoom.title || activeRoom.name}
-          icon={activeRoom.icon}
+          icon={appendFileToken(activeRoom.icon, fileToken)}
           // Two gates control whether the icon is editable:
           //   1. role — only non-participants could edit before.
           //   2. NEW: `disableChatInfo.disableIconEdit` — hard kill from

package/src/components/Modals/FilePreviewModal/FilePreviewModal.tsx

@@ -1,4 +1,5 @@
 import React, { useEffect, useRef, useState } from 'react';
+import { withFileToken } from '../../../helpers/secureFileUrl';
 import styled from 'styled-components/native';
 import {
   CenterContainer,
@@ -154,7 +155,7 @@ const FilePreviewModal: React.FC<FilePreviewModalProps> = ({
       );
 
       const filePath = FileSystem.cacheDirectory + fileName;
-      const download = await FileSystem.downloadAsync(activeFile.fileURL, filePath);
+      const download = await FileSystem.downloadAsync(withFileToken(activeFile.fileURL), filePath);
 
       if (download.status === 200) {
         await MediaLibrary.saveToLibraryAsync(download.uri);
@@ -179,7 +180,7 @@ const FilePreviewModal: React.FC<FilePreviewModalProps> = ({
         activeFile.mimetype
       );
       const filePath = FileSystem.cacheDirectory + fileName;
-      const download = await FileSystem.downloadAsync(activeFile.fileURL, filePath);
+      const download = await FileSystem.downloadAsync(withFileToken(activeFile.fileURL), filePath);
 
       if (download.status !== 200) {
         Alert.alert('Error', 'Failed to save the file.');
@@ -272,7 +273,7 @@ const FilePreviewModal: React.FC<FilePreviewModalProps> = ({
           <FullScreenImage
             source={{
               uri:
-                activeFile.fileURL ||
+                withFileToken(activeFile.fileURL) ||
                 'https://as2.ftcdn.net/v2/jpg/02/51/95/53/1000_F_251955356_FAQH0U1y1TZw3ZcdPGybwUkH90a3VAhb.jpg',
             }}
             resizeMode="contain"
@@ -280,7 +281,7 @@ const FilePreviewModal: React.FC<FilePreviewModalProps> = ({
           />
         );
       case activeFile.mimetype.startsWith('video/'):
-        return <ModalVideo uri={activeFile.fileURL} />;
+        return <ModalVideo uri={withFileToken(activeFile.fileURL)} />;
       case activeFile.mimetype.includes('application/octet-stream'):
         return (
           <View
@@ -296,7 +297,7 @@ const FilePreviewModal: React.FC<FilePreviewModalProps> = ({
               Voice message
             </Text>
             <AudioMessage
-              src={activeFile.fileURL}
+              src={withFileToken(activeFile.fileURL)}
               mimeType={activeFile.mimetype}
               fileName={activeFile.fileName}
               originalName={activeFile.originalName}
@@ -336,7 +337,7 @@ const FilePreviewModal: React.FC<FilePreviewModalProps> = ({
               )}
             </Text>
             <AudioMessage
-              src={activeFile.fileURL}
+              src={withFileToken(activeFile.fileURL)}
               mimeType={activeFile.mimetype}
               fileName={activeFile.fileName}
               originalName={activeFile.originalName}
@@ -346,7 +347,7 @@ const FilePreviewModal: React.FC<FilePreviewModalProps> = ({
           </View>
         );
       case activeFile.mimetype === 'application/pdf':
-        return <PdfViewer pdfUrl={activeFile.fileURL} />;
+        return <PdfViewer pdfUrl={withFileToken(activeFile.fileURL)} />;
       default: {
         const displayName = ensureFilenameHasExtension(
           activeFile.fileName,

package/src/components/Modals/FilePreviewModal/PdfView.tsx

@@ -1,4 +1,5 @@
 import React, { useEffect, useState } from 'react';
+import { withFileToken } from '../../../helpers/secureFileUrl';
 import { ActivityIndicator, Platform, StyleSheet, Text, View } from 'react-native';
 import { WebView } from 'react-native-webview';
 import * as FileSystem from 'expo-file-system/legacy';
@@ -25,7 +26,7 @@ const PdfViewer: React.FC<PdfViewerProps> = ({ pdfUrl }) => {
     const run = async () => {
       try {
         const target = FileSystem.cacheDirectory + `pdf-${Date.now()}.pdf`;
-        const result = await FileSystem.downloadAsync(pdfUrl, target);
+        const result = await FileSystem.downloadAsync(withFileToken(pdfUrl), target);
         if (cancelled) {return;}
         setLocalUri(result.uri);
       } catch (e: any) {

package/src/components/RoomComponents/ChatRoomItem.tsx

@@ -1,4 +1,6 @@
 import React, { useMemo } from 'react';
+import { useFileToken } from '../../hooks/useFileToken';
+import { appendFileToken } from '../../helpers/secureFileUrl';
 import { IConfig, IRoom } from '../../types/types';
 import { ProfileImagePlaceholder } from '../MainComponents/ProfileImagePlaceholder';
 import {
@@ -26,6 +28,8 @@ const ChatRoomItem: React.FC<ChatRoomItemProps> = ({
   isDriver,
   config,
 }) => {
+  // Room icons can live on the membership-gated secure-files host.
+  const fileToken = useFileToken();
   const displayName = String(chat?.title || chat?.name || '').trim();
 
   const lastMessage = useMemo(() => {
@@ -86,7 +90,11 @@ const ChatRoomItem: React.FC<ChatRoomItemProps> = ({
 
   return (
     <ChatItem key={index}>
-      <ProfileImagePlaceholder name={displayName} icon={chat?.icon} active={false} />
+      <ProfileImagePlaceholder
+        name={displayName}
+        icon={appendFileToken(chat?.icon, fileToken)}
+        active={false}
+      />
       <View
         style={{
           flexDirection: 'column',

package/src/components/RoomComponents/styled/LastMessageFile.tsx

@@ -8,6 +8,12 @@ import {
 } from './StyledRoomComponents';
 import { FileIcon } from '../../../assets/icons';
 import { Image, View } from 'react-native';
+import { useFileToken } from '../../../hooks/useFileToken';
+import {
+  appendFileToken,
+  isSecureFileUrl,
+  requestFileTokenRecovery,
+} from '../../../helpers/secureFileUrl';
 
 interface LastMessageFileProps
   extends Pick<LastMessage, 'user' | 'originalName' | 'locationPreview'> {}
@@ -21,6 +27,7 @@ const LastMessageFile: FC<LastMessageFileProps> = ({
   locationPreview,
 }) => {
   const [imgSrc, setImgSrc] = useState(locationPreview);
+  const fileToken = useFileToken();
 
   return (
     <LastRoomMessageContainer>
@@ -34,13 +41,18 @@ const LastMessageFile: FC<LastMessageFileProps> = ({
       >
         {imgSrc ? (
           <Image
-            source={{ uri: imgSrc }}
+            source={{ uri: appendFileToken(imgSrc, fileToken) }}
             style={{
               borderRadius: 16,
               width: 20,
               height: 20,
             }}
-            onError={() => setImgSrc(fallbackImage)}
+            onError={() => {
+              if (isSecureFileUrl(imgSrc)) {
+                requestFileTokenRecovery();
+              }
+              setImgSrc(fallbackImage);
+            }}
           />
         ) : (
           <FileIcon style={{ width: '20px', height: '20px' }} />

package/src/components/RoomComponents/styled/LastMessagePhoto.tsx

@@ -1,4 +1,6 @@
 import React, { FC } from 'react';
+import { useFileToken } from '../../../hooks/useFileToken';
+import { appendFileToken } from '../../../helpers/secureFileUrl';
 import styled from 'styled-components/native';
 import { LastMessage } from '../../../types/types';
 import {
@@ -30,6 +32,7 @@ const LastMessagePhoto: FC<LastMessagePhotoProps> = ({
   locationPreview,
   originalName,
 }) => {
+  const fileToken = useFileToken();
   return (
     <LastRoomMessageContainer>
       <LastRoomMessageName>{user?.name || ''}:</LastRoomMessageName>
@@ -42,7 +45,7 @@ const LastMessagePhoto: FC<LastMessagePhotoProps> = ({
       >
         <PhotoContainer>
           <ShadeWrapper>
-            <LastMessageImg src={locationPreview} />
+            <LastMessageImg src={appendFileToken(locationPreview, fileToken)} />
           </ShadeWrapper>
         </PhotoContainer>
         <LastRoomMessageText>{originalName || 'file'}</LastRoomMessageText>

package/src/components/RoomComponents/styled/LastMessageVideo.tsx

@@ -1,4 +1,6 @@
 import React, { FC } from 'react';
+import { useFileToken } from '../../../hooks/useFileToken';
+import { appendFileToken } from '../../../helpers/secureFileUrl';
 import styled from 'styled-components/native';
 import { LastMessage } from '../../../types/types';
 import {
@@ -45,6 +47,7 @@ const LastMessageVideo: FC<LastMessageVideoProps> = ({
   location,
   originalName,
 }) => {
+  const fileToken = useFileToken();
   return (
     <LastRoomMessageContainer>
       <LastRoomMessageName>{user?.name || ''}:</LastRoomMessageName>
@@ -57,7 +60,7 @@ const LastMessageVideo: FC<LastMessageVideoProps> = ({
       >
         <VideoContainer>
           <ShadeWrapper>
-            <Thumbnail src={location} />
+            <Thumbnail src={appendFileToken(location, fileToken)} />
           </ShadeWrapper>
           <PlayButton><Text>▶</Text></PlayButton>
         </VideoContainer>

package/src/components/styled/AudioMessage.tsx

@@ -1,4 +1,5 @@
 import React, { useEffect, useRef, useState } from 'react';
+import { withFileToken } from '../../helpers/secureFileUrl';
 import {
   View,
   TouchableOpacity,
@@ -425,7 +426,7 @@ const AudioMessage = ({
     const partInfo = await FileSystem.getInfoAsync(part);
     if (!partInfo.exists) {
       const download = await withTimeout(
-        FileSystem.downloadAsync(src, part),
+        FileSystem.downloadAsync(withFileToken(src), part),
         12000,
         'audio_download_timeout'
       );

package/src/components/styled/MessageImage.tsx

@@ -1,4 +1,9 @@
 import React, { useEffect, useState } from 'react';
+import {
+  isSecureFileUrl,
+  requestFileTokenRecovery,
+} from '../../helpers/secureFileUrl';
+import { pushLog } from '../../utils/devLogger';
 import { Container } from './StyledInputComponents/MediaComponents';
 import { useDispatch } from 'react-redux';
 import {
@@ -14,11 +19,23 @@ import {
 } from '../../helpers/mediaDimensions';
 
 interface CustomMessageImageProps {
+  /** Full-size file. Opened in the preview modal, NOT rendered inline. */
   fileURL: string;
   fileName: string;
   mimetype: string;
+  /**
+   * Server-generated thumbnail — what the bubble actually renders, same
+   * as the web client. The full-size original can be many megabytes and,
+   * for secure uploads, is served from a different (membership-gated)
+   * route; rendering it inline is what left the bubbles blank.
+   */
+  locationPreview?: string;
 }
 
+/** Keep the personal file token out of the logs. */
+const maskToken = (url?: string) =>
+  (url || '').replace(/([?&]ft=)[^&]*/i, '$1<redacted>');
+
 const FALLBACK_IMAGE =
   'https://as2.ftcdn.net/v2/jpg/02/51/95/53/1000_F_251955356_FAQH0U1y1TZw3ZcdPGybwUkH90a3VAhb.jpg';
 
@@ -26,7 +43,12 @@ const CustomMessageImage: React.FC<CustomMessageImageProps> = ({
   fileURL,
   fileName,
   mimetype,
+  locationPreview,
 }) => {
+  // Preview first, original only as a fallback — mirrors the web client,
+  // where the <img> src is the preview and `fileURL` is reserved for the
+  // modal.
+  const displayURL = locationPreview || fileURL;
   const [loading, setLoading] = useState(true);
   // Start with a neutral box; swap to the real aspect ratio once the
   // image's natural dimensions are known so it's shown scaled, not cropped.
@@ -35,25 +57,31 @@ const CustomMessageImage: React.FC<CustomMessageImageProps> = ({
   const dispatch = useDispatch();
 
   useEffect(() => {
-    if (!fileURL) {
+    if (!displayURL) {
       return;
     }
     let active = true;
     Image.getSize(
-      fileURL,
+      displayURL,
       (w, h) => {
         if (active) {
           setDims(fitMediaDimensions(w, h));
         }
       },
-      () => {
-        /* keep the default box if the size probe fails */
+      (error) => {
+        // Keep the default box — but say WHICH url failed. A blank
+        // bubble is otherwise indistinguishable between "bad url",
+        // "403 without a token" and "host unreachable".
+        pushLog('warn', 'image: getSize failed', {
+          url: maskToken(displayURL),
+          error: (error as any)?.message || String(error),
+        });
       }
     );
     return () => {
       active = false;
     };
-  }, [fileURL]);
+  }, [displayURL]);
 
   const handleOpen = () => {
     dispatch(setActiveFile({ fileName, fileURL, mimetype }));
@@ -78,7 +106,7 @@ const CustomMessageImage: React.FC<CustomMessageImageProps> = ({
           </View>
         )}
         <Image
-          source={{ uri: fileURL || FALLBACK_IMAGE }}
+          source={{ uri: displayURL || FALLBACK_IMAGE }}
           style={{
             width: dims.width,
             height: dims.height,
@@ -86,6 +114,17 @@ const CustomMessageImage: React.FC<CustomMessageImageProps> = ({
             backgroundColor: 'rgba(0, 0, 0, 0)',
           }}
           onLoadEnd={() => setLoading(false)}
+          onError={(event) => {
+            setLoading(false);
+            pushLog('warn', 'image: load failed', {
+              url: maskToken(displayURL),
+              usingPreview: !!locationPreview,
+              error: (event as any)?.nativeEvent?.error,
+            });
+            if (isSecureFileUrl(displayURL)) {
+              requestFileTokenRecovery();
+            }
+          }}
           // The box already matches the natural aspect ratio, so 'cover'
           // fills it edge-to-edge with no actual cropping or letterboxing.
           resizeMode="cover"

package/src/components/styled/VideoMessage.tsx

@@ -1,4 +1,8 @@
 import React, { useEffect, useState } from 'react';
+import {
+  isSecureFileUrl,
+  requestFileTokenRecovery,
+} from '../../helpers/secureFileUrl';
 import { Image, Pressable, StyleSheet, View } from 'react-native';
 import { useDispatch } from 'react-redux';
 import {
@@ -139,7 +143,12 @@ const CustomMessageVideo: React.FC<CustomMessageVideoProps> = ({
       <PosterVideo
         previewURL={previewURL}
         onOpen={handleOpen}
-        onPosterError={() => setPosterFailed(true)}
+        onPosterError={() => {
+          if (isSecureFileUrl(previewURL)) {
+            requestFileTokenRecovery();
+          }
+          setPosterFailed(true);
+        }}
       />
     );
   }

package/src/context/xmppProvider.tsx

@@ -14,7 +14,7 @@ import { VideoCallOverlay } from '../components/VideoCalls/VideoCallOverlay';
 import XmppClient, {
   XmppCredentialsProvider,
 } from '../networking/xmppClient';
-import { refreshTokens } from '../roomStore/chatSettingsSlice';
+import { refreshAuthTokensQuietly } from '../networking/authRefresh';
 import {
   IConfig,
   ProviderBootstrapStatus,
@@ -107,23 +107,25 @@ export const XmppProvider: React.FC<XmppProviderProps> = ({ children, config, is
   // the XmppClient at least doesn't crash on `undefined.password`.
   const credentialsProvider = useMemo<XmppCredentialsProvider>(() => {
     return async () => {
-      // 1. Consumer-supplied REST refresh (when wired). This runs
-      //    before the SDK's own refresh chain so non-Ethora backends
-      //    can keep auth state in sync with their own token endpoint.
-      const customRefresh = config?.refreshTokens?.refreshFunction;
-      if (customRefresh) {
-        try {
-          const result = await customRefresh();
-          if (result?.accessToken) {
-            store.dispatch(
-              refreshTokens({
-                token: result.accessToken,
-                refreshToken: result.refreshToken || '',
-              })
-            );
-          }
-        } catch (err) {
-          devPushLog('warn', 'XMPP creds refresh: customRefresh failed', err);
+      // 1. Make sure the REST tokens are fresh before re-minting XMPP
+      //    creds. This used to call `config.refreshTokens.refreshFunction`
+      //    directly and then fall into step 2, which refreshes again —
+      //    two rotations back to back, which the new backend scheme
+      //    reads as a race at best and token reuse at worst. One call to
+      //    the shared rotation point covers both the consumer-supplied
+      //    function and the built-in endpoint.
+      if (config?.refreshTokens?.enabled) {
+        const rotated = await refreshAuthTokensQuietly();
+
+        if (rotated?.xmppPassword) {
+          const rotatedUser = store.getState().chatSettingStore.user;
+          return {
+            username:
+              rotatedUser?.xmppUsername ||
+              rotatedUser?.defaultWallet?.walletAddress ||
+              '',
+            password: rotated.xmppPassword,
+          };
         }
       }
 
@@ -163,7 +165,7 @@ export const XmppProvider: React.FC<XmppProviderProps> = ({ children, config, is
   }, [
     config?.jwtLogin?.enabled,
     config?.jwtLogin?.token,
-    config?.refreshTokens?.refreshFunction,
+    config?.refreshTokens?.enabled,
     config?.userLogin?.enabled,
     config?.customLogin?.enabled,
     config?.initBeforeLoadAuth?.myEndpoint,
@@ -353,6 +355,29 @@ export const XmppProvider: React.FC<XmppProviderProps> = ({ children, config, is
           store.dispatch(setConfig(config));
         }
 
+        // Rotate BEFORE the first XMPP connect. On the rotating backend
+        // the xmpp password is a short-lived JWT that only the newest
+        // rotation knows, and each rotation invalidates its predecessors
+        // — so a snapshot's password (a host's cached `userLogin.user`,
+        // a persisted session) is usually already dead at boot. Without
+        // this, the first SASL attempt fails `not-authorized`, all three
+        // bootstrap retries re-present the same dead password, and the
+        // user dead-ends on the Connection error modal even though one
+        // rotation away a perfectly good session existed. The rotation
+        // also lands the fileToken pre-render, so secure media never
+        // paints blank first. Quiet + deduped; when it can't rotate
+        // (no refresh material, non-rotating backend) we just connect
+        // with what the snapshot has, exactly as before.
+        // jwtLogin is skipped: /users/client just minted fresh creds.
+        let connectPassword = resolved.xmppPassword;
+        if (config?.refreshTokens?.enabled && !config?.jwtLogin?.enabled) {
+          const rotated = await refreshAuthTokensQuietly();
+          if (cancelled) {return;}
+          if (rotated?.xmppPassword) {
+            connectPassword = rotated.xmppPassword;
+          }
+        }
+
         // Kick off REST /chats/my; allRoomPresences below needs the
         // room list to be in redux, otherwise it joins 0 MUCs and the
         // user receives zero realtime messages until they manually tap
@@ -362,7 +387,7 @@ export const XmppProvider: React.FC<XmppProviderProps> = ({ children, config, is
 
         const c = await initializeClient(
           resolved.xmppUsername!,
-          resolved.xmppPassword,
+          connectPassword,
           config?.xmppSettings
         );
         if (cancelled) {return;}

package/src/helpers/initXmppRooms.tsx

@@ -4,6 +4,7 @@ import { initRoomsPresence } from './initRoomsPresence';
 import XmppClient from '../networking/xmppClient';
 import { IConfig, IRoom, User } from '../types/types';
 import { store } from '../roomStore';
+import { refreshAuthTokensQuietly } from '../networking/authRefresh';
 
 const initXmppRooms = async (
   user: User,
@@ -59,7 +60,10 @@ const initXmppRooms = async (
     }
 
     if (config?.refreshTokens?.enabled) {
-      config?.refreshTokens?.refreshFunction?.();
+      // Was a bare call to the consumer-supplied refreshFunction, i.e. a
+      // rotation completely outside the SDK's lock. Routed through the
+      // one rotation point, which calls that same function internally.
+      refreshAuthTokensQuietly();
     }
   } catch (error) {
     console.error(error);