> ## Documentation Index
> Fetch the complete documentation index at: https://cometchat-22654f5b-docs-v6-beta2-flutter-uikit.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Login Listener

> Listen for real-time login and logout events using the CometChat JavaScript SDK LoginListener class.

<Accordion title="AI Integration Quick Reference">
  ```javascript theme={null}
  // Add login listener
  CometChat.addLoginListener("LISTENER_ID", new CometChat.LoginListener({
    loginSuccess: (user) => { },
    loginFailure: (error) => { },
    logoutSuccess: () => { },
    logoutFailure: (error) => { }
  }));

  // Remove login listener
  CometChat.removeLoginListener("LISTENER_ID");
  ```
</Accordion>

The CometChat SDK provides you with real-time updates for the `login` and `logout` events. This can be achieved using the `LoginListener` class provided. LoginListener consists of 4 events that can be triggered. These are as follows:

| Delegate Method      | Information                                                                                                                                                                                                     |
| -------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| loginSuccess(event)  | Informs you that the login was successful and provides you with a user object containing the data for the user that logged in.                                                                                  |
| loginFailure(event)  | Informs you about the failure while logging in the user and provides you with the reason for the failure wrapped in an object of the [`CometChatException`](/sdk/reference/auxiliary#cometchatexception) class. |
| logoutSuccess()      | Informs you about the user being logged out successfully.                                                                                                                                                       |
| logoutFailure(event) | Informs you about the failure while logging out the user. The reason for the failure can be obtained from the object of the [`CometChatException`](/sdk/reference/auxiliary#cometchatexception) class.          |

To add the `LoginListener`, you need to use the `addLoginListener()` method provided by the SDK which takes a unique identifier for the listener and of the the `LoginListener` class itself.

<Tabs>
  <Tab title="TypeScript">
    ```typescript theme={null}
      const listenerID: string = "UNIQUE_LISTENER_ID";
      CometChat.addLoginListener(
          listenerID,
          new CometChat.LoginListener({
              loginSuccess: (user: CometChat.User) => {
                  console.log("LoginListener :: loginSuccess", user);
              },
              loginFailure: (error: CometChat.CometChatException) => {
                  console.log("LoginListener :: loginFailure", error);
              },
              logoutSuccess: () => {
                  console.log("LoginListener :: logoutSuccess");
              },
              logoutFailure: (error: CometChat.CometChatException) => {
                  console.log("LoginListener :: logoutFailure", error);
              }
          })
      );
    ```
  </Tab>

  <Tab title="JavaScript">
    ```javascript theme={null}
      let listenerID = "UNIQUE_LISTENER_ID";
      CometChat.addLoginListener(
          listenerID,
          new CometChat.LoginListener({
              loginSuccess: (e) => {
                  console.log("LoginListener :: loginSuccess", e);
              },
              loginFailure: (e) => {
                  console.log("LoginListener :: loginFailure", e);
              },
              logoutSuccess: () => {
                  console.log("LoginListener :: logoutSuccess");
              },
              logoutFailure: (e) => {
                  console.log("LoginListener :: logoutFailure", e);
              }
          })
      );
    ```
  </Tab>
</Tabs>

### React Example

If you're using React, register the listener inside a `useEffect` hook and clean it up on unmount:

<Tabs>
  <Tab title="TypeScript">
    ```typescript theme={null}
    import { useEffect } from "react";
    import { CometChat } from "@cometchat/chat-sdk-javascript";

    function useLoginListener(): void {
      useEffect(() => {
        const listenerID: string = "LOGIN_LISTENER";
        CometChat.addLoginListener(
          listenerID,
          new CometChat.LoginListener({
            loginSuccess: (user: CometChat.User) => {
              console.log("User logged in:", user);
            },
            loginFailure: (error: CometChat.CometChatException) => {
              console.log("Login failed:", error);
            },
            logoutSuccess: () => {
              console.log("User logged out");
            },
            logoutFailure: (error: CometChat.CometChatException) => {
              console.log("Logout failed:", error);
            },
          })
        );

        return () => {
          CometChat.removeLoginListener(listenerID);
        };
      }, []);
    }
    ```
  </Tab>

  <Tab title="JavaScript">
    ```javascript theme={null}
    import { useEffect } from "react";
    import { CometChat } from "@cometchat/chat-sdk-javascript";

    function useLoginListener() {
      useEffect(() => {
        const listenerID = "LOGIN_LISTENER";
        CometChat.addLoginListener(
          listenerID,
          new CometChat.LoginListener({
            loginSuccess: (user) => {
              console.log("User logged in:", user);
            },
            loginFailure: (error) => {
              console.log("Login failed:", error);
            },
            logoutSuccess: () => {
              console.log("User logged out");
              // Redirect to login page, clear app state, etc.
            },
            logoutFailure: (error) => {
              console.log("Logout failed:", error);
            },
          })
        );

        return () => {
          CometChat.removeLoginListener(listenerID);
        };
      }, []);
    }
    ```
  </Tab>
</Tabs>

In order to stop receiving events related to login and logout you need to use the removeLoginListener() method provided by the SDK and pass the ID of the listener that needs to be removed.

<Tabs>
  <Tab title="TypeScript">
    ```typescript theme={null}
      const listenerID: string = "UNIQUE_LISTENER_ID";
      CometChat.removeLoginListener(listenerID);
    ```
  </Tab>

  <Tab title="JavaScript">
    ```javascript theme={null}
      const listenerID = "UNIQUE_LISTENER_ID";
      CometChat.removeLoginListener(listenerID);
    ```
  </Tab>
</Tabs>

<Warning>
  Always remove login listeners when they're no longer needed (e.g., on component unmount or page navigation). Failing to remove listeners can cause memory leaks and duplicate event handling.
</Warning>

***

## Next Steps

<CardGroup cols={2}>
  <Card title="Authentication" icon="lock" href="/sdk/javascript/authentication-overview">
    Learn about login methods and auth tokens
  </Card>

  <Card title="Connection Status" icon="signal" href="/sdk/javascript/connection-status">
    Monitor the SDK connection state in real time
  </Card>

  <Card title="All Real-Time Listeners" icon="tower-broadcast" href="/sdk/javascript/all-real-time-listeners">
    Complete reference for all SDK event listeners
  </Card>

  <Card title="WebSocket Management" icon="plug" href="/sdk/javascript/managing-web-sockets-connections-manually">
    Manually manage WebSocket connections
  </Card>
</CardGroup>