📝 docs(login.mdx): add guide for sign up and sign in functionality in Langflow

📝 docs(login.mdx): explain the purpose of login functionality and introduce enhanced login mechanism in Langflow

📝 docs(login.mdx): document the crucial environment variables for configuring the login settings in Langflow

📝 docs(login.mdx): provide information on how to disable automatic login and enforce user authentication in Langflow

📝 docs(login.mdx): explain the usage of LANGFLOW_SUPERUSER and LANGFLOW_SUPERUSER_PASSWORD environment variables for setting up a superuser in Langflow

📝 docs(login.mdx): document the usage of LANGFLOW_SECRET_KEY environment variable for encrypting the superuser's password in Langflow

📝 docs(login.mdx): explain the purpose of LANGFLOW_NEW_USER_IS_ACTIVE environment variable for automatically activating new users in Langflow

📝 docs(login.mdx): provide information on the command-line interface for managing superusers in Langflow

📝 docs(login.mdx): document the sign-up process in Langflow and provide an image of the sign-up page

📝 docs(login.mdx): explain how users can change their profile settings in Langflow and provide an image of the profile settings page

📝 docs(login.mdx): explain how the superuser can access the admin page in Langflow and provide an image of the admin page

📝 docs(superuser.mdx): add guide for superuser permissions in Langflow

docs/docs/guides/login.mdx

@@ -0,0 +1,122 @@
+import ThemedImage from "@theme/ThemedImage";
+import useBaseUrl from "@docusaurus/useBaseUrl";
+import ZoomableImage from "/src/theme/ZoomableImage.js";
+import ReactPlayer from "react-player";
+import Admonition from "@theme/Admonition";
+
+# Sign up and Sign in
+
+## Introduction
+
+The login functionality in Langflow serves to authenticate users and protect sensitive routes in the application. Starting from version 0.5, Langflow introduces an enhanced login mechanism that is governed by a few environment variables. This allows new secure features.
+
+## Environment Variables
+
+The following environment variables are crucial in configuring the login settings:
+
+- _`LANGFLOW_AUTO_LOGIN`_: Determines whether Langflow should automatically log users in. Default is `True`.
+- _`LANGFLOW_SUPERUSER`_: The username of the superuser.
+- _`LANGFLOW_SUPERUSER_PASSWORD`_: The password for the superuser.
+- _`LANGFLOW_SECRET_KEY`_: A key used for encrypting the superuser's password.
+- _`LANGFLOW_NEW_USER_IS_ACTIVE`_: Determines whether new users are automatically activated. Default is `False`.
+
+<Admonition type="info">
+  It is critical not to expose these environment variables in your code
+  repository. Always set them securely in your deployment environment, for
+  example, using Docker secrets, Kubernetes ConfigMaps/Secrets, or dedicated
+  secure environment configuration systems like AWS Secrets Manager.
+</Admonition>
+
+### _`LANGFLOW_AUTO_LOGIN`_
+
+By default, this variable is set to `True`. When enabled (`True`), Langflow operates as it did in versions prior to 0.5—automatic login without requiring explicit user authentication.
+
+To disable automatic login and enforce user authentication:
+
+```bash
+export LANGFLOW_AUTO_LOGIN=False
+```
+
+### _`LANGFLOW_SUPERUSER`_ and _`LANGFLOW_SUPERUSER_PASSWORD`_
+
+These environment variables are only relevant when `LANGFLOW_AUTO_LOGIN` is set to `False`. They specify the username and password for the superuser, which is essential for administrative tasks.
+
+To create a superuser manually:
+
+```bash
+export LANGFLOW_SUPERUSER=admin
+export LANGFLOW_SUPERUSER_PASSWORD=securepassword
+```
+
+You can also use the CLI command `langflow superuser` to set up a superuser interactively.
+
+### _`LANGFLOW_SECRET_KEY`_
+
+This environment variable holds a secret key used for encrypting the superuser's password. Make sure to set this to a secure, randomly generated string.
+
+```bash
+export LANGFLOW_SECRET_KEY=randomly_generated_secure_key
+```
+
+### _`LANGFLOW_NEW_USER_IS_ACTIVE`_
+
+By default, this variable is set to `False`. When enabled (`True`), new users are automatically activated and can log in without requiring explicit activation by the superuser.
+
+## Command-Line Interface
+
+Langflow provides a command-line utility for managing superusers:
+
+```bash
+langflow superuser
+```
+
+This command prompts you to enter the username and password for the superuser, unless they are already set using environment variables.
+
+## Sign-up
+
+With _`LANGFLOW_AUTO_LOGIN`_ set to _`False`_, Langflow requires users to sign up before they can log in. The sign-up page is the default landing page when a user visits Langflow for the first time.
+
+<ZoomableImage
+  alt="Docusaurus themed image"
+  sources={{
+    light: useBaseUrl("img/sign-up.png"),
+  }}
+  style={{ width: "50%", maxWidth: "600px", margin: "0 auto" }}
+/>
+
+## Profile settings
+
+Users can change their profile settings by clicking on the profile icon in the top right corner of the application. This opens a dropdown menu with the following options:
+
+- **Admin Page**: Opens the admin page, which is only accessible to the superuser.
+- **Profile Settings**: Opens the profile settings page.
+- **Sign Out**: Logs the user out.
+
+<ZoomableImage
+  alt="Docusaurus themed image"
+  sources={{
+    light: useBaseUrl("img/my-account.png"),
+  }}
+  style={{ width: "50%", maxWidth: "600px", margin: "0 auto" }}
+/>
+
+By clicking on **Profile Settings**, the user is taken to the profile settings page, where they can change their password and their profile picture.
+
+<ZoomableImage
+  alt="Docusaurus themed image"
+  sources={{
+    light: useBaseUrl("img/profile-settings.png"),
+  }}
+  style={{ maxWidth: "600px", margin: "0 auto" }}
+/>
+
+By clicking on **Admin Page**, the superuser is taken to the admin page, where they can manage users and groups.
+
+<ZoomableImage
+  alt="Docusaurus themed image"
+  sources={{
+    light: useBaseUrl("img/admin-page.png"),
+  }}
+  style={{ maxWidth: "600px", margin: "0 auto" }}
+
+/>

docs/docs/guides/superuser.mdx

@@ -0,0 +1,7 @@
+import ThemedImage from "@theme/ThemedImage";
+import useBaseUrl from "@docusaurus/useBaseUrl";
+import ZoomableImage from "/src/theme/ZoomableImage.js";
+import ReactPlayer from "react-player";
+
+Now, we need to explain what are the permissions the superuser gets. Once logged in, they can activate new users,
+edit them,

docs/sidebars.js

@@ -52,6 +52,7 @@ module.exports = {
       label: "Step-by-Step Guides",
       collapsed: false,
       items: [
+        "guides/login",
         "guides/loading_document",
         "guides/chatprompttemplate_guide",
         "guides/langfuse_integration",