fix(react): unsubscribe onAuthChange listeners and prevent race conditions

packages/auth/src/RocketChatAuth.ts

@@ -36,7 +36,9 @@ class RocketChatAuth {
   async onAuthChange(callback: (user: object | null) => void) {
     this.authListeners.push(callback);
     const user = await this.getCurrentUser();
-    callback(user);
+    if (this.authListeners.includes(callback)) {
+      callback(user);
+    }
   }
 
   async removeAuthListener(callback: (user: object | null) => void) {

packages/react/src/views/ChatBody/ChatBody.js

@@ -146,16 +146,18 @@ const ChatBody = ({
   );
 
   useEffect(() => {
-    RCInstance.auth.onAuthChange((user) => {
+    const onAuthChange = (user) => {
       if (user) {
         RCInstance.addMessageListener(addMessage);
         RCInstance.addMessageDeleteListener(removeMessage);
         RCInstance.addActionTriggeredListener(onActionTriggerResponse);
         RCInstance.addUiInteractionListener(onActionTriggerResponse);
       }
-    });
+    };
+    RCInstance.auth.onAuthChange(onAuthChange);
 
     return () => {
+      RCInstance.auth.removeAuthListener(onAuthChange);
       RCInstance.removeMessageListener(addMessage);
       RCInstance.removeMessageDeleteListener(removeMessage);
       RCInstance.removeActionTriggeredListener(onActionTriggerResponse);
@@ -164,25 +166,35 @@ const ChatBody = ({
   }, [RCInstance, addMessage, removeMessage, onActionTriggerResponse]);
 
   useEffect(() => {
-    RCInstance.auth.onAuthChange((user) => {
+    const onAuthChange = (user) => {
       if (user) {
         getMessagesAndRoles();
         setHasMoreMessages(true);
       } else {
         getMessagesAndRoles(anonymousMode);
       }
-    });
+    };
+    RCInstance.auth.onAuthChange(onAuthChange);
+
+    return () => {
+      RCInstance.auth.removeAuthListener(onAuthChange);
+    };
   }, [RCInstance, anonymousMode, getMessagesAndRoles]);
 
   useEffect(() => {
-    RCInstance.auth.onAuthChange((user) => {
+    const onAuthChange = (user) => {
       if (user) {
         fetchAndSetPermissions();
       } else {
         permissionsRef.current = null;
       }
-    });
-  }, []);
+    };
+    RCInstance.auth.onAuthChange(onAuthChange);
+
+    return () => {
+      RCInstance.auth.removeAuthListener(onAuthChange);
+    };
+  }, [RCInstance, fetchAndSetPermissions, permissionsRef]);
 
   // Expose clearUnreadDivider function via ref for ChatInput to call
   useEffect(() => {

packages/react/src/views/ChatInput/ChatInput.js

@@ -144,7 +144,7 @@ const ChatInput = ({ scrollToBottom, clearUnreadDividerRef }) => {
   );
 
   useEffect(() => {
-    RCInstance.auth.onAuthChange((user) => {
+    const onAuthChange = (user) => {
       if (user) {
         RCInstance.getCommandsList()
           .then((data) => setCommands(data.commands || []))
@@ -156,7 +156,12 @@ const ChatInput = ({ scrollToBottom, clearUnreadDividerRef }) => {
           )
           .catch(console.error);
       }
-    });
+    };
+    RCInstance.auth.onAuthChange(onAuthChange);
+
+    return () => {
+      RCInstance.auth.removeAuthListener(onAuthChange);
+    };
   }, [RCInstance, isChannelPrivate, setMembersHandler]);
 
   useEffect(() => {
@@ -545,8 +550,8 @@ const ChatInput = ({ scrollToBottom, clearUnreadDividerRef }) => {
               editMessage.msg || editMessage.attachments
                 ? 'Editing Message'
                 : isChannelReadOnly
-                ? 'This room is read only'
-                : undefined
+                  ? 'This room is read only'
+                  : undefined
             }
             iconName={
               editMessage.msg || editMessage.attachments ? 'edit' : undefined
@@ -611,8 +616,8 @@ const ChatInput = ({ scrollToBottom, clearUnreadDividerRef }) => {
                 ? isChannelArchived
                   ? 'Room archived'
                   : canSendMsg
-                  ? `Message #${channelInfo.name}`
-                  : 'This room is read only'
+                    ? `Message #${channelInfo.name}`
+                    : 'This room is read only'
                 : 'Sign in to chat'
             }
             css={css`

packages/react/src/views/EmbeddedChat.js

@@ -34,7 +34,7 @@ const EmbeddedChat = (props) => {
 
   const {
     isClosable = false,
-    setClosableState = () => {},
+    setClosableState = () => { },
     width = '100%',
     height = '95vh',
     host = 'http://localhost:3000',
@@ -134,7 +134,7 @@ const EmbeddedChat = (props) => {
   }, [RCInstance, auth, setIsLoginIn]);
 
   useEffect(() => {
-    RCInstance.auth.onAuthChange((user) => {
+    const onAuthChange = (user) => {
       if (user) {
         RCInstance.connect()
           .then(() => {
@@ -151,7 +151,12 @@ const EmbeddedChat = (props) => {
       } else {
         setIsUserAuthenticated(false);
       }
-    });
+    };
+    RCInstance.auth.onAuthChange(onAuthChange);
+
+    return () => {
+      RCInstance.auth.removeAuthListener(onAuthChange);
+    };
   }, [
     RCInstance,
     setAuthenticatedName,