📝 (features.mdx): update margin style of ZoomableImage to improve spacing 📝 (login.mdx): update margin style of ZoomableImage to improve spacing
133 lines
4.7 KiB
Text
133 lines
4.7 KiB
Text
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`.
|
|
|
|
All of these variables can be passed to the CLI command _`langflow run`_ through the _`--env-file`_ option. For example:
|
|
|
|
```bash
|
|
langflow run --env-file .env
|
|
```
|
|
|
|
<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"),
|
|
dark: 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"),
|
|
dark: useBaseUrl("img/my-account.png"),
|
|
}}
|
|
style={{ width: "50%", maxWidth: "600px", margin: "20px 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"),
|
|
dark: useBaseUrl("img/profile-settings.png"),
|
|
}}
|
|
style={{ maxWidth: "600px", margin: "20px 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"),
|
|
dark: useBaseUrl("img/admin-page.png"),
|
|
}}
|
|
style={{ maxWidth: "600px", margin: "0 auto" }}
|
|
|
|
/>
|