Collision when multiple React SendbirdProvider instances are present

Sendbird Chat UIKit React
, ,
1

[Problem/Question]
It seems there’s an issue when there are more than one SendbirdProvider present with different appIds. I have a use case where there is a main support channel on one appId, and the user is able to chat with different clinics each with their own appId.

Code basically looks like this:

{mainSupportOpen && (
  <Modal>
    <SendbirdProvider appId={supportAppId} userId={userId}>
      <GroupChannel channelUrl={supportChannelUrl} />
    </SendbirdProvider>
  </Modal>
)}
{!!clinicAppId && (
  <Modal>
    <SendbirdProvider appId={clinicAppId} userId={userId}>
      <GroupChannel channelUrl={currentClinicChannelUrl} />
    </SendbirdProvider>
  </Modal>
)}

Let’s say main support appId starts with “29ed” and the clinic’s appId is “56af”.

What happens is that when you open up the first chat for support, it renders fine. I’ll close the modal, and then attempt to open the second chat (the clinic one), and I get back an 400 Bad Request: https://api-29edREDACTED.sendbird.com/v3/group_channels/SendbirdGroupChannel-ClinicChannel01

In other words, the second chat instance is trying to connect to the first appId instead of the second appId of its parent SendbirdProvider. If you open it the other way around (clinic appId first, close it, then open support appId), you get the same kind of error, where the second chat is trying to invoke the API for the first appId.

// If problem, please fill out the below. If question, please delete.
[UIKit Version]
@sendbird/uikit-react ^3.16.1

[Reproduction Steps]
Mentioned above

[Frequency]
Consistently reproducible

[Current impact]
It’s critical to our product, but I will try to instantiate a single SendbirdProvider instance and swap the appId and see that works.

2

I’ve even tried putting the GroupChannel components into a wrapping component so I can log the appId:

{mainSupportOpen && (
  <Modal>
    <SendbirdProvider appId={supportAppId} userId={userId}>
      <SupportChatChannel channelUrl={supportChannelUrl} />
    </SendbirdProvider>
  </Modal>
)}
{!!clinicAppId && (
  <Modal>
    <SendbirdProvider appId={clinicAppId} userId={userId}>
      <ClinicChatChannel channelUrl={currentClinicChannelUrl} />
    </SendbirdProvider>
  </Modal>
)}

SupportChat.tsx

export function SupportChatChannel({ channelUrl }: { channelUrl: string }) {
  const { config, stores } = useSendbirdStateContext();
  useEffect(() => {
    console.log('support', config, stores);
  }, [config, stores]);
  return <GroupChannel channelUrl={channelUrl} />;
}

ClinicChat.tsx

export function ClinicChatChannel({ channelUrl }: { channelUrl: string }) {
  const { config, stores } = useSendbirdStateContext();
  useEffect(() => {
    console.log('clinic', config, stores);
  }, [config, stores]);
  return <GroupChannel channelUrl={channelUrl} />;
}

Sure enough, they both log different config.appId values. When I check the stores.sdkStore.sdk._iid values, they are the same in both.

I dug as far as I could and could determine that on this line, where we call SendbirdChat.init(params):

Here is where we pass in the appId, but when it gets called the second time with a different appId, it looks like it returns the same sdk instance. I can’t really go any further since the @sendbird/chat library is obfuscated.

4

One last test, I was able to replicate the bug using @sendbird/chat.

  useEffect(() => {
    let sdk = SendbirdChat.init({ appId: '29ED**REDACTED**' });
    console.log(sdk.message._sdkState.appId);
    sdk = SendbirdChat.init({ appId: '1E06**REDACTED**' });
    console.log(sdk.message._sdkState.appId);
  }, []);

The two log lines are exactly the same value, so any subsequent calls to SendbirdChat.init will not update the appId.