546 simple usernamepassword authentication (#556)

* Add username and password auth

* WIP

* WIP

* WIP

* Update docs

* Fix tests

* Polishing

* Polishing

* polishing

* fixes

* Polishing

* Docs Polishing

* Polishing

---------

Co-authored-by: Davor Runje <[email protected]>

docs/docs/SUMMARY.md

@@ -187,6 +187,13 @@ search:
                         - [AuthProtocol](api/fastagency/ui/mesop/auth/AuthProtocol.md)
                         - auth
                             - [AuthProtocol](api/fastagency/ui/mesop/auth/auth/AuthProtocol.md)
+                        - basic_auth
+                            - [BasicAuth](api/fastagency/ui/mesop/auth/basic_auth/BasicAuth.md)
+                            - [basic_auth_component](api/fastagency/ui/mesop/auth/basic_auth/basic_auth_component.md)
+                            - basic_auth
+                                - [BasicAuth](api/fastagency/ui/mesop/auth/basic_auth/basic_auth/BasicAuth.md)
+                            - basic_auth_component
+                                - [basic_auth_component](api/fastagency/ui/mesop/auth/basic_auth/basic_auth_component/basic_auth_component.md)
                         - firebase
                             - [FirebaseAuth](api/fastagency/ui/mesop/auth/firebase/FirebaseAuth.md)
                             - [FirebaseConfig](api/fastagency/ui/mesop/auth/firebase/FirebaseConfig.md)

docs/docs/en/api/fastagency/ui/mesop/auth/basic_auth/BasicAuth.md

@@ -0,0 +1,11 @@
+---
+# 0.5 - API
+# 2 - Release
+# 3 - Contributing
+# 5 - Template Page
+# 10 - Default
+search:
+  boost: 0.5
+---
+
+::: fastagency.ui.mesop.auth.basic_auth.BasicAuth

docs/docs/en/api/fastagency/ui/mesop/auth/basic_auth/basic_auth/BasicAuth.md

@@ -0,0 +1,11 @@
+---
+# 0.5 - API
+# 2 - Release
+# 3 - Contributing
+# 5 - Template Page
+# 10 - Default
+search:
+  boost: 0.5
+---
+
+::: fastagency.ui.mesop.auth.basic_auth.basic_auth.BasicAuth

docs/docs/en/api/fastagency/ui/mesop/auth/basic_auth/basic_auth_component.md

@@ -0,0 +1,11 @@
+---
+# 0.5 - API
+# 2 - Release
+# 3 - Contributing
+# 5 - Template Page
+# 10 - Default
+search:
+  boost: 0.5
+---
+
+::: fastagency.ui.mesop.auth.basic_auth.basic_auth_component

docs/docs/en/api/fastagency/ui/mesop/auth/basic_auth/basic_auth_component/basic_auth_component.md

@@ -0,0 +1,11 @@
+---
+# 0.5 - API
+# 2 - Release
+# 3 - Contributing
+# 5 - Template Page
+# 10 - Default
+search:
+  boost: 0.5
+---
+
+::: fastagency.ui.mesop.auth.basic_auth.basic_auth_component.basic_auth_component

docs/docs/en/user-guide/ui/mesop/basics.md

@@ -1,24 +1,29 @@
 # Mesop
 
-[**`MesopUI`**](../../../../api/fastagency/ui/mesop/MesopUI.md) in FastAgency offers a web-based interface for interacting with [**multi-agent workflows**](https://microsoft.github.io/autogen/0.2/docs/Use-Cases/agent_chat){target="_blank"}. Unlike the [**`ConsoleUI`**](../../../../api/fastagency/ui/console/ConsoleUI.md), which is text-based and runs in the command line, MesopUI provides a user-friendly browser interface, making it ideal for applications that need a more engaging, graphical interaction. MesopUI is perfect for building interactive web applications and enabling users to interact with agents in a more intuitive way.
+[**`MesopUI`**](../../../../api/fastagency/ui/mesop/MesopUI.md) in FastAgency offers a web-based interface for interacting with [**multi-agent workflows**](https://microsoft.github.io/autogen/0.2/docs/Use-Cases/agent_chat){target="_blank"}. Unlike the [**`ConsoleUI`**](../../../../api/fastagency/ui/console/ConsoleUI.md), which is text-based and runs in the command line, MesopUI provides a user-friendly browser interface, making it ideal for applications that need a more engaging and rich user experience.
 
-When creating a Mesop application, you can choose between two modes:
+When creating a [**Mesop**](https://google.github.io/mesop/){target="_blank"} application, you can choose between the following modes:
 
-- **Without Authentication**: Open access to all users.
-- **With Authentication**: Access restricted to authenticated users, using [**Firebase**](https://firebase.google.com){target="_blank"} as the authentication provider.
+- **No Authentication**: Open access to all users.
+- **Basic Authentication**: Simple username and password authentication for rapid prototyping. Not recommended for production.
+- **Firebase Authentication**: A more robust authentication mechanism that uses [**Firebase**](https://firebase.google.com){target="_blank"} as the provider for authenticating users.
 
     !!! note
-        Currently, [**Firebase**](https://firebase.google.com){target="_blank"} is the only supported authentication provider, with Google as the available sign-in method. Future releases will introduce more sign-in options within Firebase and expand support for additional authentication providers.
+        Currently, [**Firebase**](https://firebase.google.com){target="_blank"} authentication supports only Google as sign-in method. Future releases will introduce more sign-in options within Firebase.
 
 Below, we’ll walk through the steps to set up a basic student-teacher conversation with **[MesopUI](../../../../api/fastagency/ui/mesop/MesopUI.md)**, highlighting the process for adding authentication.
 
 ## Prerequisites
 
-=== "Without Authentication"
+=== "No Authentication"
 
     No prerequisites are required for this mode
 
-=== "With Authentication"
+=== "Basic Authentication"
+
+    No prerequisites are required for this mode
+
+=== "Firebase Authentication"
 
     To enable Firebase authentication,  follow these steps to set up your Firebase project and configure access:
 
@@ -77,13 +82,19 @@ You can setup the project using Cookiecutter by following the [**project setup g
 
 Alternatively, you can use **pip + venv**. To install **FastAgency** with MesopUI support, use the following command:
 
-=== "Without Authentication"
+=== "No Authentication"
 
     ```bash
     pip install "fastagency[autogen,mesop]"
     ```
 
-=== "With Authentication"
+=== "Basic Authentication"
+
+    ```bash
+    pip install "fastagency[autogen,mesop,basic_auth]"
+    ```
+
+=== "Firebase Authentication"
 
     ```bash
     pip install "fastagency[autogen,mesop,firebase]"
@@ -125,9 +136,11 @@ You can pass a custom [SecurityPolicy](https://google.github.io/mesop/api/page/#
 ui = MesopUI(security_policy=security_policy)
 ```
 
-=== "Without Authentication"
+=== "No Authentication"
+
+=== "Basic Authentication"
 
-=== "With Authentication"
+=== "Firebase Authentication"
 
     !!! info
         To support [Firebase's JavaScript libraries](https://firebase.google.com/docs/web/learn-more){target="_blank"}, FastAgency internally adjusts its security policy to allow required resources. Here are the specific adjustments made:
@@ -143,7 +156,7 @@ ui = MesopUI(security_policy=security_policy)
 
         These adjustments ensure that Firebase scripts and services can load without conflicts.
 
-Please see the [Mesop documentation](https://google.github.io/mesop/api/page/#mesop.security.security_policy.SecurityPolicy){target="_blank"} for details.
+For more details on configuring security, see the official [Mesop documentation](https://google.github.io/mesop/api/page/#mesop.security.security_policy.SecurityPolicy){target="_blank"}.
 
 ### Modifying styles
 
@@ -168,16 +181,25 @@ This example shows how to create a simple learning chat where a student agent in
 #### 1. **Import Required Modules**
 We begin by importing the necessary modules from **FastAgency** and **AutoGen**. These imports provide the essential building blocks for creating agents, workflows, and integrating MesopUI.
 
-=== "Without Authentication"
+=== "No Authentication"
 
     ```python
     {!> docs_src/user_guide/ui/mesop/main_mesop.py [ln:1-14] !}
     ```
 
-=== "With Authentication"
+=== "Basic Authentication"
+
+    ```python
+    {!> docs_src/user_guide/ui/mesop/main_mesop_basic_auth.py [ln:1-15] !}
+    ```
+
+    - [**`BasicAuth`**](../../../../api/fastagency/ui/mesop/auth/basic_auth/BasicAuth.md): This class
+    enables you to integrate basic username/password authentication into your Mesop application.
+
+=== "Firebase Authentication"
 
     ```python
-    {!> docs_src/user_guide/ui/mesop/main_mesop_auth.py [ln:1-15] !}
+    {!> docs_src/user_guide/ui/mesop/main_mesop_firebase_auth.py [ln:1-15] !}
     ```
 
     - [**`FirebaseAuth`**](../../../../api/fastagency/ui/mesop/auth/firebase/FirebaseAuth.md) and [**`FirebaseConfig`**](../../../../api/fastagency/ui/mesop/auth/firebase/FirebaseConfig.md): These classes enable you to integrate Firebase authentication into your Mesop application.
@@ -209,16 +231,62 @@ Here, we define a simple workflow where the **Student Agent** interacts with the
 #### 4. **Using MesopUI**
 Finally, we instantiate **[MesopUI](../../../../api/fastagency/ui/mesop/MesopUI.md)** to link the workflow to a web-based interface. This allows the user to interact with the agents through a web browser.
 
-=== "Without Authentication"
+=== "No Authentication"
     ```python
     {!> docs_src/user_guide/ui/mesop/main_mesop.py [ln:59-90] !}
     ```
 
     - **Explanation**: Here, we set up the **MesopUI** as the user interface for the workflow, which will allow the entire agent interaction to take place through a web-based platform.
 
-=== "With Authentication"
+=== "Basic Authentication"
+    ```python hl_lines="29-37 39"
+    {!> docs_src/user_guide/ui/mesop/main_mesop_basic_auth.py [ln:61-101] !}
+    ```
+
+    The [**`BasicAuth`**](../../../../api/fastagency/ui/mesop/auth/basic_auth/BasicAuth.md) class allows you to define a set of allowed users with [**bcrypt-hashed**](https://en.wikipedia.org/wiki/Bcrypt){target="_blank"} passwords, providing secure access to your Mesop application. Only users listed in the **`allowed_users`** dictionary can successfully authenticate.
+
+    !!! note
+
+        Only the [**bcrypt**](https://en.wikipedia.org/wiki/Bcrypt){target="_blank"} algorithm is supported for password hashing. Other algorithms, like **MD5** or **SHA-256**, won’t work with this [**`BasicAuth`**](../../../../api/fastagency/ui/mesop/auth/basic_auth/BasicAuth.md) class. Ensure all passwords are hashed using bcrypt.
+
+    **BasicAuth Configuration:**
+
+    1. User Setup:
+
+        - The **`allowed_users`** parameter accepts a dictionary that maps usernames (e.g., emails) to their [**bcrypt-hashed**](https://en.wikipedia.org/wiki/Bcrypt){target="_blank"} passwords.
+        - Only bcrypt hashing is supported; other hashing algorithms (like MD5 or SHA-256) will not work with [**`BasicAuth`**](../../../../api/fastagency/ui/mesop/auth/basic_auth/BasicAuth.md) class.
+
+    2. Hashing Passwords with Bcrypt:
+
+        - For each user, generate a bcrypt hash of their password using tools like the [**Bcrypt Hash Generator**](https://bcrypt.online){target="_blank"}.
+
+    **Generating Bcrypt-Hashed Passwords**
+
+    To quickly create a bcrypt hash for a password, follow these steps:
+
+    1. Open the [**Bcrypt Hash Generator**](https://bcrypt.online){target="_blank"}.
+    2. In the `Plain Text Input` field, enter the password `(e.g., someStrongPassword)`.
+    3. Set the `Cost Factor` to `10` (default).
+    4. Click `GENERATE HASH`.
+    5. Copy the hash, which will start with `$2y$...`, and use it as the password for the corresponding user.
+
+    For Example:
+
+    ```py
+    allowed_users = {
+        "[email protected]": "$2y$10$4aH/.C.WritjZAYskA0Dq.htlFDJTa49UuxSVUlp9JCa2K3PgUkaG"  # nosemgrep
+    }
+    ```
+
+    In this example, the hash is generated from `someStrongPassword` for the user `[email protected]`.
+
+    **Authenticating in the Mesop Web App**
+
+    To log in, users should enter their **original passwords** (e.g., `someStrongPassword` for  `[email protected]`) on the Mesop application’s login screen. The `BasicAuth` class then verifies the password by comparing its bcrypt hash with the stored hash in `allowed_users`. If the hashes match, the user is successfully authenticated.
+
+=== "Firebase Authentication"
     ```python hl_lines="29-36 39-44 46"
-    {!> docs_src/user_guide/ui/mesop/main_mesop_auth.py [ln:60-107] !}
+    {!> docs_src/user_guide/ui/mesop/main_mesop_firebase_auth.py [ln:60-107] !}
     ```
 
     - **Create Firebase Configuration**:
@@ -230,11 +298,9 @@ Finally, we instantiate **[MesopUI](../../../../api/fastagency/ui/mesop/MesopUI.
         Instiantiate the [**`FirebaseAuth`**](../../../../api/fastagency/ui/mesop/auth/firebase/FirebaseAuth.md) with Google as the sign-in method and pass the Firebase configuration.
 
         !!! note
-            Currently, [**Firebase**](https://firebase.google.com){target="_blank"} is the only supported authentication provider, with Google as the available sign-in method. Future releases will introduce more sign-in options within Firebase and expand support for additional authentication providers.
+            Currently, [**Firebase**](https://firebase.google.com){target="_blank"} is the only supported authentication provider, with Google as the available sign-in method. Future releases will introduce more sign-in options within Firebase.
 
-        - The `**allowed_users**` parameter:
-
-            The `allowed_users` parameter controls access to the application, with the following options:
+        - The `allowed_users` parameter controls access to the application, with the following options:
 
             - String (`str`):
 
@@ -256,7 +322,7 @@ Finally, we instantiate **[MesopUI](../../../../api/fastagency/ui/mesop/MesopUI.
 
 ### Complete Application Code
 
-=== "Without Authentication"
+=== "No Authentication"
 
     <details>
         <summary>main.py</summary>
@@ -265,12 +331,21 @@ Finally, we instantiate **[MesopUI](../../../../api/fastagency/ui/mesop/MesopUI.
         ```
     </details>
 
-=== "With Authentication"
+=== "Basic Authentication"
+
+    <details>
+        <summary>main.py</summary>
+        ```python
+        {!> docs_src/user_guide/ui/mesop/main_mesop_basic_auth.py !}
+        ```
+    </details>
+
+=== "Firebase Authentication"
 
     <details>
         <summary>main.py</summary>
         ```python
-        {!> docs_src/user_guide/ui/mesop/main_mesop_auth.py !}
+        {!> docs_src/user_guide/ui/mesop/main_mesop_firebase_auth.py !}
         ```
     </details>
 
@@ -317,11 +392,16 @@ The outputs will vary based on the interface, here is the output of the last ter
 [2024-10-15 16:57:44 +0530] [36365] [INFO] Using worker: sync
 [2024-10-15 16:57:44 +0530] [36366] [INFO] Booting worker with pid: 36366
 ```
-=== "Without Authentication"
+=== "No Authentication"
 
     ![Initial message](../../getting-started/images/chat.png)
 
-=== "With Authentication"
+=== "Basic Authentication"
+
+    ![Initial message](./images/basic_auth_login.png)
+    ![Initial message](./images/basic_auth_chat.png)
+
+=== "Firebase Authentication"
 
     ![Initial message](./images/auth_login.png)
     ![Initial message](./images/auth_chat.png)