Blocking Users

Introduction

Blocking is a user-safety feature that lets people stop direct messages from specific users. It does not remove those users from shared channels, so their messages can still appear in group chats.

Best Practices

Communicate clearly that blocking affects DMs, not shared channels.
Require explicit user confirmation before blocking.
Handle errors gracefully and provide user feedback.
Keep block/unblock actions accessible in moderation UIs.
Ensure connectUser is established before calling block APIs.

Stream Chat

The Stream Chat SDK lets you block, unblock, and list blocked users. The client API is available after you connect a user.

Low Level Client Support

The low-level client exposes the block APIs directly.

Blocking a User

Use client.blockUser with the target user ID.

import { StreamChat } from "stream-chat";
const client = StreamChat.getInstance("<API_KEY>");

const blockUser = async (userId: string) => {
  try {
    await client.blockUser(userId);
  } catch (error) {
    console.error("Error blocking user:", error);
  }
};

Unblocking a User

Use client.unBlockUser with the target user ID.

import { StreamChat } from "stream-chat";
const client = StreamChat.getInstance("<API_KEY>");

const unBlockUser = async (userId: string) => {
  try {
    await client.unBlockUser(userId);
  } catch (error) {
    console.error("Error unblocking user:", error);
  }
};

Listing Blocked Users

Use client.getBlockedUsers and read the blocks array.

const client = StreamChat.getInstance("<API_KEY>");

const getBlockedUsers = async () => {
  try {
    const users = await client.getBlockedUsers();
    setBlockedUsers(users.blocks);
  } catch (error) {
    console.error("Error getting blocked users:", error);
  }
};

These APIs require an active client connection (client.connectUser).

Message Actions

You can wire blocking into a custom message action via Channel’s CustomMessageActionList. See the theming guide here.

import { Channel } from "stream-chat-react";

const CustomMessageActionList = () => {
  const { client } = useChatContext();
  const { message } = useMessageContext();

  return (
    <>
      <button
        className="str-chat__message-actions-list-item-button"
        onClick={() => client.blockUser(message.user_id!)}
      >
        Block <strong>{message.user?.name ?? message.user?.id}</strong>
      </button>

      {/** ...other action buttons... */}
    </>
  );
};

<Channel CustomMessageActionList={CustomMessageActionList}>...</Channel>;

Dialog Management

Audio Playback