[🐛] 🔥 Cannot switch from anonymous to authenticated or vice versa

[mphill]

Issue

On a live activity channel

• I would like to create a public anonymous chat that people can view as anonymous users.
• If they are anonymous, they can log in, and <MessageInput /> will be available so they can comment
• If they are authenticated, sign out and become anonymous. <MessageInput /> will disappear.

In both cases, they should be able to see the channel contents.

It seems like this is not possible and results in this message: "Error loading messages for this channel"

Steps to reproduce

Steps to reproduce the behavior:

I've tried a few ways to switch the user from authenticated to anonymous:

Simple:

    const logout = async () => {
        await chatClient?.disconnectUser();
        await chatClient?.connectAnonymousUser();
    };

Clear out everything:

     if (!chatClient) throw new Error("No valid chat client found");

        if (!channel) throw new Error("No valid channel found");

        await channel?.stopWatching();
        await chatClient.disconnectUser();
        await chatClient.connectAnonymousUser();

        await watchChannel(chatClient);

The code is roughly the same going from authed to non-authed or vice versa; I've only included converting to anonymous for brevity.

Expected behavior

I would like the app to be able to seamlessly transition between an anonymous and authed state.

Project Related Information

Expo SDK 51

Customization

            <OverlayProvider
                value={{
                    style: getTheme(),
                }}
            >
                <ThemeProvider>
                    <Chat client={chatClient} enableOfflineSupport={false}>
                        <Channel
                            channel={channel}
                            deletedMessagesVisibilityType="never"
                            SendMessageDisallowedIndicator={() => null}
                        >
                            <MessageList />
                            <MessageInput />
                        </Channel>
                    </Chat>
                </ThemeProvider>
            </OverlayProvider>

Offline support

• I have enabled offline support.
• The feature I'm having does not occur when offline support is disabled. (stripe out if not applicable)

Environment

Click To Expand

package.json:

{
        "stream-chat-expo": "^5.31.1",
}

react-native info output:

CLI command not found

• Platform that you're experiencing the issue on:
  • iOS
  • Android
  • iOS but have not tested behavior on Android
  • Android but have not tested behavior on iOS
  • Both
• stream-chat-react-native (note: this is for expo, but likely occurs on stream-chat-react-native` too ) version you're using that has this issue:
  • ^5.31.1
• Device/Emulator info:
  • I am using a physical device
  • OS version: e.g. iOS 17.5
  • Device/Emulator: e.g. iPhone 15 pro

Additional context

Screenshots

Please note, that I am not calling connect multiple times. I think that rapidly disconnecting and re-connecting causes this error.

[isekovanic]

Hi @mphill ,

Sorry for the slow response.

So a couple of things I could add here:

• Please keep in mind that our chatClient is a singleton instance. This means that in certain scenarios it will not trigger an update to the downstream components by simply connecting and reconnecting. To be sure that this is the issue (looks like it to me), can you please add a random key prop to your Chat component whenever you switch users ? So it would be something like:

const [randomId, setRandomId] = useState('');
return <OverlayProvider
      value={{
          style: getTheme(),
      }}
  >
      <ThemeProvider>
          <Chat key={randomId} client={chatClient} enableOfflineSupport={false}>
              <Channel
                  channel={channel}
                  deletedMessagesVisibilityType="never"
                  SendMessageDisallowedIndicator={() => null}
              >
                  <MessageList />
                  <MessageInput />
              </Channel>
          </Chat>
      </ThemeProvider>
  </OverlayProvider>

and then use setRandomId during both login and logout:

const login = () => {
  // ... other code
  setRandomId(uuidv4()); // or any other uuid library
}

const logout = () => {
  // ... other code
  setRandomId(uuidv4()); // or any other uuid library
}

• You mentioned that this happens when you login/logout really quickly; have you been successful in this working as intended whenever you do not do that ? Would be quite surprised if that's the case but interested to see.