RocketChat / EmbeddedChat

An easy to use full-stack component (ReactJS) embedding Rocket.Chat into your webapp
https://rocketchat.github.io/EmbeddedChat/docs
126 stars 252 forks source link

[BUG] Unable to fetch any channel information after refresh. #424

Closed Spiral-Memory closed 9 months ago

Spiral-Memory commented 10 months ago

Description:

Upon the initial login, the application successfully fetches channel information. However, after refreshing the page, this functionality doesn't work.

Steps to reproduce:

  1. Set up the Rocket.Chat Server.
  2. Access the embedded chat, log in, and verify the channel information.
  3. Refresh the page and recheck the channel information.

Expected behavior:

The application should consistently retrieve all necessary information with each refresh, provided the user token is not expired and the user is logged in.

Actual behavior:

Following a page refresh, the application is unable to fetch channel information, indicating a deviation from the expected behavior.

https://github.com/RocketChat/EmbeddedChat/assets/78961432/570676c5-cbd2-48e6-acd0-41b3b27bea7f

Note: This issue is in correction with issue #340, as the problem only occurs after a refresh and does not happen in the first load. Initially, I created this issue separately, but later found out that a similar issue had been created before. Therefore, this issue can be considered a correction to the previous one.

Spiral-Memory commented 10 months ago

@abhinavkrin, I believe the issue lies in the execution order of the getChannelInfo or getCurrentUser function with respect to whether the currentUser or currentUser.authToken has been set. Upon refreshing, before currentUser is set, it sends a request to the backend to obtain the userId and authToken using const { userId, authToken } = await this.auth.getCurrentUser() || {};. The function runs before the currentUser or currentUser.authToken is set, causing both variables to return undefined. Consequently, it sends a request to the Rocket Chat REST API with undefined information, leading to the inability to fetch the required data upon refresh. I would like to address this issue, but I am unsure how to fix the order of execution. Could you please guide me on this so that I can begin working on it?

I have debugged the issue, and here are my findings:

Console logs on refresh:

image

In RocketChatAuth.ts, I used the getCurrentUser() function to debug the issue:

image

Spiral-Memory commented 10 months ago

After debugging, I found that in the EmbeddedChat.js frontend file, the isUserAuthenticated variable was being set to true before successfully connecting to the RCInstance. This premature setting caused a state change, triggering the execution of the useEffect hook which runs getChannelInfo() function in ChatHeader.js. Since this function requires user information to fetch data which is not available as of now, it sent undefined credentials to the REST API backend, resulting in an error response and the inability to retrieve channel information.

To fix this, I modified the code so that isUserAuthenticated changes to true only after a successful connection is established. This ensures that this.currentUser is properly set on the backend, allowing for correct functionality upon refresh. I've submitted a pull request for your review, checking if my changes are correct.

abhinavkrin commented 9 months ago

Thanks @Spiral-Memory for the investigation. :100: