Methods

Reference for CometChat React UI Kit methods including init, login, logout, and message-sending wrappers.

AI Integration Quick Reference

Field	Value
Package	@cometchat/chat-uikit-react
Import	import { CometChatUIKit } from "@cometchat/chat-uikit-react";
Init	CometChatUIKit.init(UIKitSettings)
Login (dev)	CometChatUIKit.login("UID")
Login (prod)	CometChatUIKit.loginWithAuthToken("AUTH_TOKEN")
Other methods	CometChatUIKit.logout(), CometChatUIKit.getLoggedinUser(), CometChatUIKit.createUser(user), CometChatUIKit.updateUser(user)
Send messages	CometChatUIKit.sendTextMessage(), CometChatUIKit.sendMediaMessage(), CometChatUIKit.sendCustomMessage()
Note	Use these wrapper methods instead of raw SDK calls — they manage internal UI Kit eventing

The UI Kit wraps the Chat SDK methods to manage internal eventing and keep UI components synchronized. Use these wrapper methods instead of raw SDK calls.

CometChatUIKit.init(UIKitSettings) must be called before rendering any UI Kit components or calling any SDK methods. Initialization must complete before login.

Auth Key is for development/testing only. In production, generate Auth Tokens on the server using the REST API and pass them to the client via loginWithAuthToken(). Never expose Auth Keys in production client code.

Methods

All methods are accessed via the CometChatUIKit class.

Init

Initializes the CometChat JavaScript SDK. Must be called on app startup before any other UI Kit method.

Replace APP_ID, REGION, and AUTH_KEY with values from the CometChat Dashboard. Auth Key is optional — use Auth Token for production.

JavaScript

import { CometChatUIKit, UIKitSettingsBuilder } from "@cometchat/chat-uikit-react";

const COMETCHAT_CONSTANTS = {
  APP_ID: "APP_ID", // Replace with your App ID
  REGION: "REGION", // Replace with your App Region
  AUTH_KEY: "AUTH_KEY", // Replace with your Auth Key or leave blank if you are authenticating using Auth Token
};

//create the builder
const UIKitSettings = new UIKitSettingsBuilder()
  .setAppId(COMETCHAT_CONSTANTS.APP_ID)
  .setRegion(COMETCHAT_CONSTANTS.REGION)
  .setAuthKey(COMETCHAT_CONSTANTS.AUTH_KEY)
  .subscribePresenceForFriends()
  .build();

//Initialize CometChat
CometChatUIKit.init(UIKitSettings)?.then(() => {
  //login your user
});

---

Setting Session Storage Mode

To use session storage instead of the default local storage, configure it during initialization:

JavaScript

import { CometChat } from "@cometchat/chat-sdk-javascript";
import { UIKitSettingsBuilder } from "@cometchat/chat-uikit-react";

const COMETCHAT_CONSTANTS = {
  APP_ID: "APP_ID", // Replace with your App ID
  REGION: "REGION", // Replace with your App Region
  AUTH_KEY: "AUTH_KEY", // Replace with your Auth Key
};

const UIKitSettings = new UIKitSettingsBuilder()
  .setAppId(COMETCHAT_CONSTANTS.APP_ID)
  .setRegion(COMETCHAT_CONSTANTS.REGION)
  .setAuthKey(COMETCHAT_CONSTANTS.AUTH_KEY)
  .subscribePresenceForAllUsers()
  .setStorageMode(CometChat.StorageMode.SESSION)
  .build();

//Initialize CometChat UI Kit with Session Storage
CometChatUIKit.init(UIKitSettings)?.then(() => {
    console.log("Initialization completed successfully with session storage");
    // You can now call login function.
  })
  .catch(console.log);

TypeScript

import { CometChat } from "@cometchat/chat-sdk-javascript";
import { UIKitSettingsBuilder } from "@cometchat/chat-uikit-react";

const COMETCHAT_CONSTANTS = {
  APP_ID: "APP_ID", // Replace with your App ID
  REGION: "REGION", // Replace with your App Region
  AUTH_KEY: "AUTH_KEY", // Replace with your Auth Key
};

const UIKitSettings = new UIKitSettingsBuilder()
  .setAppId(COMETCHAT_CONSTANTS.APP_ID)
  .setRegion(COMETCHAT_CONSTANTS.REGION)
  .setAuthKey(COMETCHAT_CONSTANTS.AUTH_KEY)
  .subscribePresenceForAllUsers()
  .setStorageMode(CometChat.StorageMode.SESSION)
  .build();

//Initialize CometChat UI Kit with Session Storage
CometChatUIKit.init(UIKitSettings)?.then(() => {
    console.log("Initialization completed successfully with session storage");
    // You can now call login function.
  })
  .catch(console.log);

Get Logged In User

Checks for an existing session in the SDK. Returns the logged-in user details or null.

JavaScript

import { CometChatUIKit } from "@cometchat/chat-uikit-react"; //import uikit package

CometChatUIKit.getLoggedinUser()
  .then((user) => {
    //Login user
  })
  .catch(console.log);

---

Login using Auth Key

Simple authentication for development/POC. For production, use Auth Token.

JavaScript

import { CometChatUIKit } from "@cometchat/chat-uikit-react"; //import uikit package

const UID = "UID";

CometChatUIKit.getLoggedinUser()
  .then((user) => {
    if (!user) {
      CometChatUIKit.login(UID)
        .then((user) => {
          console.log("Login Successful:", { user });
          //mount your app
        })
        .catch(console.log);
    } else {
      //user already logged in
      //mount your app
    }
  })
  .catch(console.log);

TypeScript

import { CometChatUIKit } from "@cometchat/chat-uikit-react"; //import uikit package

const UID: string = "UID";

CometChatUIKit.getLoggedinUser()
  .then((user: CometChat.User) => {
    if (!user) {
      CometChatUIKit.login(UID)
        .then((user: CometChat.User) => {
          console.log("Login Successful:", { user });
          // You can now launch the component
        })
        .catch(console.log);
    } else {
      //user already logged in
      //You can now launch the component
    }
  })
  .catch(console.log);

---

Login using Auth Token

Production-safe authentication that does not expose the Auth Key in client code.

1. Create a User via the CometChat API when the user signs up in your app.
2. Create an Auth Token via the CometChat API for the new user and save the token in your database.
3. Load the Auth Token in your client and pass it to the loginWithAuthToken() method.

JavaScript

import { CometChatUIKit } from "@cometchat/chat-uikit-react"; //import uikit package

const authToken = "AUTH_TOKEN";

CometChatUIKit.getLoggedinUser()
  .then((user) => {
    if (!user) {
      //Login user
      CometChatUIKit.loginWithAuthToken(authToken)
        .then((user) => {
          console.log("Login Successful:", { user });
          //mount your app
        })
        .catch(console.log);
    } else {
      //user already logged in
      //mount your app
    }
  })
  .catch(console.log);

TypeScript

import { CometChatUIKit } from "@cometchat/chat-uikit-react"; //import uikit package

const authToken: string = "AUTH_TOKEN";

CometChatUIKit.getLoggedinUser()
  .then((user: CometChat.User) => {
    if (!user) {
      //Login user
      CometChatUIKit.loginWithAuthToken(authToken)
        .then((user: CometChat.User) => {
          console.log("Login Successful:", { user });
          //mount your app
        })
        .catch(console.log);
    }
  })
  .catch(console.log);

---

Logout

Ends the current user session.

JavaScript

import { CometChatUIKit } from "@cometchat/chat-uikit-react"; //import uikit package

CometChatUIKit.logout();

---

Create user

Takes a User object and Auth Key, returns the created User object.

JavaScript

import { CometChat } from "@cometchat/chat-sdk-javascript"; //import sdk package
import { CometChatUIKit } from "@cometchat/chat-uikit-react"; //import uikit package

const authKey = "AUTH_KEY";
const UID = "user1";
const name = "Kevin";

var user = new CometChat.User(UID);
user.setName(name);
CometChatUIKit.createUser(user, authKey)
  .then((user) => {
    console.log("user created", user);

    CometChatUIKit.login(UID, authKey)
      .then((user) => {
        console.log("Login Successful:", { user });
        //mount your app
      })
      .catch(console.log);
  })
  .catch(console.log);

TypeScript

import { CometChat } from "@cometchat/chat-sdk-javascript"; //import sdk package
import { CometChatUIKit } from "@cometchat/chat-uikit-react"; //import uikit package

const authKey: string = "AUTH_KEY";
const UID: string = "user1";
const name: string = "Kevin";

var user = new CometChat.User(UID);
user.setName(name);
CometChatUIKit.createUser(user, authKey)
  .then((user: CometChat.User) => {
    console.log("user created", user);

    CometChatUIKit.login(UID, authKey)
      .then((user: CometChat.User) => {
        console.log("Login Successful:", { user });
        //mount your app
      })
      .catch(console.log);
  })
  .catch(console.log);

---

Update user

Takes a User object and Auth Key, returns the updated User object.

JavaScript

import { CometChat } from "@cometchat/chat-sdk-javascript"; //import sdk package
import { CometChatUIKit } from "@cometchat/chat-uikit-react"; //import uikit package

const authKey = "AUTH_KEY";
const UID = "user1";
const name = "Kevin Fernandez";

var user = new CometChat.User(UID);
user.setName(name);
CometChatUIKit.updateUser(user, authKey)
  .then((user) => {
    console.log("user updated", user);
  })
  .catch(console.log);

TypeScript

import { CometChat } from "@cometchat/chat-sdk-javascript"; //import sdk package
import { CometChatUIKit } from "@cometchat/chat-uikit-react"; //import uikit package

const authKey: string = "AUTH_KEY";
const UID: string = "user1";
const name: string = "Kevin Fernandez";

var user = new CometChat.User(UID);
user.setName(name);
CometChatUIKit.updateUser(user, authKey)
  .then((user: CometChat.User) => {
    console.log("user updated", user);
  })
  .catch(console.log);

---

Base Message

Text message

Sends a text message in a 1:1 or group chat. Takes a TextMessage object.

1:1 chat

import { CometChat } from "@cometchat/chat-sdk-javascript"; //import sdk package
import { CometChatUIKit } from "@cometchat/chat-uikit-react"; //import uikit package
import { CometChatUIKitConstants } from "@cometchat/uikit-resources"; //import shared package

const receiverID = "UID";
const messageText = "Hello world!";
const receiverType = CometChatUIKitConstants.MessageReceiverType.user;
const textMessage = new CometChat.TextMessage(
  receiverID,
  messageText,
  receiverType
);

CometChatUIKit.sendTextMessage(textMessage)
  .then((message) => {
    console.log("Message sent successfully:", message);
  })
  .catch(console.log);

Group chat

import { CometChat } from "@cometchat/chat-sdk-javascript"; //import sdk package
import { CometChatUIKit } from "@cometchat/chat-uikit-react"; //import uikit package
import { CometChatUIKitConstants } from "@cometchat/uikit-resources"; //import shared package

const receiverID = "GUID";
const messageText = "Hello world!";
const receiverType = CometChatUIKitConstants.MessageReceiverType.group;
const textMessage = new CometChat.TextMessage(
  receiverID,
  messageText,
  receiverType
);

CometChatUIKit.sendMessage(textMessage)
  .then((message) => {
    console.log("Message sent successfully:", message);
  })
  .catch(console.log);

---

Media message

Sends a media message in a 1:1 or group chat. Takes a MediaMessage object.

Replace INPUT FILE OBJECT with the actual File object.

1:1 chat

import { CometChat } from "@cometchat/chat-sdk-javascript"; //import sdk package
import { CometChatUIKit } from "@cometchat/chat-uikit-react"; //import uikit package
import { CometChatUIKitConstants } from "@cometchat/uikit-resources"; //import shared package

const receiverID = "UID";
const messageType = CometChatUIKitConstants.MessageTypes.file;
const receiverType = CometChatUIKitConstants.MessageReceiverType.user;
const mediaMessage = new CometChat.MediaMessage(
  receiverID,
  `INPUT FILE OBJECT`,
  messageType,
  receiverType
);

CometChatUIKit.sendMediaMessage(mediaMessage)
  .then((message) => {
    console.log("Media message sent successfully", message);
  })
  .catch(console.log);

Group chat

import { CometChat } from "@cometchat/chat-sdk-javascript"; //import sdk package
import { CometChatUIKit } from "@cometchat/chat-uikit-react"; //import uikit package
import { CometChatUIKitConstants } from "@cometchat/uikit-resources"; //import shared package

const receiverID = "GUID";
const messageType = CometChatUIKitConstants.MessageTypes.file;
const receiverType = CometChatUIKitConstants.MessageReceiverType.group;
const mediaMessage = new CometChat.MediaMessage(
  receiverID,
  `INPUT FILE OBJECT`,
  messageType,
  receiverType
);

CometChatUIKit.sendMediaMessage(mediaMessage)
  .then((message) => {
    console.log("Media message sent successfully", message);
  })
  .catch(console.log);

---

Custom message

Sends a custom message (neither text nor media) in a 1:1 or group chat. Takes a CustomMessage object.

1:1 chat

import { CometChat } from "@cometchat/chat-sdk-javascript"; //import sdk package
import { CometChatUIKit } from "@cometchat/chat-uikit-react"; //import uikit package
import { CometChatUIKitConstants } from "@cometchat/uikit-resources"; //import shared package

const receiverID = "UID";
const customData = {
  latitude: "50.6192171633316",
  longitude: "-72.68182268750002",
};
const customType = "location";
const receiverType = CometChatUIKitConstants.MessageReceiverType.user;
const customMessage = new CometChat.CustomMessage(
  receiverID,
  receiverType,
  customType,
  customData
);

CometChatUIKit.sendCustomMessage(customMessage)
  .then((message) => {
    console.log("custom message sent successfully", message);
  })
  .catch(console.log);

Group chat

import { CometChat } from "@cometchat/chat-sdk-javascript"; //import sdk package
import { CometChatUIKit } from "@cometchat/chat-uikit-react"; //import uikit package
import { CometChatUIKitConstants } from "@cometchat/uikit-resources"; //import shared package

const receiverID = "GUID";
const customData = {
  latitude: "50.6192171633316",
  longitude: "-72.68182268750002",
};
const customType = "location";
const receiverType = CometChatUIKitConstants.MessageReceiverType.group;
const customMessage = new CometChat.CustomMessage(
  receiverID,
  receiverType,
  customType,
  customData
);

CometChatUIKit.sendCustomMessage(customMessage)
  .then((message) => {
    console.log("custom message sent successfully", message);
  })
  .catch(console.log);