@lobehub/chat 0.153.0 → 0.154.0

package/src/app/(main)/market/loading.tsx

@@ -1,3 +1,15 @@
+'use client';
+
 import { Skeleton } from 'antd';
+import { Flexbox } from 'react-layout-kit';
 
-export default () => <Skeleton paragraph={{ rows: 8 }} style={{ marginBlock: 24 }} title={false} />;
+export default () => (
+  <Flexbox gap={16}>
+    <Skeleton.Input active block />
+    <Skeleton paragraph={{ rows: 8 }} style={{ marginBlock: 24 }} title={false} />
+    <Skeleton.Button active />
+    <Skeleton paragraph={{ rows: 8 }} style={{ marginBlock: 24 }} title={false} />
+    <Skeleton.Button active />
+    <Skeleton paragraph={{ rows: 8 }} style={{ marginBlock: 24 }} title={false} />
+  </Flexbox>
+);

package/src/app/(main)/settings/common/features/Common.tsx

@@ -21,7 +21,7 @@ type SettingItemGroup = ItemGroup;
 
 export interface SettingsCommonProps {
   showAccessCodeConfig: boolean;
-  showOAuthLogin: boolean;
+  showOAuthLogin?: boolean;
 }
 
 const Common = memo<SettingsCommonProps>(({ showAccessCodeConfig, showOAuthLogin }) => {

package/src/app/(main)/settings/common/features/Theme/index.tsx

@@ -8,6 +8,7 @@ import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import { useSyncSettings } from '@/app/(main)/settings/hooks/useSyncSettings';
+import { enableAuth } from '@/const/auth';
 import { FORM_STYLE } from '@/const/layoutTokens';
 import { imageUrl } from '@/const/url';
 import AvatarWithUpload from '@/features/AvatarWithUpload';
@@ -32,6 +33,7 @@ const Theme = memo(() => {
     children: [
       {
         children: <AvatarWithUpload />,
+        hidden: enableAuth,
         label: t('settingTheme.avatar.title'),
         minWidth: undefined,
       },

package/src/app/(main)/settings/common/index.tsx

@@ -1,15 +1,19 @@
+import { authEnv } from '@/config/auth';
 import { getServerConfig } from '@/config/server';
 
 import Common from './features/Common';
 import Theme from './features/Theme';
 
-const { SHOW_ACCESS_CODE_CONFIG, ENABLE_OAUTH_SSO } = getServerConfig();
-
 const Page = () => {
+  const { SHOW_ACCESS_CODE_CONFIG } = getServerConfig();
+
   return (
     <>
       <Theme />
-      <Common showAccessCodeConfig={SHOW_ACCESS_CODE_CONFIG} showOAuthLogin={ENABLE_OAUTH_SSO} />
+      <Common
+        showAccessCodeConfig={SHOW_ACCESS_CODE_CONFIG}
+        showOAuthLogin={authEnv.NEXT_PUBLIC_ENABLE_NEXT_AUTH}
+      />
     </>
   );
 };

package/src/app/api/chat/[provider]/route.test.ts

@@ -1,18 +1,37 @@
 // @vitest-environment edge-runtime
+import { getAuth } from '@clerk/nextjs/server';
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
 
 import { LOBE_CHAT_AUTH_HEADER, OAUTH_AUTHORIZED } from '@/const/auth';
 import { AgentRuntime, LobeRuntimeAI } from '@/libs/agent-runtime';
 import { ChatErrorType } from '@/types/fetch';
 
-import { getJWTPayload } from '../auth/utils';
+import { checkAuthMethod, getJWTPayload } from '../auth/utils';
 import { POST } from './route';
 
+vi.mock('@clerk/nextjs/server', () => ({
+  getAuth: vi.fn(),
+}));
+
 vi.mock('../auth/utils', () => ({
   getJWTPayload: vi.fn(),
   checkAuthMethod: vi.fn(),
 }));
 
+// 定义一个变量来存储 enableAuth 的值
+let enableClerk = false;
+
+// 模拟 @/const/auth 模块
+vi.mock('@/const/auth', async (importOriginal) => {
+  const modules = await importOriginal();
+  return {
+    ...(modules as any),
+    get enableClerk() {
+      return enableClerk;
+    },
+  };
+});
+
 // 模拟请求和响应
 let request: Request;
 beforeEach(() => {
@@ -29,15 +48,16 @@ beforeEach(() => {
 afterEach(() => {
   // 清除模拟调用历史
   vi.clearAllMocks();
+  enableClerk = false;
 });
 
 describe('POST handler', () => {
-  describe(' init chat model', () => {
+  describe('init chat model', () => {
     it('should initialize AgentRuntime correctly with valid authorization', async () => {
       const mockParams = { provider: 'test-provider' };
 
       // 设置 getJWTPayload 和 initAgentRuntimeWithUserPayload 的模拟返回值
-      vi.mocked(getJWTPayload).mockResolvedValue({
+      vi.mocked(getJWTPayload).mockResolvedValueOnce({
         accessCode: 'test-access-code',
         apiKey: 'test-api-key',
         azureApiVersion: 'v1',
@@ -76,6 +96,46 @@ describe('POST handler', () => {
         errorType: 401,
       });
     });
+
+    it('should have pass clerk Auth when enable clerk', async () => {
+      enableClerk = true;
+
+      vi.mocked(getJWTPayload).mockResolvedValueOnce({
+        accessCode: 'test-access-code',
+        apiKey: 'test-api-key',
+        azureApiVersion: 'v1',
+      });
+
+      const mockParams = { provider: 'test-provider' };
+      // 设置 initAgentRuntimeWithUserPayload 的模拟返回值
+      vi.mocked(getAuth).mockReturnValue({} as any);
+      vi.mocked(checkAuthMethod).mockReset();
+
+      const mockRuntime: LobeRuntimeAI = { baseURL: 'abc', chat: vi.fn() };
+
+      vi.spyOn(AgentRuntime, 'initializeWithProviderOptions').mockResolvedValue(
+        new AgentRuntime(mockRuntime),
+      );
+
+      const request = new Request(new URL('https://test.com'), {
+        method: 'POST',
+        body: JSON.stringify({ model: 'test-model' }),
+        headers: {
+          [LOBE_CHAT_AUTH_HEADER]: 'some-valid-token',
+          [OAUTH_AUTHORIZED]: '1',
+        },
+      });
+
+      await POST(request, { params: mockParams });
+
+      expect(checkAuthMethod).toBeCalledWith({
+        accessCode: 'test-access-code',
+        apiKey: 'test-api-key',
+        clerkAuth: {},
+        nextAuthAuthorized: true,
+      });
+    });
+
     it('should return InternalServerError error when throw a unknown error', async () => {
       const mockParams = { provider: 'test-provider' };
       vi.mocked(getJWTPayload).mockRejectedValueOnce(new Error('unknown error'));
@@ -95,6 +155,12 @@ describe('POST handler', () => {
 
   describe('chat', () => {
     it('should correctly handle chat completion with valid payload', async () => {
+      vi.mocked(getJWTPayload).mockResolvedValueOnce({
+        accessCode: 'test-access-code',
+        apiKey: 'test-api-key',
+        azureApiVersion: 'v1',
+      });
+
       const mockParams = { provider: 'test-provider' };
       const mockChatPayload = { message: 'Hello, world!' };
       request = new Request(new URL('https://test.com'), {
@@ -114,6 +180,13 @@ describe('POST handler', () => {
     });
 
     it('should return an error response when chat completion fails', async () => {
+      // 设置 getJWTPayload 和 initAgentRuntimeWithUserPayload 的模拟返回值
+      vi.mocked(getJWTPayload).mockResolvedValueOnce({
+        accessCode: 'test-access-code',
+        apiKey: 'test-api-key',
+        azureApiVersion: 'v1',
+      });
+
       const mockParams = { provider: 'test-provider' };
       const mockChatPayload = { message: 'Hello, world!' };
       request = new Request(new URL('https://test.com'), {

package/src/app/api/chat/auth/index.test.ts

@@ -0,0 +1,77 @@
+import { getAuth } from '@clerk/nextjs/server';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+
+import { createErrorResponse } from '@/app/api/errorResponse';
+import { AgentRuntimeError } from '@/libs/agent-runtime';
+import { ChatErrorType } from '@/types/fetch';
+
+import { RequestHandler, checkAuth } from './index';
+import { checkAuthMethod, getJWTPayload } from './utils';
+
+vi.mock('@clerk/nextjs/server', () => ({
+  getAuth: vi.fn(),
+}));
+
+vi.mock('@/app/api/errorResponse', () => ({
+  createErrorResponse: vi.fn(),
+}));
+
+vi.mock('./utils', () => ({
+  checkAuthMethod: vi.fn(),
+  getJWTPayload: vi.fn(),
+}));
+
+describe('checkAuth', () => {
+  const mockHandler: RequestHandler = vi.fn();
+  const mockRequest = new Request('https://example.com');
+  const mockOptions = { params: { provider: 'mock' } };
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  afterEach(() => {
+    vi.resetAllMocks();
+  });
+
+  it('should return unauthorized error if no authorization header', async () => {
+    await checkAuth(mockHandler)(mockRequest, mockOptions);
+
+    expect(createErrorResponse).toHaveBeenCalledWith(ChatErrorType.Unauthorized, {
+      error: AgentRuntimeError.createError(ChatErrorType.Unauthorized),
+      provider: 'mock',
+    });
+    expect(mockHandler).not.toHaveBeenCalled();
+  });
+
+  it('should return error response on getJWTPayload error', async () => {
+    const mockError = AgentRuntimeError.createError(ChatErrorType.Unauthorized);
+    mockRequest.headers.set('Authorization', 'invalid');
+    vi.mocked(getJWTPayload).mockRejectedValueOnce(mockError);
+
+    await checkAuth(mockHandler)(mockRequest, mockOptions);
+
+    expect(createErrorResponse).toHaveBeenCalledWith(ChatErrorType.Unauthorized, {
+      error: mockError,
+      provider: 'mock',
+    });
+    expect(mockHandler).not.toHaveBeenCalled();
+  });
+
+  it('should return error response on checkAuthMethod error', async () => {
+    const mockError = AgentRuntimeError.createError(ChatErrorType.Unauthorized);
+    mockRequest.headers.set('Authorization', 'valid');
+    vi.mocked(getJWTPayload).mockResolvedValueOnce({});
+    vi.mocked(checkAuthMethod).mockImplementationOnce(() => {
+      throw mockError;
+    });
+
+    await checkAuth(mockHandler)(mockRequest, mockOptions);
+
+    expect(createErrorResponse).toHaveBeenCalledWith(ChatErrorType.Unauthorized, {
+      error: mockError,
+      provider: 'mock',
+    });
+    expect(mockHandler).not.toHaveBeenCalled();
+  });
+});

package/src/app/api/chat/auth/index.ts

@@ -1,5 +1,9 @@
+import { AuthObject } from '@clerk/backend/internal';
+import { getAuth } from '@clerk/nextjs/server';
+import { NextRequest } from 'next/server';
+
 import { createErrorResponse } from '@/app/api/errorResponse';
-import { JWTPayload, LOBE_CHAT_AUTH_HEADER, OAUTH_AUTHORIZED } from '@/const/auth';
+import { JWTPayload, LOBE_CHAT_AUTH_HEADER, OAUTH_AUTHORIZED, enableClerk } from '@/const/auth';
 import { AgentRuntimeError, ChatCompletionErrorPayload } from '@/libs/agent-runtime';
 import { ChatErrorType } from '@/types/fetch';
 
@@ -23,9 +27,21 @@ export const checkAuth =
 
       if (!authorization) throw AgentRuntimeError.createError(ChatErrorType.Unauthorized);
 
-      // check the Auth With payload
+      // check the Auth With payload and clerk auth
+      let clerkAuth = {} as AuthObject;
+
+      if (enableClerk) {
+        clerkAuth = getAuth(req as NextRequest);
+      }
+
       jwtPayload = await getJWTPayload(authorization);
-      checkAuthMethod(jwtPayload.accessCode, jwtPayload.apiKey, oauthAuthorized);
+
+      checkAuthMethod({
+        accessCode: jwtPayload.accessCode,
+        apiKey: jwtPayload.apiKey,
+        clerkAuth,
+        nextAuthAuthorized: oauthAuthorized,
+      });
     } catch (e) {
       const {
         errorType = ChatErrorType.InternalServerError,

package/src/app/api/chat/auth/utils.ts

@@ -1,7 +1,14 @@
+import { type AuthObject } from '@clerk/backend/internal';
 import { importJWK, jwtVerify } from 'jose';
 
 import { getServerConfig } from '@/config/server';
-import { JWTPayload, JWT_SECRET_KEY, NON_HTTP_PREFIX } from '@/const/auth';
+import {
+  JWTPayload,
+  JWT_SECRET_KEY,
+  NON_HTTP_PREFIX,
+  enableClerk,
+  enableNextAuth,
+} from '@/const/auth';
 import { AgentRuntimeError } from '@/libs/agent-runtime';
 import { ChatErrorType } from '@/types/fetch';
 
@@ -30,6 +37,12 @@ export const getJWTPayload = async (token: string): Promise<JWTPayload> => {
   return payload as JWTPayload;
 };
 
+interface CheckAuthParams {
+  accessCode?: string;
+  apiKey?: string;
+  clerkAuth: AuthObject;
+  nextAuthAuthorized?: boolean;
+}
 /**
  * Check if the provided access code is valid, a user API key should be used or the OAuth 2 header is provided.
  *
@@ -38,19 +51,28 @@ export const getJWTPayload = async (token: string): Promise<JWTPayload> => {
  * @param {boolean} oauthAuthorized - Whether the OAuth 2 header is provided.
  * @throws {AgentRuntimeError} If the access code is invalid and no user API key is provided.
  */
-export const checkAuthMethod = (
-  accessCode?: string,
-  apiKey?: string,
-  oauthAuthorized?: boolean,
-) => {
-  const { ACCESS_CODES, ENABLE_OAUTH_SSO } = getServerConfig();
+export const checkAuthMethod = ({
+  apiKey,
+  nextAuthAuthorized,
+  accessCode,
+  clerkAuth,
+}: CheckAuthParams) => {
+  // clerk auth handler
+  if (enableClerk) {
+    // if there is no userId, means the use is not login, just throw error
+    if (!clerkAuth?.userId) throw AgentRuntimeError.createError(ChatErrorType.InvalidClerkUser);
+    // if the user is login, just return
+    else return;
+  }
 
-  // if OAuth 2 header is provided
-  if (ENABLE_OAUTH_SSO && oauthAuthorized) return;
+  // if next auth handler is provided
+  if (enableNextAuth && nextAuthAuthorized) return;
 
   // if apiKey exist
   if (apiKey) return;
 
+  const { ACCESS_CODES } = getServerConfig();
+
   // if accessCode doesn't exist
   if (!ACCESS_CODES.length) return;
 

package/src/app/api/plugin/gateway/route.ts

@@ -4,7 +4,7 @@ import { createGatewayOnEdgeRuntime } from '@lobehub/chat-plugins-gateway';
 import { getJWTPayload } from '@/app/api/chat/auth/utils';
 import { createErrorResponse } from '@/app/api/errorResponse';
 import { getServerConfig } from '@/config/server';
-import { LOBE_CHAT_AUTH_HEADER, OAUTH_AUTHORIZED } from '@/const/auth';
+import { LOBE_CHAT_AUTH_HEADER, OAUTH_AUTHORIZED, enableNextAuth } from '@/const/auth';
 import { LOBE_CHAT_TRACE_ID, TraceNameMap } from '@/const/trace';
 import { AgentRuntimeError } from '@/libs/agent-runtime';
 import { TraceClient } from '@/libs/traces';
@@ -14,13 +14,13 @@ import { getTracePayload } from '@/utils/trace';
 import { parserPluginSettings } from './settings';
 
 const checkAuth = (accessCode: string | null, oauthAuthorized: boolean | null) => {
-  const { ACCESS_CODES, PLUGIN_SETTINGS, ENABLE_OAUTH_SSO } = getServerConfig();
+  const { ACCESS_CODES, PLUGIN_SETTINGS } = getServerConfig();
 
   // if there is no plugin settings, just skip the auth
   if (!PLUGIN_SETTINGS) return { auth: true };
 
   // If authorized by oauth
-  if (oauthAuthorized && ENABLE_OAUTH_SSO) return { auth: true };
+  if (oauthAuthorized && enableNextAuth) return { auth: true };
 
   // if accessCode doesn't exist
   if (!ACCESS_CODES.length) return { auth: true };

package/src/components/Cell/Divider.tsx

@@ -5,6 +5,8 @@ import { memo } from 'react';
 
 const useStyles = createStyles(
   ({ css, token, isDarkMode }) => css`
+    flex: none;
+    width: 100%;
     height: 6px;
     background: ${isDarkMode ? token.colorBgContainer : token.colorBgLayout};
   `,

package/src/components/Cell/index.tsx

@@ -8,7 +8,11 @@ const { Item } = List;
 const useStyles = createStyles(({ css, token, isDarkMode }) => ({
   container: css`
     position: relative;
-    padding-block: 16px !important;
+
+    gap: 12px;
+
+    padding: 16px !important;
+
     background: ${isDarkMode ? token.colorBgLayout : token.colorBgContainer};
     border-radius: 0;
   `,

package/src/components/server/MobileNavLayout.tsx

@@ -38,6 +38,7 @@ const MobileContentLayout = ({
       {header}
       <Flexbox
         height="100%"
+        id={'lobe-mobile-scroll-container'}
         style={{
           overflowX: 'hidden',
           overflowY: 'auto',

package/src/config/auth.ts

@@ -0,0 +1,146 @@
+/* eslint-disable sort-keys-fix/sort-keys-fix , typescript-sort-keys/interface */
+import { createEnv } from '@t3-oss/env-nextjs';
+import { z } from 'zod';
+
+declare global {
+  // eslint-disable-next-line @typescript-eslint/no-namespace
+  namespace NodeJS {
+    interface ProcessEnv {
+      // ===== Clerk ===== //
+      NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY?: string;
+      CLERK_SECRET_KEY?: string;
+      CLERK_WEBHOOK_SECRET?: string;
+
+      // ===== Next Auth ===== //
+      /**
+       * @deprecated
+       */
+      ENABLE_OAUTH_SSO?: string;
+      NEXT_AUTH_SECRET?: string;
+      /**
+       * @deprecated
+       */
+      SSO_PROVIDERS?: string;
+      NEXT_AUTH_SSO_PROVIDERS?: string;
+
+      AUTH0_CLIENT_ID?: string;
+      AUTH0_CLIENT_SECRET?: string;
+      AUTH0_ISSUER?: string;
+
+      // Github
+      GITHUB_CLIENT_ID?: string;
+      GITHUB_CLIENT_SECRET?: string;
+
+      // Azure AD
+      AZURE_AD_CLIENT_ID?: string;
+      AZURE_AD_CLIENT_SECRET?: string;
+      AZURE_AD_TENANT_ID?: string;
+
+      // AUTHENTIK
+      AUTHENTIK_CLIENT_ID?: string;
+      AUTHENTIK_CLIENT_SECRET?: string;
+      AUTHENTIK_ISSUER?: string;
+
+      // ZITADEL
+      ZITADEL_CLIENT_ID?: string;
+      ZITADEL_CLIENT_SECRET?: string;
+      ZITADEL_ISSUER?: string;
+    }
+  }
+}
+
+export const getAuthConfig = () => {
+  if (process.env.ENABLE_OAUTH_SSO) {
+    console.warn(
+      '`ENABLE_OAUTH_SSO` is deprecated and will be removed in LobeChat 1.0. just set `NEXT_AUTH_SECRET` enough',
+    );
+  }
+
+  if (process.env.SSO_PROVIDERS) {
+    console.warn(
+      '`SSO_PROVIDERS` is deprecated and will be removed in LobeChat 1.0. Please replace with `NEXT_AUTH_SSO_PROVIDERS`',
+    );
+  }
+
+  return createEnv({
+    client: {
+      NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY: z.string().optional(),
+      /**
+       * whether to enabled clerk
+       */
+      NEXT_PUBLIC_ENABLE_CLERK_AUTH: z.boolean().optional(),
+
+      NEXT_PUBLIC_ENABLE_NEXT_AUTH: z.boolean().optional(),
+    },
+    server: {
+      // Clerk
+      CLERK_SECRET_KEY: z.string().optional(),
+
+      // NEXT-AUTH
+      NEXT_AUTH_SECRET: z.string().optional(),
+      NEXT_AUTH_SSO_PROVIDERS: z.string().optional().default('auth0'),
+
+      // Auth0
+      AUTH0_CLIENT_ID: z.string().optional(),
+      AUTH0_CLIENT_SECRET: z.string().optional(),
+      AUTH0_ISSUER: z.string().optional(),
+
+      // Github
+      GITHUB_CLIENT_ID: z.string().optional(),
+      GITHUB_CLIENT_SECRET: z.string().optional(),
+
+      // Azure AD
+      AZURE_AD_CLIENT_ID: z.string().optional(),
+      AZURE_AD_CLIENT_SECRET: z.string().optional(),
+      AZURE_AD_TENANT_ID: z.string().optional(),
+
+      // AUTHENTIK
+      AUTHENTIK_CLIENT_ID: z.string().optional(),
+      AUTHENTIK_CLIENT_SECRET: z.string().optional(),
+      AUTHENTIK_ISSUER: z.string().optional(),
+
+      // ZITADEL
+      ZITADEL_CLIENT_ID: z.string().optional(),
+      ZITADEL_CLIENT_SECRET: z.string().optional(),
+      ZITADEL_ISSUER: z.string().optional(),
+    },
+
+    runtimeEnv: {
+      // Clerk
+      NEXT_PUBLIC_ENABLE_CLERK_AUTH: !!process.env.NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY,
+      NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY: process.env.NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY,
+      CLERK_SECRET_KEY: process.env.CLERK_SECRET_KEY,
+
+      // Next Auth
+      NEXT_PUBLIC_ENABLE_NEXT_AUTH: !!process.env.NEXT_AUTH_SECRET || process.env.ENABLE_OAUTH_SSO,
+      NEXT_AUTH_SSO_PROVIDERS: process.env.NEXT_AUTH_SSO_PROVIDERS || process.env.SSO_PROVIDERS,
+      NEXT_AUTH_SECRET: process.env.NEXT_AUTH_SECRET,
+
+      // Auth0
+      AUTH0_CLIENT_ID: process.env.AUTH0_CLIENT_ID,
+      AUTH0_CLIENT_SECRET: process.env.AUTH0_CLIENT_SECRET,
+      AUTH0_ISSUER: process.env.AUTH0_ISSUER,
+
+      // Github
+      GITHUB_CLIENT_ID: process.env.GITHUB_CLIENT_ID,
+      GITHUB_CLIENT_SECRET: process.env.GITHUB_CLIENT_SECRET,
+
+      // Azure AD
+      AZURE_AD_CLIENT_ID: process.env.AZURE_AD_CLIENT_ID,
+      AZURE_AD_CLIENT_SECRET: process.env.AZURE_AD_CLIENT_SECRET,
+      AZURE_AD_TENANT_ID: process.env.AZURE_AD_TENANT_ID,
+
+      // AUTHENTIK
+      AUTHENTIK_CLIENT_ID: process.env.AUTHENTIK_CLIENT_ID,
+      AUTHENTIK_CLIENT_SECRET: process.env.AUTHENTIK_CLIENT_SECRET,
+      AUTHENTIK_ISSUER: process.env.AUTHENTIK_ISSUER,
+
+      // ZITADEL
+      ZITADEL_CLIENT_ID: process.env.ZITADEL_CLIENT_ID,
+      ZITADEL_CLIENT_SECRET: process.env.ZITADEL_CLIENT_SECRET,
+      ZITADEL_ISSUER: process.env.ZITADEL_ISSUER,
+    },
+  });
+};
+
+export const authEnv = getAuthConfig();

package/src/config/server/index.ts

@@ -1,6 +1,5 @@
 import { getAnalyticsConfig } from './analytics';
 import { getAppConfig } from './app';
-import { getAuthConfig } from './auth';
 import { getProviderConfig } from './provider';
 
 export const getServerConfig = () => {
@@ -10,8 +9,7 @@ export const getServerConfig = () => {
 
   const provider = getProviderConfig();
   const app = getAppConfig();
-  const auth = getAuthConfig();
   const analytics = getAnalyticsConfig();
 
-  return { ...provider, ...app, ...analytics, ...auth };
+  return { ...provider, ...app, ...analytics };
 };

package/src/const/auth.ts

@@ -1,3 +1,10 @@
+import { authEnv } from '@/config/auth';
+
+export const enableClerk = authEnv.NEXT_PUBLIC_ENABLE_CLERK_AUTH;
+export const enableNextAuth = authEnv.NEXT_PUBLIC_ENABLE_NEXT_AUTH;
+export const enableAuth =
+  authEnv.NEXT_PUBLIC_ENABLE_CLERK_AUTH || authEnv.NEXT_PUBLIC_ENABLE_NEXT_AUTH;
+
 export const LOBE_CHAT_AUTH_HEADER = 'X-lobe-chat-auth';
 
 export const OAUTH_AUTHORIZED = 'X-oauth-authorized';

package/src/features/Conversation/Error/ClerkLogin/index.tsx

@@ -0,0 +1,47 @@
+import { Button } from 'antd';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import UserLoginOrSignup from '@/features/User/UserLoginOrSignup';
+import { useGreeting } from '@/hooks/useGreeting';
+import { useChatStore } from '@/store/chat';
+import { useUserStore } from '@/store/user';
+import { userProfileSelectors } from '@/store/user/selectors';
+
+import { ErrorActionContainer, FormAction } from '../style';
+
+const ClerkLogin = memo<{ id: string }>(({ id }) => {
+  const { t } = useTranslation('error');
+  const [openSignIn, isSignedIn] = useUserStore((s) => [s.openLogin, s.isSignedIn]);
+  const greeting = useGreeting();
+  const nickName = useUserStore(userProfileSelectors.nickName);
+  const [resend, deleteMessage] = useChatStore((s) => [s.internalResendMessage, s.deleteMessage]);
+
+  return (
+    <ErrorActionContainer>
+      {isSignedIn ? (
+        <FormAction
+          avatar={'🌟'}
+          description={t('clerkAuth.loginSuccess.desc', { greeting })}
+          title={t('clerkAuth.loginSuccess.title', { nickName })}
+        >
+          <Button
+            block
+            onClick={() => {
+              resend(id);
+              deleteMessage(id);
+            }}
+            size={'large'}
+            type={'primary'}
+          >
+            {t('clerkAuth.loginSuccess.action')}
+          </Button>
+        </FormAction>
+      ) : (
+        <UserLoginOrSignup onClick={openSignIn} />
+      )}
+    </ErrorActionContainer>
+  );
+});
+
+export default ClerkLogin;

package/src/features/Conversation/Error/index.tsx

@@ -6,6 +6,7 @@ import { AgentRuntimeErrorType, ILobeAgentRuntimeErrorType } from '@/libs/agent-
 import { ChatErrorType, ErrorType } from '@/types/fetch';
 import { ChatMessage, ChatMessageError } from '@/types/message';
 
+import ClerkLogin from './ClerkLogin';
 import ErrorJsonViewer from './ErrorJsonViewer';
 import InvalidAPIKey from './InvalidAPIKey';
 import InvalidAccessCode from './InvalidAccessCode';
@@ -63,6 +64,10 @@ const ErrorMessageExtra = memo<{ data: ChatMessage }>(({ data }) => {
       return <OllamaBizError {...data} />;
     }
 
+    case ChatErrorType.InvalidClerkUser: {
+      return <ClerkLogin id={data.id} />;
+    }
+
     case ChatErrorType.InvalidAccessCode: {
       return <InvalidAccessCode id={data.id} provider={data.error?.body?.provider} />;
     }