This is documentation for the release candidate Stream Chat Angular SDK v6. For the latest stable version, see the latest version (v5).

Users and tokens

Connecting users

The client documentation details all important information about regular and authless users. Here is how you can connect these users in the Angular SDK:

// Connect by providing user id only
this.chatService.init("<API key>", "<user id>", "<token or provider>");

// Or connect by providing user settings such as name, image, etc.
this.chatService.init(
  "<API key>",
  {
    id: "<user id>",
    name: "Sara",
    image: "url/to/image",
  },
  "<token or provider>",
);

// Guest users
this.chatService.init(environment.apiKey, "john", "guest");

// Anonymous users
this.chatService.init(environment.apiKey, undefined, "anonymous");

Regular users (all users except guests and anonymous users) require a valid JWT token to access the Stream API. Tokens can’t be created securely on the client-side, so you should generate tokens on your server-side. All important information about tokens can be found in the client documentation.

Here is how you can provide the generated token to the Angular SDK:

// Option 1: using a static token
this.chatService.init(
  "<API key>",
  "<user or id>",
  // Example static token
  "eyJhbGcIOiJIUzI1NiIsInR5cCI6IkpXVCJ9..."
);

// Option 2. using a token provider
this.chatService.init(
  "<API key>",
  "<user or id>",
  // Example token provider
  // The SDK will call your token provider when you connect, or when the token is expired and it needs a new one
  // With token providers you can use short-living tokens, so we advise using this method in your production applications
  () => async {
    const token = await (<HTTP call to your own backend to obtain a new token>).token;

    return token;
  }
);

This is how you can use developer tokens with the Angular SDK:

import { StreamChat } from "stream-chat";

const apiKey = "<API key>";
const userId = "<user id>";
const devToken = StreamChat.getInstance(apiKey).devToken(userId);
this.chatService.init(apiKey, userId, devToken);

Disconnecting users

If your application allows connecting with different users, you should make sure to properly disconnect the previous user before connecting a new one:

private async connectUser(userId: string) {
    // Make sure to wait for disconnect before connecting a new user
    await this.disconnectUser();
    await this.chatService.init('<API key>', userId, '<token provider>');
    this.channelService.init('<channel filters>');
}

private async disconnectUser() {
    if (!this.chatService.chatClient?.user) {
        return;
    }
    this.channelService.reset();
    await this.chatService.disconnectUser();
}

User object

You can subscribe to the user$ Observable to get all important information (such us online state, unread count, etc) about the current user:

this.chatService.user$.subscribe((u) => console.log(u));

If there is no connected user, it will emit undefined.

Client state

Translation

Users and tokens

Connecting users

Generating tokens

Disconnecting users

User object