✨ feat: support clerk as auth provider (#2374)

* ✨ feat: support clerk as auth provider

* ♻️ refactor: refactor the auth env config to `s3-oss/env`

* ✅ test: add test for the theme mode and action

* 💄 style: fix style

* 🌐 chore: update locale

* ✅ test: add more test

* 🎨 chore: clean code

* 📝 docs: update docs

.npmrc

@@ -14,3 +14,5 @@ public-hoist-pattern[]=*semantic-release*
 public-hoist-pattern[]=*stylelint*
 
 public-hoist-pattern[]=@auth/core
+public-hoist-pattern[]=@clerk/backend
+public-hoist-pattern[]=@clerk/types

docs/self-hosting/advanced/authentication.mdx

@@ -1,40 +1,47 @@
 ---
-title: >-
-  LobeChat Identity Verification Service - Centralized User Authorization
-  Management
+title: LobeChat Authorization Service
 description: >-
   Learn about LobeChat's support for configuring external identity verification
   services for centralized user authorization within enterprises/organizations.
   Explore supported services like Auth0, Microsoft Entra ID, Authentik, Github,
   and ZITADEL.
 tags:
-  - Identity Verification Service
-  - Centralized User Authorization
   - SSO Providers
-  - Auth0
-  - Microsoft Entra ID
-  - Authentik
-  - Github
-  - ZITADEL
+  - Next Auth
+  - Clerk
 ---
 
-# Identity Verification Service
+# LobeChat Authorization
 
 LobeChat supports the configuration of external identity verification services for internal use within enterprises/organizations to centrally manage user authorization.
 
-Currently supported identity verification services include:
+## Clerk
+
+Clerk is a comprehensive identity verification solution that has recently gained popularity. It provides a simple yet powerful API and services to handle user authentication and session management. Clerk's design philosophy is to offer a concise and modern authentication solution that enables developers to easily integrate and use it.
+
+LobeChat has deeply integrated with Clerk to provide users with a more secure and convenient login and registration experience. It also relieves developers from the burden of managing authentication logic. Clerk's concise and modern design philosophy aligns perfectly with LobeChat's goals, making user management on the entire platform more efficient and reliable.
 
-- [Auth0](/docs/self-hosting/advanced/sso-providers/auth0)
-- [Microsoft Entra ID](/docs/self-hosting/advanced/sso-providers/microsoft-entra-id)
-- [Authentik](/docs/self-hosting/advanced/sso-providers/authentik)
-- [Github](/docs/self-hosting/advanced/sso-providers/github)
-- [ZITADEL](/docs/self-hosting/advanced/sso-providers/zitadel)
+By setting the environment variables NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY and CLERK_SECRET_KEY in LobeChat's environment, you can enable and use Clerk.
+
+## Next Auth
+
+Currently supported identity verification services include:
 
+<Cards>
+  <Card href={'/docs/self-hosting/advanced/sso-providers/auth0'} title={'Auth0'} />
+  <Card
+    href={'/docs/self-hosting/advanced/sso-providers/microsoft-entra-id'}
+    title={'Microsoft Entra ID'}
+  />
+  <Card href={'/docs/self-hosting/advanced/sso-providers/authentik'} title={'Authentik'} />
+  <Card href={'/docs/self-hosting/advanced/sso-providers/github'} title={'Github'} />
+  <Card href={'/docs/self-hosting/advanced/sso-providers/zitadel'} title={'ZITADEL'} />
+</Cards>
 Click on the links to view the corresponding platform's configuration documentation.
 
 ## Advanced Configuration
 
-To simultaneously enable multiple identity verification sources, please set the `SSO_PROVIDERS` environment variable, separating them with commas, for example, `auth0,azure-ad,authentik`.
+To simultaneously enable multiple identity verification sources, please set the `NEXT_AUTH_SSO_PROVIDERS` environment variable, separating them with commas, for example, `auth0,azure-ad,authentik`.
 
 The order corresponds to the display order of the SSO providers.
 

docs/self-hosting/advanced/authentication.zh-CN.mdx

@@ -1,36 +1,45 @@
 ---
-title: LobeChat 外部身份验证服务配置指南
-description: >-
-  了解如何配置外部身份验证服务以统一管理用户授权。支持的身份验证服务包括 Auth0, Microsoft Entra ID, Authentik,
-  Github, 和 ZITADEL。
+title: LobeChat 身份验证服务配置
+description: 了解如何使用 Clerk 或 Next Auth 配置外部身份验证服务，以统一管理用户授权。支持的身份验证服务包括 Auth0、 Azure ID 等。
 tags:
   - 身份验证服务
   - LobeChat
   - SSO
-  - Auth0
-  - Microsoft Entra ID
-  - Authentik
-  - Github
-  - ZITADEL
+  - Clerk
 ---
 
 # 身份验证服务
 
-LobeChat 支持配置外部身份验证服务，供企业 / 组织内部使用，统一管理用户授权。
+LobeChat 支持使用 Clerk 或者 Next Auth 配置外部身份验证服务，供企业 / 组织内部使用，统一管理用户授权。
+
+## Clerk
+
+Clerk 是一个近期流行起来的全面的身份验证解决方案，它提供了简单而强大的 API 和服务来处理用户认证和会话管理。Clerk 的设计哲学是提供一套简洁、现代的认证解决方案，使得开发者可以轻松集成和使用。
+
+LobeChat 与 Clerk 做了深度集成，能够为用户提供一个更加安全、便捷的登录和注册体验，同时也为开发者减轻了管理身份验证逻辑的负担。Clerk 的简洁和现代的设计理念与 LobeChat 的目标非常契合，使得整个平台的用户管理更加高效和可靠。
+
+在 LobeChat 的环境变量中设置 `NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY` 和 `CLERK_SECRET_KEY`，即可开启和使用 Clerk。
+
+## Next Auth
 
 目前支持的身份验证服务有：
 
-- [Auth0](/docs/self-hosting/advanced/sso-providers/auth0)
-- [Microsoft Entra ID](/docs/self-hosting/advanced/sso-providers/microsoft-entra-id)
-- [Authentik](/docs/self-hosting/advanced/sso-providers/authentik)
-- [Github](/docs/self-hosting/advanced/sso-providers/github)
-- [ZITADEL](/docs/self-hosting/advanced/sso-providers/zitadel)
+<Cards>
+  <Card href={'/zh/docs/self-hosting/advanced/sso-providers/auth0'} title={'Auth0'} />
+  <Card
+    href={'/zh/docs/self-hosting/advanced/sso-providers/microsoft-entra-id'}
+    title={'Microsoft Entra ID'}
+  />
+  <Card href={'/zh/docs/self-hosting/advanced/sso-providers/authentik'} title={'Authentik'} />
+  <Card href={'/zh/docs/self-hosting/advanced/sso-providers/github'} title={'Github'} />
+  <Card href={'/zh/docs/self-hosting/advanced/sso-providers/zitadel'} title={'ZITADEL'} />
+</Cards>
 
-点击链接可以查看对应平台的配置文档。
+点击即可查看对应平台的配置文档。
 
 ## 进阶配置
 
-同时启用多个身份验证源请设置 `SSO_PROVIDERS` 环境变量，以逗号 `,` 分割，例如 `auth0,azure-ad,authentik`。
+同时启用多个身份验证源请设置 `NEXT_AUTH_SSO_PROVIDERS` 环境变量，以逗号 `,` 分割，例如 `auth0,azure-ad,authentik`。
 
 顺序为 SSO 提供商的显示顺序。
 

docs/self-hosting/advanced/model-list.mdx

@@ -14,8 +14,8 @@ tags:
 
 LobeChat supports customizing the model list during deployment. You can use `+` to add a model, `-` to hide a model, and use `model name=display name<extension configuration>` to customize the display name of a model, separated by English commas. The basic syntax is as follows:
 
-```shell
-id=displayName < maxToken:vision:fc:file > ,model2,model3
+```text
+id=displayName<maxToken:vision:fc:file>,model2,model3
 ```
 
 For example: `+qwen-7b-chat,+glm-6b,-gpt-3.5-turbo,gpt-4-0125-preview=gpt-4-turbo`

docs/self-hosting/advanced/model-list.zh-CN.mdx

@@ -12,8 +12,8 @@ tags:
 
 LobeChat 支持在部署时自定义模型列表，可以使用 `+` 增加一个模型，使用 `-` 来隐藏一个模型，使用 `模型名=展示名<扩展配置>` 来自定义模型的展示名，用英文逗号隔开。通过 `<>` 来添加扩展配置。基本语法如下：
 
-```shell
-id=displayName < maxToken:vision:fc:file > ,model2,model3
+```text
+id=displayName<maxToken:vision:fc:file>,model2,model3
 ```
 
 例如： `+qwen-7b-chat,+glm-6b,-gpt-3.5-turbo,gpt-4-0125-preview=gpt-4-turbo`

docs/self-hosting/environment-variables/auth.mdx

@@ -5,150 +5,143 @@ description: >-
   services in LobeChat, including OAuth SSO, NextAuth settings, and
   provider-specific details.
 tags:
-  - LobeChat
   - Authentication Service
-  - Environment Variables
   - OAuth SSO
+  - Clerk
   - NextAuth
-  - Provider Details
 ---
 
-## Authentication Service
+# Authentication Service
 
 LobeChat provides a complete authentication service capability when deployed. The following are the relevant environment variables. You can use these environment variables to easily define the identity verification services that need to be enabled in LobeChat.
 
-## General Settings
+## Next Auth
 
-### `ENABLE_OAUTH_SSO`
+### General Settings
 
-- Type: Required
-- Description: Enable single sign-on (SSO) for LobeChat. Set to `1` to enable single sign-on.
-- Default: `-`
-- Example: `1`
-
-### `SSO_PROVIDERS`
-
-- Type: Required
-- Description: Select the single sign-on provider for LoboChat. For multiple SSO Providers separating them with commas, for example, `auth0,azure-ad,authentik`.
-- Default: `auth0`
-- Example: `auth0,azure-ad,authentik`
-
-### `NEXTAUTH_SECRET`
+#### `NEXTAUTH_SECRET`
 
 - Type: Required
 - Description: Key used to encrypt the session tokens in Auth.js. You can generate the key using the following command: `openssl rand -base64 32`.
 - Default: `-`
 - Example: `Tfhi2t2pelSMEA8eaV61KaqPNEndFFdMIxDaJnS1CUI=`
 
-### `NEXTAUTH_URL`
+#### `NEXTAUTH_URL`
 
 - Type: Optional
 - Description: This URL is used to specify the callback address for Auth.js during OAuth authentication. It does not need to be set when deploying on Vercel.
 - Default: `-`
 - Example: `https://example.com/api/auth`
 
-## Auth0
+#### `NEXT_AUTH_SSO_PROVIDERS`
+
+- Type: Optional
+- Description: Select the single sign-on provider for LoboChat. For multiple SSO Providers separating them with commas, for example, `auth0,azure-ad,authentik`.
+- Default: `auth0`
+- Example: `auth0,azure-ad,authentik`
+
+### Auth0
 
-### `AUTH0_CLIENT_ID`
+#### `AUTH0_CLIENT_ID`
 
 - Type: Required
 - Description: Client ID of the Auth0 application. You can access it [here](https://manage.auth0.com/dashboard) and navigate to the application settings to view.
 - Default: `-`
 - Example: `evCnOJP1UX8FMnXR9Xkj5t0NyFn5p70P`
 
-### `AUTH0_CLIENT_SECRET`
+#### `AUTH0_CLIENT_SECRET`
 
 - Type: Required
 - Description: Client Secret of the Auth0 application.
 - Default: `-`
 - Example: `wnX7UbZg85ZUzF6ioxPLnJVEQa1Elbs7aqBUSF16xleBS5AdkVfASS49-fQIC8Rm`
 
-### `AUTH0_ISSUER`
+#### `AUTH0_ISSUER`
 
 - Type: Required
 - Description: Issuer/domain of the Auth0 application.
 - Default: `-`
 - Example: `https://example.auth0.com`
 
-## Microsoft Entra ID
+### Microsoft Entra ID
 
-### `AZURE_AD_CLIENT_ID`
+#### `AZURE_AD_CLIENT_ID`
 
 - Type: Required
 - Description: Client ID of the Microsoft Entra ID application.
 - Default: `-`
 - Example: `be8f6da1-58c3-4f16-ff1b-78f5148e10df`
 
-### `AZURE_AD_CLIENT_SECRET`
+#### `AZURE_AD_CLIENT_SECRET`
 
 - Type: Required
 - Description: Client Secret of the Microsoft Entra ID application.
 - Default: `-`
 - Example: `~gI8Q.pTiN1vwB6Gl.E1yFT1ojcXABkdACfJXaNj`
 
-### `AZURE_AD_TENANT_ID`
+#### `AZURE_AD_TENANT_ID`
 
 - Type: Required
 - Description: Tenant ID of the Microsoft Entra ID application.
 - Default: `-`
 - Example: `c8ae2f36-edf6-4cda-96b9-d3e198a47cba`
 
-## Authentik
+### Authentik
 
-### `AUTHENTIK_CLIENT_ID`
+#### `AUTHENTIK_CLIENT_ID`
 
 - Type: Required
 - Description: Client ID of the Authentik provider application. You can access it [here][auth0-client-page] and navigate to the application settings to view.
 - Default: `-`
 - Example: `evCnOJP1UX8FMnXR9Xkj5t0NyFn5p70P`
 
-### `AUTHENTIK_CLIENT_SECRET`
+#### `AUTHENTIK_CLIENT_SECRET`
 
 - Type: Required
 - Description: Client Secret of the Authentik provider application.
 - Default: `-`
 - Example: `wnX7UbZg85ZUzF6ioxPLnJVEQa1Elbs7aqBUSF16xleBS5AdkVfASS49-fQIC8Rm`
 
-### `AUTHENTIK_ISSUER`
+#### `AUTHENTIK_ISSUER`
 
 - Type: Required
 - Description: Issuer/domain of the Authentik provider application.
 - Default: `-`
 - Example: `https://your-authentik-domain.com/application/o/slug/`
 
-## Github
+### Github
 
-### `GITHUB_CLIENT_ID`
+#### `GITHUB_CLIENT_ID`
 
 - Type: Required
 - Description: Client ID of the Github application. You can access it [here](https://github.com/settings/apps) and navigate to the application settings to view.
 - Default: `-`
 - Example: `abd94200333283550508`
 
-### `GITHUB_CLIENT_SECRET`
+#### `GITHUB_CLIENT_SECRET`
 
 - Type: Required
 - Description: Client Secret of the Github application.
 - Default: `-`
 - Example: `dd262976ac0931d947e104891586a053f3d3750b`
 
-## ZITADEL
+### ZITADEL
 
-### `ZITADEL_CLIENT_ID`
+#### `ZITADEL_CLIENT_ID`
 
 - Type: Required
 - Description: Client ID of the ZITADEL application. This can be found under your application in the ZITADEL console.
 - Default: `-`
 - Example: `123456789012345678@your-project`
 
-### `ZITADEL_CLIENT_SECRET`
+#### `ZITADEL_CLIENT_SECRET`
 
 - Type: Required
 - Description: Client Secret of the ZITADEL application.
 - Default: `-`
 - Example: `9QF1n5ATzU7Z3mHp2Iw4gKX8kY6oR7uW1DnKcV3LqX2jF6iG3fBmJ1kV7nS5zE6A`
 
-### `ZITADEL_ISSUER`
+#### `ZITADEL_ISSUER`
 
 - Type: Required
 - Description: Issuer of the ZITADEL application. This is usually the URL of the ZITADEL instance, and can be found in `URLs` tab of your application in the console.
@@ -160,3 +153,19 @@ LobeChat provides a complete authentication service capability when deployed. Th
   providers, you can submit a [feature
   request](https://github.com/lobehub/lobe-chat/issues/new/choose) or Pull Request.
 </Callout>
+
+## Clerk
+
+### `NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY`
+
+- Type: Required
+- Description: Publishable key of the Clerk application. You can access it [here](https://dashboard.clerk.com) and navigate to the API Keys to view.
+- Default: `-`
+- Example: `pk_test_Zmxvd4luZy1wdW1hLTIyLmNsXXJrTmFjY291bnRzLmRldiQ` in dev / `pk_live_Y2xlcdsubG9iZWh1Yi1cbmMuY24k` in production
+
+### `CLERK_SECRET_KEY`
+
+- Type: Required
+- Description: Secret key of the Clerk application.
+- Default: `-`
+- Example: `sk_test_513Ma0P7IAWM1XMv4waxZjRYRajWTaCfJLjpEO3SD2` in dev / `sk_live_eMMlHjwJvZFUfczFljSKqZdwQtLvmczmsJSNmdrpeZ` in production