Login Listener

Monitor authentication state changes in real-time

Quick Reference for AI Agents & Developers

// Add login listener
CometChat.addLoginListener("AUTH_LISTENER", new CometChat.LoginListener({
  loginSuccess: (user) => console.log("Logged in:", user.getUid()),
  logoutSuccess: () => console.log("Logged out")
}));

// Remove listener
CometChat.removeLoginListener("AUTH_LISTENER");

The LoginListener provides real-time updates for authentication events, enabling you to respond to login/logout across devices and sessions.

Use Cases

• Sync UI state across browser tabs
• Handle session expiration gracefully
• Track authentication analytics
• Implement single-session enforcement

Listener Events

Event	Description	Data
loginSuccess	User logged in successfully	CometChat.User
loginFailure	Login attempt failed	CometChat.CometChatException
logoutSuccess	User logged out successfully	None
logoutFailure	Logout attempt failed	CometChat.CometChatException

Implementation

JavaScript

const listenerID = "AUTH_LISTENER";

CometChat.addLoginListener(
  listenerID,
  new CometChat.LoginListener({
    loginSuccess: (user) => {
      console.log("Login successful:", user.getUid());
      // Update UI to logged-in state
      // Initialize chat features
    },
    loginFailure: (error) => {
      console.error("Login failed:", error.message);
      // Show error message
      // Redirect to login page
    },
    logoutSuccess: () => {
      console.log("Logout successful");
      // Clear local data
      // Redirect to login page
    },
    logoutFailure: (error) => {
      console.error("Logout failed:", error.message);
      // Handle logout error
    }
  })
);

TypeScript

const listenerID: string = "AUTH_LISTENER";

CometChat.addLoginListener(
  listenerID,
  new CometChat.LoginListener({
    loginSuccess: (user: CometChat.User): void => {
      console.log("Login successful:", user.getUid());
      // Update UI to logged-in state
    },
    loginFailure: (error: CometChat.CometChatException): void => {
      console.error("Login failed:", error.message);
      // Show error message
    },
    logoutSuccess: (): void => {
      console.log("Logout successful");
      // Clear local data
    },
    logoutFailure: (error: CometChat.CometChatException): void => {
      console.error("Logout failed:", error.message);
      // Handle logout error
    }
  })
);

Remove Listener

Remove the listener when it’s no longer needed:

JavaScript

CometChat.removeLoginListener("AUTH_LISTENER");

TypeScript

CometChat.removeLoginListener("AUTH_LISTENER");

React Integration

JavaScript

import { useEffect, useState } from "react";
import { CometChat } from "@cometchat/chat-sdk-javascript";

function useAuthState() {
  const [user, setUser] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    // Check initial auth state
    const checkAuth = async () => {
      try {
        const loggedInUser = await CometChat.getLoggedinUser();
        setUser(loggedInUser);
      } finally {
        setLoading(false);
      }
    };
    
    checkAuth();

    // Listen for auth changes
    CometChat.addLoginListener(
      "AUTH_STATE_LISTENER",
      new CometChat.LoginListener({
        loginSuccess: (loggedInUser) => {
          setUser(loggedInUser);
        },
        logoutSuccess: () => {
          setUser(null);
        }
      })
    );

    return () => {
      CometChat.removeLoginListener("AUTH_STATE_LISTENER");
    };
  }, []);

  return { user, loading };
}

TypeScript

import { useEffect, useState } from "react";
import { CometChat } from "@cometchat/chat-sdk-javascript";

interface AuthState {
  user: CometChat.User | null;
  loading: boolean;
}

function useAuthState(): AuthState {
  const [user, setUser] = useState<CometChat.User | null>(null);
  const [loading, setLoading] = useState<boolean>(true);

  useEffect(() => {
    // Check initial auth state
    const checkAuth = async () => {
      try {
        const loggedInUser = await CometChat.getLoggedinUser();
        setUser(loggedInUser);
      } finally {
        setLoading(false);
      }
    };
    
    checkAuth();

    // Listen for auth changes
    CometChat.addLoginListener(
      "AUTH_STATE_LISTENER",
      new CometChat.LoginListener({
        loginSuccess: (loggedInUser: CometChat.User): void => {
          setUser(loggedInUser);
        },
        logoutSuccess: (): void => {
          setUser(null);
        }
      })
    );

    return () => {
      CometChat.removeLoginListener("AUTH_STATE_LISTENER");
    };
  }, []);

  return { user, loading };
}

Multi-Tab Synchronization

Keep authentication state synchronized across browser tabs:

JavaScript

// This listener fires when login/logout happens in ANY tab
CometChat.addLoginListener(
  "MULTI_TAB_SYNC",
  new CometChat.LoginListener({
    loginSuccess: (user) => {
      // Another tab logged in
      window.location.reload(); // Refresh to sync state
    },
    logoutSuccess: () => {
      // Another tab logged out
      window.location.href = "/login";
    }
  })
);

TypeScript

CometChat.addLoginListener(
  "MULTI_TAB_SYNC",
  new CometChat.LoginListener({
    loginSuccess: (user: CometChat.User): void => {
      window.location.reload();
    },
    logoutSuccess: (): void => {
      window.location.href = "/login";
    }
  })
);

Best Practices

Use Unique Listener IDs

Ensure each listener has a unique ID to prevent conflicts.

// Good
CometChat.addLoginListener("APP_AUTH_LISTENER", ...);
CometChat.addLoginListener("ANALYTICS_AUTH_LISTENER", ...);

Clean Up on Unmount

Always remove listeners when components unmount.

useEffect(() => {
  CometChat.addLoginListener("LISTENER_ID", listener);
  return () => CometChat.removeLoginListener("LISTENER_ID");
}, []);

Handle All Events

Implement handlers for both success and failure cases.

new CometChat.LoginListener({
  loginSuccess: (user) => { /* handle */ },
  loginFailure: (error) => { /* handle */ },
  logoutSuccess: () => { /* handle */ },
  logoutFailure: (error) => { /* handle */ }
})

Next Steps

Authentication

Learn about login methods

All Listeners

Explore all available listeners