# Issue integrating web-sdk in react-native application

**URL:** <https://forum.social.plus/t/issue-integrating-web-sdk-in-react-native-application/651>\
**Category:** Web\
**Created:** [February 21, 2023, 4:54pm UTC](https://forum.social.plus/t/issue-integrating-web-sdk-in-react-native-application/651 "2023-02-21T16:54:34Z")\
**Posts on this page:** 16\
**Page:** 1

<div class="post-metadata">

**Author:** ![sarathdixit](https://avatars.discourse-cdn.com/v4/letter/s/35a633/32.png) [@sarathdixit](https://forum.social.plus/u/sarathdixit)\
**Post date:** [February 21, 2023, 4:54pm UTC](https://forum.social.plus/t/issue-integrating-web-sdk-in-react-native-application/651/1 "2023-02-21T16:54:34Z")

</div>

Currently, our application is running on React Native version 0.63.5 and Node version 14.17.6. We have integrated Amity Web SDK for live chat functionality. However, we are encountering difficulties as there is insufficient documentation available on the process of creating a user, authenticating, authorizing, creating a channel, and initiating a chat.

we would be grateful if you could provide us with detailed guidance on the entire process of user login to the chat functionality.

---

<div class="post-metadata">

**Author:** ![sarathdixit](https://avatars.discourse-cdn.com/v4/letter/s/35a633/32.png) [@sarathdixit](https://forum.social.plus/u/sarathdixit)\
**Post date:** [February 21, 2023, 5:00pm UTC](https://forum.social.plus/t/issue-integrating-web-sdk-in-react-native-application/651/2 "2023-02-21T17:00:56Z")

</div>

The below code not getting connected status. Why is that happening?

```auto
        client.registerSession({ userId: "sarath", displayName: "dixit" });
        client.on("connectionStatusChanged", (data) => {
          console.log(data);
        });

```

---

<div class="post-metadata">

**Author:** ![SocialPlus\_Support](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.social.plus/socialplus_support/32/798_2.png) [@SocialPlus\_Support](https://forum.social.plus/u/SocialPlus_Support)\
**Post date:** [February 22, 2023, 3:55am UTC](https://forum.social.plus/t/issue-integrating-web-sdk-in-react-native-application/651/3 "2023-02-22T03:55:12Z")

</div>

Hi Sarath @sarathdixit,

Thanks for reaching out.

1. ReactNat. can work with TS SDK without conflict, it is recommended you switch to TS SDK. So no doc for React is necessary nor in our plan yet so far.

2. Please find code

- can you please help share results from your console.log(data)?
- once connected, can ignore this fx and continue with your operations

```auto
client.registerSession({ userId, displayName, authToken });
      client.on("connectionStatusChanged", ({ oldValue, newValue }) => {
        if (data == "connected") setConnected(true);
      });

```

Any other issues let us know, thanks.  
Amity Support

---

<div class="post-metadata">

**Author:** ![sarathdixit](https://avatars.discourse-cdn.com/v4/letter/s/35a633/32.png) [@sarathdixit](https://forum.social.plus/u/sarathdixit)\
**Post date:** [February 22, 2023, 9:25am UTC](https://forum.social.plus/t/issue-integrating-web-sdk-in-react-native-application/651/4 "2023-02-22T09:25:02Z")

</div>

As per your suggestion, I’m using typescript SDK but I’m getting error

`Error: Amity SDK (400100): Invalid authentication token (0).`

```auto
const client = createClient(
  API_KEY,
  API_REGIONS.SG
);
let isConnected = await connectClient({ userId: "testuser123" });

```

---

<div class="post-metadata">

**Author:** ![SocialPlus\_Support](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.social.plus/socialplus_support/32/798_2.png) [@SocialPlus\_Support](https://forum.social.plus/u/SocialPlus_Support)\
**Post date:** [February 22, 2023, 10:20am UTC](https://forum.social.plus/t/issue-integrating-web-sdk-in-react-native-application/651/5 "2023-02-22T10:20:22Z")

</div>

Hi @sarathdixit , from what’s sent it seems to be an issue with your auth token.

Were there some misnomer eg expired tokens (up to 10 min), etc (please refer here for details [https://docs.amity.co/console/settings/security](https://docs.amity.co/console/settings/security))?

---

<div class="post-metadata">

**Author:** ![sarathdixit](https://avatars.discourse-cdn.com/v4/letter/s/35a633/32.png) [@sarathdixit](https://forum.social.plus/u/sarathdixit)\
**Post date:** [February 23, 2023, 6:42am UTC](https://forum.social.plus/t/issue-integrating-web-sdk-in-react-native-application/651/6 "2023-02-23T06:42:48Z")

</div>

@SocialPlus_Support I’ve initialized the SDK as per the above step you mentioned and disabled the secure mode but I’m getting the error

**“Amity SDK (400100): Authorization info not found”**

```auto
import {
  API_REGIONS,
  createClient,
  enableCache,
  connectClient,
  createQuery,
  createChannel,
  runQuery,
  createMessage,
} from "@amityco/ts-sdk";

const apiKey = API_KEY;

      const client = createClient(apiKey, API_REGIONS.SG);

      enableCache();

      const sessionHandler = {
        sessionWillRenewAccessToken(renewal) {
          renewal.renew();
        },
      };
      connectClient(
        { userId: "testuserID", displayName: "Bob Newton" },
        sessionHandler
      );
      const query = createQuery(createChannel, {
        displayName: "myChannel",
        tags: ["tag"],
        type: "standard",
        userIds: ["testuserID"],
        metadata: {
          data: "anything",
        },
      });

      runQuery(query, (result) => console.log(result));

```

---

<div class="post-metadata">

**Author:** ![SocialPlus\_Support](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.social.plus/socialplus_support/32/798_2.png) [@SocialPlus\_Support](https://forum.social.plus/u/SocialPlus_Support)\
**Post date:** [February 23, 2023, 7:16am UTC](https://forum.social.plus/t/issue-integrating-web-sdk-in-react-native-application/651/7 "2023-02-23T07:16:11Z")

</div>

@sarathdixit

- can you try again but wait for connection status to change first? if it works

````auto
await connectClient({
      displayName: `${given_name} ${family_name}`,
      userId: sub,
    })
      .then(() => {
        console.log("connected");
        //create channel
      })
      .catch((e) => {
        console.log("error", e);
      });```
````

---

<div class="post-metadata">

**Author:** ![sarathdixit](https://avatars.discourse-cdn.com/v4/letter/s/35a633/32.png) [@sarathdixit](https://forum.social.plus/u/sarathdixit)\
**Post date:** [February 23, 2023, 8:21am UTC](https://forum.social.plus/t/issue-integrating-web-sdk-in-react-native-application/651/8 "2023-02-23T08:21:12Z")

</div>

Hey @SocialPlus_Support finally SDK has connected thanks for the above solution. I created the conversation channel but that channel is not showing in the amity dashboard. I’ve shared the channel creation response below

 ![Screenshot 2023-02-23 134907](https://europe1.discourse-cdn.com/flex013/uploads/amity/original/1X/f7ed566c2d4b9b054fd252d49ea9cd9c2f59e338.png)

Also, I have a few more questions

1. How can I get all the channels related to the user?
2. I have created a broadcast channel from the dashboard but I’m unable to join the channel.

Please provide me with a solution.

---

<div class="post-metadata">

**Author:** ![SocialPlus\_Support](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.social.plus/socialplus_support/32/798_2.png) [@SocialPlus\_Support](https://forum.social.plus/u/SocialPlus_Support)\
**Post date:** [February 23, 2023, 10:58am UTC](https://forum.social.plus/t/issue-integrating-web-sdk-in-react-native-application/651/9 "2023-02-23T10:58:21Z")

</div>

hi @sarathdixit noted, per these:

1. query with criteria of filter:member or userID  
[https://docs.amity.co/chat/channels/query-channels](https://docs.amity.co/chat/channels/query-channels)

2. did mean in Amity Social Cloud Console dashboard?

These provide details that may help you create and access:

> **[Channel Management](https://docs.amity.co/console/channel-management#create-channel)**

> **[Create Channel](https://docs.amity.co/chat/channels/create-channel)**

---

<div class="post-metadata">

**Author:** ![SocialPlus\_Support](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.social.plus/socialplus_support/32/798_2.png) [@SocialPlus\_Support](https://forum.social.plus/u/SocialPlus_Support)\
**Post date:** [February 24, 2023, 4:05am UTC](https://forum.social.plus/t/issue-integrating-web-sdk-in-react-native-application/651/10 "2023-02-24T04:05:37Z")

</div>

Hi @sarathdixit per your first question on convers. channel not showing on dashboard

That is actually by design - since conversations are private and not subjected to banword/allowedlist url they’re not shown on console/dashboard.

To see it you can just change it to ‘community type’ when creating channel

Amity Support

---

<div class="post-metadata">

**Author:** ![sarathdixit](https://avatars.discourse-cdn.com/v4/letter/s/35a633/32.png) [@sarathdixit](https://forum.social.plus/u/sarathdixit)\
**Post date:** [February 27, 2023, 1:23pm UTC](https://forum.social.plus/t/issue-integrating-web-sdk-in-react-native-application/651/11 "2023-02-27T13:23:43Z")

</div>

Thanks for the information.

---

<div class="post-metadata">

**Author:** ![sarathdixit](https://avatars.discourse-cdn.com/v4/letter/s/35a633/32.png) [@sarathdixit](https://forum.social.plus/u/sarathdixit)\
**Post date:** [February 27, 2023, 1:25pm UTC](https://forum.social.plus/t/issue-integrating-web-sdk-in-react-native-application/651/12 "2023-02-27T13:25:28Z")

</div>

I’m trying to get all messages from the channel but it always throws me a validation error even though my channel id is correct.

**“Amity SDK (500000): Parameters validation error!”**

```auto
      const query = createQuery(queryMessages, {
        page: { limit: 5 },
        subChannelId: "8683general",
      });

      runQuery(query, ({ data: message, ...options }) =>
        console.log(message, options)
      );

```

---

<div class="post-metadata">

**Author:** ![SocialPlus\_Support](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.social.plus/socialplus_support/32/798_2.png) [@SocialPlus\_Support](https://forum.social.plus/u/SocialPlus_Support)\
**Post date:** [February 28, 2023, 6:15am UTC](https://forum.social.plus/t/issue-integrating-web-sdk-in-react-native-application/651/13 "2023-02-28T06:15:16Z")

</div>

Hi @sarathdixit may I confirm how did you generate channelID?

---

<div class="post-metadata">

**Author:** ![SocialPlus\_Support](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.social.plus/socialplus_support/32/798_2.png) [@SocialPlus\_Support](https://forum.social.plus/u/SocialPlus_Support)\
**Post date:** [February 28, 2023, 5:40pm UTC](https://forum.social.plus/t/issue-integrating-web-sdk-in-react-native-application/651/14 "2023-02-28T17:40:58Z")

</div>

@sarathdixit also seems like you’re not using the channelID, that looks more like `display name` as `channelId` is a `uuid` and would be a different format.

Example: channelId: `632048646de41000d94f9151`

---

<div class="post-metadata">

**Author:** ![sarathdixit](https://avatars.discourse-cdn.com/v4/letter/s/35a633/32.png) [@sarathdixit](https://forum.social.plus/u/sarathdixit)\
**Post date:** [March 1, 2023, 2:38am UTC](https://forum.social.plus/t/issue-integrating-web-sdk-in-react-native-application/651/15 "2023-03-01T02:38:09Z")

</div>

@SocialPlus_Support I’ve created the channel id in the same format only it’s working now. But I’m facing a problem with observing messages without any refresh. I’m not seeing any example in the documentation.

---

<div class="post-metadata">

**Author:** ![cijin](https://avatars.discourse-cdn.com/v4/letter/c/49beb7/32.png) [@cijin](https://forum.social.plus/u/cijin)\
**Post date:** [March 1, 2023, 6:24am UTC](https://forum.social.plus/t/issue-integrating-web-sdk-in-react-native-application/651/16 "2023-03-01T06:24:06Z")

</div>

Replied in [this thread](https://forum.social.plus/t/how-to-get-live-messages-from-ts-sdk/654). 🙂