> ## Documentation Index
> Fetch the complete documentation index at: https://www.cometchat.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Methods

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

<Accordion title="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                                           |
</Accordion>

The UI Kit wraps the [Chat SDK](/sdk/javascript/overview) methods to manage internal eventing and keep UI components synchronized. Use these wrapper methods instead of raw SDK calls.

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

<Warning>
  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.
</Warning>

## Methods

All methods are accessed via the `CometChatUIKit` class.

### Init

Initializes the [CometChat JavaScript SDK](/sdk/javascript/overview). Must be called on app startup before any other UI Kit method.

<Note>
  Replace `APP_ID`, `REGION`, and `AUTH_KEY` with values from the CometChat Dashboard. `Auth Key` is optional — use [Auth Token](#login-using-auth-token) for production.
</Note>

<Tabs>
  <Tab title="JavaScript">
    ```js lines highlight={4-6} theme={null}
    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
    });
    ```
  </Tab>
</Tabs>

***

### Setting Session Storage Mode

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

<Tabs>
  <Tab title="JavaScript">
    ```js lines highlight={5-7} theme={null}
    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);
    ```
  </Tab>

  <Tab title="TypeScript">
    ```ts lines highlight={5-7} theme={null}
    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);
    ```
  </Tab>
</Tabs>

### Get Logged In User

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

<Tabs>
  <Tab title="JavaScript">
    ```js lines theme={null}
    import { CometChatUIKit } from "@cometchat/chat-uikit-react"; //import uikit package

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

***

### Login using Auth Key

Simple authentication for development/POC. For production, use [Auth Token](#login-using-auth-token).

<Tabs>
  <Tab title="JavaScript">
    ```js lines highlight={3} theme={null}
    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);
    ```
  </Tab>

  <Tab title="TypeScript">
    ```ts lines highlight={3} theme={null}
    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);
    ```
  </Tab>
</Tabs>

***

### Login using Auth Token

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

1. [Create a User](/rest-api/chat-apis) via the CometChat API when the user signs up in your app.
2. [Create an Auth Token](/rest-api/chat-apis) 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.

<Tabs>
  <Tab title="JavaScript">
    ```js lines highlight={3} theme={null}
    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);
    ```
  </Tab>

  <Tab title="TypeScript">
    ```ts lines highlight={3} theme={null}
    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);
    ```
  </Tab>
</Tabs>

***

### Logout

Ends the current user session.

<Tabs>
  <Tab title="JavaScript">
    ```js lines theme={null}
    import { CometChatUIKit } from "@cometchat/chat-uikit-react"; //import uikit package

    CometChatUIKit.logout();
    ```
  </Tab>
</Tabs>

***

### Create user

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

<Tabs>
  <Tab title="JavaScript">
    ```js lines highlight={4-6} theme={null}
    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);
    ```
  </Tab>

  <Tab title="TypeScript">
    ```ts lines highlight={4-6} theme={null}
    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);
    ```
  </Tab>
</Tabs>

***

### Update user

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

<Tabs>
  <Tab title="JavaScript">
    ```js lines highlight={4-6} theme={null}
    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);
    ```
  </Tab>

  <Tab title="TypeScript">
    ```ts lines highlight={4-6} theme={null}
    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);
    ```
  </Tab>
</Tabs>

***

### Base Message

#### Text message

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

<Tabs>
  <Tab title="1:1 chat">
    ```tsx lines highlight={5-6} theme={null}
    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);
    ```
  </Tab>

  <Tab title="Group chat">
    ```tsx lines highlight={5-6} theme={null}
    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);
    ```
  </Tab>
</Tabs>

***

#### Media message

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

<Note>
  Replace `INPUT FILE OBJECT` with the actual [File](https://developer.mozilla.org/en-US/docs/Web/API/File) object.
</Note>

<Tabs>
  <Tab title="1:1 chat">
    ```tsx lines highlight={5} theme={null}
    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);
    ```
  </Tab>

  <Tab title="Group chat">
    ```tsx lines highlight={5} theme={null}
    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);
    ```
  </Tab>
</Tabs>

***

#### Custom message

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

<Tabs>
  <Tab title="1:1 chat">
    ```tsx lines highlight={5,7,8} theme={null}
    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);
    ```
  </Tab>

  <Tab title="Group chat">
    ```tsx lines highlight={5,7,8} theme={null}
    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);
    ```
  </Tab>
</Tabs>