docs: add info about client creation, users and tokens

docusaurus/docs/Angular/concepts/client-state.mdx

@@ -0,0 +1,59 @@
+---
+id: client-state
+title: Client state
+sidebar_position: 1
+---
+
+## Creating a client
+
+To connect a user, you need to have a client. This is how you can create one:
+
+```ts
+import { ChatClientService } from "stream-chat-angular";
+
+export class AppComponent {
+  constructor(private chatService: ChatClientService) {
+    this.chatService.init(
+      "<API key>",
+      "<user or id>",
+      "<token or provider>",
+      "<client options>"
+    );
+  }
+}
+```
+
+The Angular SDK uses the [stream-chat-js client](https://github.com/GetStream/stream-chat-js) under the hood, but most of the time you don't need to interact with the client directly, instead, you'll use the [`ChatClientService`](../../services/ChatClientService) or [`ChannelService`](../../services/ChannelService). However, it's still possible to access the client directly:
+
+```ts
+import { StreamChat } from "stream-chat";
+
+// only possible to do after chatService.init was called
+const client: StreamChat = this.chatService.chatClient;
+
+// independently from chatService
+const client: StreamChat = StreamChat.getInstance("<API key>");
+```
+
+The `StreamChat` client uses singleton pattern to ensure only one instance is created, so you'll get the same instance with both methods
+
+You can refer the [stream-chat-js client documentation](https://getstream.io/chat/docs/javascript/?language=javascript) to understand the most important concepts of the Stream API.
+
+## Client options
+
+Optionally you can provide configuration options to the client using the `init` method. Here is a simple example that sets the timeout for HTTP requests, and provide `console.log` for logging.
+
+```ts
+this.chatService.init("<API key>", "<user or id>", "<token or provider>", {
+  timeout: 10000,
+  logger: console.log,
+});
+```
+
+## Connecting and disconnecting users
+
+Please refer to the [Users and tokens guide](../../concepts/users-and-tokens/).
+
+## Reference
+
+For more information, please refer to the [`ChatClientService` reference documentation](../../services/ChatClientService).

docusaurus/docs/Angular/concepts/users-and-tokens.mdx

@@ -0,0 +1,100 @@
+---
+id: users-and-tokens
+title: Users and tokens
+sidebar_position: 1
+---
+
+## Connecting users
+
+The client documentation details all important information about [regular](https://getstream.io/chat/docs/javascript/init_and_users/?language=javascript) and [authless users](https://getstream.io/chat/docs/javascript/authless_users/?language=javascript). Here is how you can connect these users in the Angular SDK:
+
+```ts
+// 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");
+```
+
+## Generating tokens
+
+Regular 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](https://getstream.io/chat/docs/javascript/tokens_and_authentication/?language=javascript).
+
+Here is how you can provide the generated token to the Angular SDK:
+
+```ts
+// Option 1: using a static token
+this.chatService.init(
+  "<API key>",
+  {
+    id: "<user id>",
+    name: "Sara",
+    image: "url/to/image",
+  },
+  // Example static token
+  "eyJhbGcIOiJIUzI1NiIsInR5cCI6IkpXVCJ9..."
+);
+
+// Option 2. using a token provider
+this.chatService.init(
+  "<API key>",
+  {
+    id: "<user id>",
+    name: "Sara",
+    image: "url/to/image",
+  },
+  // 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>
+
+    return token;
+  }
+);
+```
+
+## 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:
+
+```ts
+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:
+
+```ts
+this.chatService.user$.subscribe((u) => console.log(u));
+```
+
+If there is no connected user, it will emit `undefined`.