✨ feat: refactor the auth condition in Next Auth (lobehub#5866)

This upgrade includes two changes:

For users deploying with Vercel using next-auth, it is necessary to add the environment variable `NEXT_PUBLIC_ENABLE_NEXT_AUTH=1` to ensure Next Auth is enabled; other users are not affected.
For users using clerk in self-built images, it is necessary to additionally configure `NEXT_PUBLIC_ENABLE_NEXT_AUTH=0` to disable Next Auth

Other standard deployment scenarios (using Clerk in Vercel and using next-auth in Docker) are not affected

For More detail, refer to lobehub#5804

本次升级存在两个变更：

- 针对使用 Vercel 部署中使用 next-auth 的用户，需要额外添加 `NEXT_PUBLIC_ENABLE_NEXT_AUTH=1` 环境变量来确保开启 Next Auth
- 针对使用自构建镜像中使用 clerk 的用户，需要额外配置 `NEXT_PUBLIC_ENABLE_NEXT_AUTH=0` 环境变量来关闭 Next Auth

其他标准部署场景（Vercel 中使用 Clerk 与 Docker 中使用 next-auth ）不受影响

变更详情原因查看 lobehub#5804

.env.example

@@ -190,6 +190,7 @@ OPENAI_API_KEY=sk-xxxxxxxxx
 
 
 # NextAuth related configurations
+# NEXT_PUBLIC_ENABLE_NEXT_AUTH=1
 # NEXT_AUTH_SECRET=
 
 # Auth0 configurations

Dockerfile.database

@@ -38,6 +38,7 @@ FROM base AS builder
 ARG USE_CN_MIRROR
 ARG NEXT_PUBLIC_BASE_PATH
 ARG NEXT_PUBLIC_SERVICE_MODE
+ARG NEXT_PUBLIC_ENABLE_NEXT_AUTH
 ARG NEXT_PUBLIC_SENTRY_DSN
 ARG NEXT_PUBLIC_ANALYTICS_POSTHOG
 ARG NEXT_PUBLIC_POSTHOG_HOST
@@ -49,7 +50,7 @@ ARG NEXT_PUBLIC_UMAMI_WEBSITE_ID
 ENV NEXT_PUBLIC_BASE_PATH="${NEXT_PUBLIC_BASE_PATH}"
 
 ENV NEXT_PUBLIC_SERVICE_MODE="${NEXT_PUBLIC_SERVICE_MODE:-server}" \
-    NEXT_PUBLIC_ENABLE_NEXT_AUTH="1" \
+    NEXT_PUBLIC_ENABLE_NEXT_AUTH="${NEXT_PUBLIC_ENABLE_NEXT_AUTH:-1}" \
     APP_URL="http://app.com" \
     DATABASE_DRIVER="node" \
     DATABASE_URL="postgres://postgres:password@localhost:5432/postgres" \

next.config.ts

@@ -179,6 +179,7 @@ const nextConfig: NextConfig = {
   ],
   // when external packages in dev mode with turbopack, this config will lead to bundle error
   serverExternalPackages: isProd ? ['@electric-sql/pglite'] : undefined,
+
   transpilePackages: ['pdfjs-dist', 'mermaid'],
 
   webpack(config) {

src/app/[variants]/(main)/(mobile)/me/(home)/__tests__/UserBanner.test.tsx

@@ -49,8 +49,9 @@ afterEach(() => {
 describe('UserBanner', () => {
   it('should render UserInfo and DataStatistics when auth is disabled', () => {
     act(() => {
-      useUserStore.setState({ isSignedIn: false, enableAuth: () => false });
+      useUserStore.setState({ isSignedIn: false });
     });
+    enableAuth = false;
 
     render(<UserBanner />);
 
@@ -75,7 +76,7 @@ describe('UserBanner', () => {
 
   it('should render UserLoginOrSignup when user is not logged in with auth enabled', () => {
     act(() => {
-      useUserStore.setState({ isSignedIn: false, enableAuth: () => true });
+      useUserStore.setState({ isSignedIn: false });
     });
     enableClerk = true;
 

src/app/[variants]/(main)/(mobile)/me/(home)/__tests__/useCategory.test.tsx

@@ -45,12 +45,10 @@ afterEach(() => {
   enableClerk = true;
 });
 
-// 目前对 enableAuth 的判定是在 useUserStore 中，所以需要 mock useUserStore
-// 类型定义： enableAuth: () => boolean
 describe('useCategory', () => {
   it('should return correct items when the user is logged in with authentication', () => {
     act(() => {
-      useUserStore.setState({ isSignedIn: true, enableAuth: () => true });
+      useUserStore.setState({ isSignedIn: true });
     });
     enableAuth = true;
     enableClerk = false;
@@ -70,8 +68,9 @@ describe('useCategory', () => {
 
   it('should return correct items when the user is not logged in', () => {
     act(() => {
-      useUserStore.setState({ isSignedIn: false, enableAuth: () => true });
+      useUserStore.setState({ isSignedIn: false });
     });
+    enableAuth = true;
 
     const { result } = renderHook(() => useCategory(), { wrapper });
 
@@ -88,9 +87,10 @@ describe('useCategory', () => {
 
   it('should handle settings for non-authenticated users', () => {
     act(() => {
-      useUserStore.setState({ isSignedIn: false, enableAuth: () => false });
+      useUserStore.setState({ isSignedIn: false });
     });
     enableClerk = false;
+    enableAuth = false;
 
     const { result } = renderHook(() => useCategory(), { wrapper });
 

src/app/[variants]/(main)/(mobile)/me/(home)/features/UserBanner.tsx

@@ -5,6 +5,7 @@ import { useRouter } from 'next/navigation';
 import { memo } from 'react';
 import { Flexbox } from 'react-layout-kit';
 
+import { enableAuth, enableNextAuth } from '@/const/auth';
 import { isDeprecatedEdition } from '@/const/version';
 import DataStatistics from '@/features/User/DataStatistics';
 import UserInfo from '@/features/User/UserInfo';
@@ -15,11 +16,7 @@ import { authSelectors } from '@/store/user/selectors';
 const UserBanner = memo(() => {
   const router = useRouter();
   const isLoginWithAuth = useUserStore(authSelectors.isLoginWithAuth);
-  const [enableAuth, signIn, enabledNextAuth] = useUserStore((s) => [
-    authSelectors.enabledAuth(s),
-    s.openLogin,
-    authSelectors.enabledNextAuth(s),
-  ]);
+  const [signIn] = useUserStore((s) => [s.openLogin]);
 
   return (
     <Flexbox gap={12} paddingBlock={8}>
@@ -38,7 +35,7 @@ const UserBanner = memo(() => {
         <UserLoginOrSignup
           onClick={() => {
             // If use NextAuth, call openLogin method directly
-            if (enabledNextAuth) {
+            if (enableNextAuth) {
               signIn();
               return;
             }

src/app/[variants]/(main)/(mobile)/me/(home)/features/useCategory.tsx

@@ -12,6 +12,7 @@ import { useRouter } from 'next/navigation';
 import { useTranslation } from 'react-i18next';
 
 import { CellProps } from '@/components/Cell';
+import { enableAuth } from '@/const/auth';
 import { LOBE_CHAT_CLOUD } from '@/const/branding';
 import { DOCUMENTS, FEEDBACK, OFFICIAL_URL, UTM_SOURCE } from '@/const/url';
 import { isServerMode } from '@/const/version';
@@ -27,10 +28,9 @@ export const useCategory = () => {
   const { canInstall, install } = usePWAInstall();
   const { t } = useTranslation(['common', 'setting', 'auth']);
   const { showCloudPromotion, hideDocs } = useServerConfigStore(featureFlagsSelectors);
-  const [isLogin, isLoginWithAuth, enableAuth] = useUserStore((s) => [
+  const [isLogin, isLoginWithAuth] = useUserStore((s) => [
     authSelectors.isLogin(s),
     authSelectors.isLoginWithAuth(s),
-    authSelectors.enabledAuth(s),
   ]);
 
   const profile: CellProps[] = [

src/app/[variants]/(main)/(mobile)/me/profile/features/Category.tsx

@@ -6,15 +6,15 @@ import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import Cell, { CellProps } from '@/components/Cell';
+import { enableAuth } from '@/const/auth';
 import { isDeprecatedEdition } from '@/const/version';
 import { ProfileTabs } from '@/store/global/initialState';
 import { useUserStore } from '@/store/user';
 import { authSelectors } from '@/store/user/selectors';
 
 const Category = memo(() => {
-  const [isLogin, enableAuth, isLoginWithClerk, signOut] = useUserStore((s) => [
+  const [isLogin, isLoginWithClerk, signOut] = useUserStore((s) => [
     authSelectors.isLogin(s),
-    authSelectors.enabledAuth(s),
     authSelectors.isLoginWithClerk(s),
     s.logout,
   ]);

src/app/[variants]/(main)/profile/(home)/Client.tsx

@@ -4,6 +4,7 @@ import { Form, type ItemGroup } from '@lobehub/ui';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 
+import { enableAuth } from '@/const/auth';
 import { FORM_STYLE } from '@/const/layoutTokens';
 import AvatarWithUpload from '@/features/AvatarWithUpload';
 import UserAvatar from '@/features/User/UserAvatar';
@@ -14,8 +15,7 @@ type SettingItemGroup = ItemGroup;
 
 const Client = memo<{ mobile?: boolean }>(() => {
   const [isLoginWithNextAuth] = useUserStore((s) => [authSelectors.isLoginWithNextAuth(s)]);
-  const [enableAuth, nickname, username, userProfile] = useUserStore((s) => [
-    s.enableAuth(),
+  const [nickname, username, userProfile] = useUserStore((s) => [
     userProfileSelectors.nickName(s),
     userProfileSelectors.username(s),
     userProfileSelectors.userProfile(s),

src/app/[variants]/(main)/profile/hooks/useCategory.tsx

@@ -4,17 +4,15 @@ import Link from 'next/link';
 import { useTranslation } from 'react-i18next';
 
 import type { MenuProps } from '@/components/Menu';
+import { enableAuth } from '@/const/auth';
 import { isDeprecatedEdition } from '@/const/version';
 import { ProfileTabs } from '@/store/global/initialState';
 import { useUserStore } from '@/store/user';
 import { authSelectors } from '@/store/user/slices/auth/selectors';
 
 export const useCategory = () => {
   const { t } = useTranslation('auth');
-  const [enableAuth, isLoginWithClerk] = useUserStore((s) => [
-    authSelectors.enabledAuth(s),
-    authSelectors.isLoginWithClerk(s),
-  ]);
+  const [isLoginWithClerk] = useUserStore((s) => [authSelectors.isLoginWithClerk(s)]);
 
   const cateItems: MenuProps['items'] = [
     {

src/app/[variants]/(main)/settings/_layout/Mobile/Header.tsx

@@ -6,13 +6,12 @@ import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
 
+import { enableAuth } from '@/const/auth';
 import { useActiveSettingsKey } from '@/hooks/useActiveTabKey';
 import { useQueryRoute } from '@/hooks/useQueryRoute';
 import { useShowMobileWorkspace } from '@/hooks/useShowMobileWorkspace';
 import { SettingsTabs } from '@/store/global/initialState';
 import { useSessionStore } from '@/store/session';
-import { useUserStore } from '@/store/user';
-import { authSelectors } from '@/store/user/selectors';
 import { mobileHeaderSticky } from '@/styles/mobileHeader';
 
 const Header = memo(() => {
@@ -22,7 +21,6 @@ const Header = memo(() => {
   const showMobileWorkspace = useShowMobileWorkspace();
   const activeSettingsKey = useActiveSettingsKey();
   const isSessionActive = useSessionStore((s) => !!s.activeId);
-  const enableAuth = useUserStore(authSelectors.enabledAuth);
 
   const handleBackClick = () => {
     if (isSessionActive && showMobileWorkspace) {

src/app/[variants]/page.tsx

@@ -7,4 +7,3 @@ export const metadata: Metadata = {
 };
 
 export { default } from './loading';
-

src/config/auth.ts

@@ -217,8 +217,7 @@ export const getAuthConfig = () => {
       CLERK_WEBHOOK_SECRET: process.env.CLERK_WEBHOOK_SECRET,
 
       // Next Auth
-      NEXT_PUBLIC_ENABLE_NEXT_AUTH:
-        !!process.env.NEXT_AUTH_SECRET || process.env.NEXT_PUBLIC_ENABLE_NEXT_AUTH === '1',
+      NEXT_PUBLIC_ENABLE_NEXT_AUTH: process.env.NEXT_PUBLIC_ENABLE_NEXT_AUTH === '1',
       NEXT_AUTH_SSO_PROVIDERS: process.env.NEXT_AUTH_SSO_PROVIDERS,
       NEXT_AUTH_SECRET: process.env.NEXT_AUTH_SECRET,
       NEXT_AUTH_DEBUG: !!process.env.NEXT_AUTH_DEBUG,

src/const/auth.ts

@@ -2,8 +2,7 @@ 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 enableAuth = enableClerk || enableNextAuth || false;
 
 export const LOBE_CHAT_AUTH_HEADER = 'X-lobe-chat-auth';
 

src/features/User/UserPanel/PanelContent.tsx

@@ -5,6 +5,7 @@ import { Flexbox } from 'react-layout-kit';
 
 import BrandWatermark from '@/components/BrandWatermark';
 import Menu from '@/components/Menu';
+import { enableAuth, enableNextAuth } from '@/const/auth';
 import { isDeprecatedEdition } from '@/const/version';
 import { useUserStore } from '@/store/user';
 import { authSelectors } from '@/store/user/selectors';
@@ -19,12 +20,7 @@ import { useMenu } from './useMenu';
 const PanelContent = memo<{ closePopover: () => void }>(({ closePopover }) => {
   const router = useRouter();
   const isLoginWithAuth = useUserStore(authSelectors.isLoginWithAuth);
-  const [openSignIn, signOut, enableAuth, enabledNextAuth] = useUserStore((s) => [
-    s.openLogin,
-    s.logout,
-    s.enableAuth(),
-    s.enabledNextAuth,
-  ]);
+  const [openSignIn, signOut] = useUserStore((s) => [s.openLogin, s.logout]);
   const { mainItems, logoutItems } = useMenu();
 
   const handleSignIn = () => {
@@ -36,7 +32,7 @@ const PanelContent = memo<{ closePopover: () => void }>(({ closePopover }) => {
     signOut();
     closePopover();
     // NextAuth doesn't need to redirect to login page
-    if (enabledNextAuth) return;
+    if (enableNextAuth) return;
     router.push('/login');
   };
 

src/features/User/UserPanel/useMenu.tsx

@@ -21,6 +21,7 @@ import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
 
 import type { MenuProps } from '@/components/Menu';
+import { enableAuth } from '@/const/auth';
 import { LOBE_CHAT_CLOUD } from '@/const/branding';
 import {
   DISCORD,
@@ -68,8 +69,7 @@ export const useMenu = () => {
   const hasNewVersion = useNewVersion();
   const { t } = useTranslation(['common', 'setting', 'auth']);
   const { showCloudPromotion, hideDocs } = useServerConfigStore(featureFlagsSelectors);
-  const [enableAuth, isLogin, isLoginWithAuth] = useUserStore((s) => [
-    authSelectors.enabledAuth(s),
+  const [isLogin, isLoginWithAuth] = useUserStore((s) => [
     authSelectors.isLogin(s),
     authSelectors.isLoginWithAuth(s),
   ]);

src/features/User/__tests__/PanelContent.test.tsx

@@ -68,13 +68,12 @@ vi.mock('@/const/version', () => ({
 // 定义一个变量来存储 enableAuth 的值
 let enableAuth = true;
 
-beforeEach(() => {
-  useUserStore.setState({ enableAuth: () => true });
-});
-
-afterEach(() => {
-  enableAuth = true;
-});
+// 模拟 @/const/auth 模块
+vi.mock('@/const/auth', () => ({
+  get enableAuth() {
+    return enableAuth;
+  },
+}));
 
 describe('PanelContent', () => {
   const closePopover = vi.fn();

src/layout/GlobalProvider/StoreInitialization.tsx

@@ -5,6 +5,7 @@ import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { createStoreUpdater } from 'zustand-utils';
 
+import { enableNextAuth } from '@/const/auth';
 import { useIsMobile } from '@/hooks/useIsMobile';
 import { useEnabledDataSync } from '@/hooks/useSyncData';
 import { useAgentStore } from '@/store/agent';
@@ -39,8 +40,6 @@ const StoreInitialization = memo(() => {
 
   // Update NextAuth status
   const useUserStoreUpdater = createStoreUpdater(useUserStore);
-  const enableNextAuth = useServerConfigStore(serverConfigSelectors.enabledOAuthSSO);
-  useUserStoreUpdater('enabledNextAuth', enableNextAuth);
   const oAuthSSOProviders = useServerConfigStore(serverConfigSelectors.oAuthSSOProviders);
   useUserStoreUpdater('oAuthSSOProviders', oAuthSSOProviders);