Added API key access to AUTO_LOGIN=True and fixed SecretKeyModal (#1994)

* chore: Add type attribute to button in SecretKeyModal

* chore: Refactor Header component to fix autoLogin button visibility

* docs(api.mdx): update admonition message to remove reference to LANGFLOW_AUTO_LOGIN environment variable
docs(cli.mdx): update CLI command example to use 'run' subcommand instead of no arguments
feat(cli.mdx): add 'api-key' command to create API key for default superuser when LANGFLOW_AUTO_LOGIN is True

* docs(api.mdx): update admonition message to remove reference to LANGFLOW_AUTO_LOGIN environment variable

* chore: Fix typo in get-curl-code.tsx

---------

Co-authored-by: anovazzi1 <otavio2204@gmail.com>

docs/docs/administration/api.mdx

@@ -7,9 +7,12 @@ import Admonition from "@theme/Admonition";
 Langflow provides an API key functionality that allows users to access their individual components and flows without traditional login authentication. The API key is a user-specific token that can be included in the request header or query parameter to authenticate API calls. This documentation outlines how to generate, use, and manage API keys in Langflow.
 
 <Admonition type="warning">
-  This feature requires the LANGFLOW_AUTO_LOGIN environment variable to be set to False.
+  The default user and password are set using the LANGFLOW_SUPERUSER and
-  The default user and password are set using the LANGFLOW_SUPERUSER and LANGFLOW_SUPERUSER_PASSWORD environment variables.
+  LANGFLOW_SUPERUSER_PASSWORD environment variables.
-  The default values are langflow and langflow, respectively.
+
+The default values are
+langflow and langflow, respectively.
+
 </Admonition>
 
 ## Generating an API Key

docs/docs/administration/cli.mdx

@@ -7,12 +7,12 @@ Langflow's Command Line Interface (CLI) is a powerful tool that allows you to in
 Running the CLI without any arguments will display a list of available commands and options.
 
 ```bash
-python -m langflow --help
+python -m langflow run --help
 # or
-python -m langflow
+python -m langflow run
 ```
 
-Each option is detailed below:
+Each option for `run` command are detailed below:
 
 - `--help`: Displays all available options.
 - `--host`: Defines the host to bind the server to. Can be set using the `LANGFLOW_HOST` environment variable. The default is `127.0.0.1`.
@@ -35,6 +35,41 @@ Each option is detailed below:
 
 These parameters are important for users who need to customize the behavior of Langflow, especially in development or specialized deployment scenarios.
 
+### API Key Command
+
+The `api-key` command allows you to create an API key for accessing Langflow's API when `LANGFLOW_AUTO_LOGIN` is set to `True`.
+
+```bash
+python -m langflow api-key --help
+
+ Usage: langflow api-key [OPTIONS]
+
+ Creates an API key for the default superuser if AUTO_LOGIN is enabled.
+ Args:     log_level (str, optional): Logging level. Defaults to "error".
+ Returns:     None
+
+╭─ Options ───────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────╮
+│ --log-level        TEXT  Logging level. [env var: LANGFLOW_LOG_LEVEL] [default: error]                                                                                              │
+│ --help                   Show this message and exit.                                                                                                                                │
+╰─────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────╯
+```
+
+Once you run the `api-key` command, it will create an API key for the default superuser if `LANGFLOW_AUTO_LOGIN` is set to `True`.
+
+```bash
+python -m langflow api-key
+╭─────────────────────────────────────────────────────────────────────╮
+│ API Key Created Successfully:                                       │
+│                                                                     │
+│ sk-O0elzoWID1izAH8RUKrnnvyyMwIzHi2Wk-uXWoNJ2Ro                      │
+│                                                                     │
+│ This is the only time the API key will be displayed.                │
+│ Make sure to store it in a secure location.                         │
+│                                                                     │
+│ The API key has been copied to your clipboard. Cmd + V to paste it. │
+╰─────────────────────────────────────────────────────────────────────╯
+```
+
 ### Environment Variables
 
 You can configure many of the CLI options using environment variables. These can be exported in your operating system or added to a `.env` file and loaded using the `--env-file` option.

src/frontend/src/components/headerComponent/index.tsx

@@ -56,7 +56,7 @@ export default function Header(): JSX.Element {
     const lastFlowVisitedIndex = routeHistory
       .reverse()
       .findIndex(
-        (path) => path.includes("/flow/") && path !== location.pathname,
+        (path) => path.includes("/flow/") && path !== location.pathname
       );
 
     const lastFlowVisited = routeHistory[lastFlowVisitedIndex];
@@ -181,7 +181,7 @@ export default function Header(): JSX.Element {
               />
             </div>
           </AlertDropdown>
-          {!autoLogin && (
+          {autoLogin && (
             <button
               onClick={() => {
                 navigate("/account/api-keys");

src/frontend/src/modals/apiModal/utils/get-curl-code.tsx

@@ -21,6 +21,6 @@ export default function getCurlCode(
     -d '{"input_value": "message",
     "output_type": "chat",
     "input_type": "chat",
-    "tweaks": ${JSON.stringify(tweaksObject, null, 2)}'
+    "tweaks": ${JSON.stringify(tweaksObject, null, 2)}}'
     `;
 }

src/frontend/src/modals/secretKeyModal/index.tsx

@@ -147,6 +147,7 @@ export default function SecretKeyModal({
           {renderKey === false && (
             <div className="float-right">
               <Button
+                type="button"
                 className="mr-3"
                 variant="outline"
                 onClick={() => {