@lobehub/chat 1.7.10 → 1.8.0

package/.env.example

@@ -168,6 +168,14 @@ OPENAI_API_KEY=sk-xxxxxxxxx
 #CLERK_WEBHOOK_SECRET=whsec_xxxxxxxxxxxxxxxxxxxxxx
 
 
+# NextAuth related configurations
+# NEXT_AUTH_SECRET=
+
+# Auth0 configurations
+# AUTH0_CLIENT_ID=
+# AUTH0_CLIENT_SECRET=
+# AUTH0_ISSUER=https://your-domain.auth0.com
+
 ########################################
 ########## Server Database #############
 ########################################

package/CHANGELOG.md

@@ -2,6 +2,31 @@
 
 # Changelog
 
+## [Version 1.8.0](https://github.com/lobehub/lobe-chat/compare/v1.7.10...v1.8.0)
+
+<sup>Released on **2024-08-02**</sup>
+
+#### ✨ Features
+
+- **misc**: Add NextAuth as authentication service in server database.
+
+<br/>
+
+<details>
+<summary><kbd>Improvements and Fixes</kbd></summary>
+
+#### What's improved
+
+- **misc**: Add NextAuth as authentication service in server database, closes [#2935](https://github.com/lobehub/lobe-chat/issues/2935) ([5a0b972](https://github.com/lobehub/lobe-chat/commit/5a0b972))
+
+</details>
+
+<div align="right">
+
+[![](https://img.shields.io/badge/-BACK_TO_TOP-151515?style=flat-square)](#readme-top)
+
+</div>
+
 ### [Version 1.7.10](https://github.com/lobehub/lobe-chat/compare/v1.7.9...v1.7.10)
 
 <sup>Released on **2024-08-02**</sup>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lobehub/chat",
-  "version": "1.7.10",
+  "version": "1.8.0",
   "description": "Lobe Chat - an open-source, high-performance chatbot framework that supports speech synthesis, multimodal, and extensible Function Call plugin system. Supports one-click free deployment of your private ChatGPT/LLM web application.",
   "keywords": [
     "framework",

package/src/app/(main)/(mobile)/me/(home)/__tests__/UserBanner.test.tsx

@@ -26,12 +26,16 @@ vi.mock('@/features/User/UserLoginOrSignup/Community', () => ({
 
 // 定义一个变量来存储 enableAuth 的值
 let enableAuth = true;
+let enableClerk = false;
 
 // 模拟 @/const/auth 模块
 vi.mock('@/const/auth', () => ({
   get enableAuth() {
     return enableAuth;
   },
+  get enableClerk() {
+    return enableClerk;
+  },
 }));
 
 afterEach(() => {
@@ -41,9 +45,8 @@ afterEach(() => {
 describe('UserBanner', () => {
   it('should render UserInfo and DataStatistics when auth is disabled', () => {
     act(() => {
-      useUserStore.setState({ isSignedIn: false });
+      useUserStore.setState({ isSignedIn: false, enableAuth: () => false });
     });
-    enableAuth = false;
 
     render(<UserBanner />);
 
@@ -56,7 +59,8 @@ describe('UserBanner', () => {
     act(() => {
       useUserStore.setState({ isSignedIn: true });
     });
-    enableAuth = true;
+
+    enableClerk = true;
 
     render(<UserBanner />);
 
@@ -67,9 +71,9 @@ describe('UserBanner', () => {
 
   it('should render UserLoginOrSignup when user is not logged in with auth enabled', () => {
     act(() => {
-      useUserStore.setState({ isSignedIn: false });
+      useUserStore.setState({ isSignedIn: false, enableAuth: () => true });
     });
-    enableAuth = true;
+    enableClerk = true;
 
     render(<UserBanner />);
 

package/src/app/(main)/(mobile)/me/(home)/__tests__/useCategory.test.tsx

@@ -24,7 +24,7 @@ vi.mock('../../settings/features/useCategory', () => ({
 
 // 定义一个变量来存储 enableAuth 的值
 let enableAuth = true;
-let enableClerk = true;
+let enableClerk = false;
 // 模拟 @/const/auth 模块
 vi.mock('@/const/auth', () => ({
   get enableAuth() {
@@ -37,16 +37,16 @@ vi.mock('@/const/auth', () => ({
 
 afterEach(() => {
   enableAuth = true;
-  enableClerk = true;
+  enableClerk = false;
 });
 
+// 目前对 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 });
+      useUserStore.setState({ isSignedIn: true, enableAuth: () => true });
     });
-    enableAuth = true;
-    enableClerk = false;
 
     const { result } = renderHook(() => useCategory());
 
@@ -65,7 +65,6 @@ describe('useCategory', () => {
     act(() => {
       useUserStore.setState({ isSignedIn: true });
     });
-    enableAuth = true;
     enableClerk = true;
 
     const { result } = renderHook(() => useCategory());
@@ -81,11 +80,29 @@ describe('useCategory', () => {
     });
   });
 
+  it('should return correct items when the user is logged in with NextAuth', () => {
+    act(() => {
+      useUserStore.setState({ isSignedIn: true, enableAuth: () => true, enabledNextAuth: true });
+    });
+
+    const { result } = renderHook(() => useCategory());
+
+    act(() => {
+      const items = result.current;
+      // Should not render profile for NextAuth, it's Clerk only
+      expect(items.some((item) => item.key === 'profile')).toBe(false);
+      expect(items.some((item) => item.key === 'setting')).toBe(true);
+      expect(items.some((item) => item.key === 'data')).toBe(true);
+      expect(items.some((item) => item.key === 'docs')).toBe(true);
+      expect(items.some((item) => item.key === 'feedback')).toBe(true);
+      expect(items.some((item) => item.key === 'discord')).toBe(true);
+    });
+  });
+
   it('should return correct items when the user is not logged in', () => {
     act(() => {
-      useUserStore.setState({ isSignedIn: false });
+      useUserStore.setState({ isSignedIn: false, enableAuth: () => true });
     });
-    enableAuth = true;
 
     const { result } = renderHook(() => useCategory());
 
@@ -102,9 +119,9 @@ describe('useCategory', () => {
 
   it('should handle settings for non-authenticated users', () => {
     act(() => {
-      useUserStore.setState({ isSignedIn: false });
+      useUserStore.setState({ isSignedIn: false, enableAuth: () => false });
     });
-    enableAuth = false;
+    enableClerk = false;
 
     const { result } = renderHook(() => useCategory());
 

package/src/app/(main)/(mobile)/me/(home)/features/UserBanner.tsx

@@ -4,7 +4,6 @@ import { useRouter } from 'next/navigation';
 import { memo } from 'react';
 import { Flexbox } from 'react-layout-kit';
 
-import { enableAuth } from '@/const/auth';
 import DataStatistics from '@/features/User/DataStatistics';
 import UserInfo from '@/features/User/UserInfo';
 import UserLoginOrSignup from '@/features/User/UserLoginOrSignup/Community';
@@ -14,6 +13,11 @@ 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),
+  ]);
 
   return (
     <Flexbox gap={12} paddingBlock={8}>
@@ -24,11 +28,26 @@ const UserBanner = memo(() => {
         </>
       ) : isLoginWithAuth ? (
         <>
-          <UserInfo onClick={() => router.push('/me/profile')} />
+          <UserInfo
+            onClick={() => {
+              // Profile page only works with Clerk
+              if (enabledNextAuth) return;
+              router.push('/me/profile');
+            }}
+          />
           <DataStatistics paddingInline={12} />
         </>
       ) : (
-        <UserLoginOrSignup onClick={() => router.push('/login')} />
+        <UserLoginOrSignup
+          onClick={() => {
+            // If use NextAuth, call openLogin method directly
+            if (enabledNextAuth) {
+              signIn();
+              return;
+            }
+            router.push('/login');
+          }}
+        />
       )}
     </Flexbox>
   );

package/src/app/(main)/(mobile)/me/(home)/features/useCategory.tsx

@@ -4,7 +4,6 @@ import { useRouter } from 'next/navigation';
 import { useTranslation } from 'react-i18next';
 
 import { CellProps } from '@/components/Cell';
-import { enableAuth } from '@/const/auth';
 import { DISCORD, DOCUMENTS, FEEDBACK } from '@/const/url';
 import { isServerMode } from '@/const/version';
 import { usePWAInstall } from '@/hooks/usePWAInstall';
@@ -17,10 +16,11 @@ export const useCategory = () => {
   const router = useRouter();
   const { canInstall, install } = usePWAInstall();
   const { t } = useTranslation(['common', 'setting', 'auth']);
-  const [isLogin, isLoginWithAuth, isLoginWithClerk] = useUserStore((s) => [
+  const [isLogin, isLoginWithAuth, isLoginWithClerk, enableAuth] = useUserStore((s) => [
     authSelectors.isLogin(s),
     authSelectors.isLoginWithAuth(s),
     authSelectors.isLoginWithClerk(s),
+    authSelectors.enabledAuth(s),
   ]);
 
   const profile: CellProps[] = [

package/src/app/(main)/settings/_layout/Mobile/Header.tsx

@@ -7,9 +7,10 @@ import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
 
-import { enableAuth } from '@/const/auth';
 import { useActiveSettingsKey } from '@/hooks/useActiveSettingsKey';
 import { SettingsTabs } from '@/store/global/initialState';
+import { useUserStore } from '@/store/user';
+import { authSelectors } from '@/store/user/selectors';
 import { mobileHeaderSticky } from '@/styles/mobileHeader';
 
 const Header = memo(() => {
@@ -19,6 +20,7 @@ const Header = memo(() => {
   const searchParams = useSearchParams();
   const activeSettingsKey = useActiveSettingsKey();
 
+  const enableAuth = useUserStore(authSelectors.enabledAuth);
   const handleBackClick = () => {
     if (searchParams.has('session') && searchParams.has('showMobileWorkspace')) {
       router.push(`/chat?${searchParams.toString()}`);
@@ -26,7 +28,6 @@ const Header = memo(() => {
       router.push(enableAuth ? '/me/settings' : '/me');
     }
   };
-
   return (
     <MobileNavBar
       center={

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

@@ -16,7 +16,7 @@ import { serverConfigSelectors } from '@/store/serverConfig/selectors';
 import { useSessionStore } from '@/store/session';
 import { useToolStore } from '@/store/tool';
 import { useUserStore } from '@/store/user';
-import { settingsSelectors, userProfileSelectors } from '@/store/user/selectors';
+import { settingsSelectors } from '@/store/user/selectors';
 
 type SettingItemGroup = ItemGroup;
 
@@ -24,10 +24,7 @@ const Common = memo(() => {
   const { t } = useTranslation('setting');
   const [form] = Form.useForm();
 
-  const isSignedIn = useUserStore((s) => s.isSignedIn);
   const showAccessCodeConfig = useServerConfigStore(serverConfigSelectors.enabledAccessCode);
-  const showOAuthLogin = useServerConfigStore(serverConfigSelectors.enabledOAuthSSO);
-  const user = useUserStore(userProfileSelectors.userProfile, isEqual);
 
   const [clearSessions, clearSessionGroups] = useSessionStore((s) => [
     s.clearSessions,
@@ -40,31 +37,10 @@ const Common = memo(() => {
   const [removeAllFiles] = useFileStore((s) => [s.removeAllFiles]);
   const removeAllPlugins = useToolStore((s) => s.removeAllPlugins);
   const settings = useUserStore(settingsSelectors.currentSettings, isEqual);
-  const [setSettings, resetSettings, signIn, signOut] = useUserStore((s) => [
-    s.setSettings,
-    s.resetSettings,
-    s.openLogin,
-    s.logout,
-  ]);
+  const [setSettings, resetSettings] = useUserStore((s) => [s.setSettings, s.resetSettings]);
 
   const { message, modal } = App.useApp();
 
-  const handleSignOut = useCallback(() => {
-    modal.confirm({
-      centered: true,
-      okButtonProps: { danger: true },
-      onOk: () => {
-        signOut();
-        message.success(t('settingSystem.oauth.signout.success'));
-      },
-      title: t('settingSystem.oauth.signout.confirm'),
-    });
-  }, []);
-
-  const handleSignIn = useCallback(() => {
-    signIn();
-  }, []);
-
   const handleReset = useCallback(() => {
     modal.confirm({
       centered: true,
@@ -112,23 +88,6 @@ const Common = memo(() => {
         label: t('settingSystem.accessCode.title'),
         name: ['keyVaults', 'password'],
       },
-      {
-        children: isSignedIn ? (
-          <Button onClick={handleSignOut}>{t('settingSystem.oauth.signout.action')}</Button>
-        ) : (
-          <Button onClick={handleSignIn} type="primary">
-            {t('settingSystem.oauth.signin.action')}
-          </Button>
-        ),
-        desc: isSignedIn
-          ? `${user?.email} ${t('settingSystem.oauth.info.desc')}`
-          : t('settingSystem.oauth.signin.desc'),
-        hidden: !showOAuthLogin,
-        label: isSignedIn
-          ? t('settingSystem.oauth.info.title')
-          : t('settingSystem.oauth.signin.title'),
-        minWidth: undefined,
-      },
       {
         children: (
           <Button danger onClick={handleReset} type="primary">

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

@@ -9,13 +9,16 @@ 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';
 import { Locales, localeOptions } from '@/locales/resources';
 import { useUserStore } from '@/store/user';
-import { settingsSelectors, userGeneralSettingsSelectors } from '@/store/user/selectors';
+import {
+  authSelectors,
+  settingsSelectors,
+  userGeneralSettingsSelectors,
+} from '@/store/user/selectors';
 import { switchLang } from '@/utils/client/switchLang';
 
 import { ThemeSwatchesNeutral, ThemeSwatchesPrimary } from './ThemeSwatches';
@@ -28,7 +31,11 @@ const Theme = memo(() => {
   const [form] = Form.useForm();
   const settings = useUserStore(settingsSelectors.currentSettings, isEqual);
   const themeMode = useUserStore(userGeneralSettingsSelectors.currentThemeMode);
-  const [setThemeMode, setSettings] = useUserStore((s) => [s.switchThemeMode, s.setSettings]);
+  const [setThemeMode, setSettings, enableAuth] = useUserStore((s) => [
+    s.switchThemeMode,
+    s.setSettings,
+    authSelectors.enabledAuth(s),
+  ]);
 
   useSyncSettings(form);
 

package/src/app/api/auth/[...nextauth]/route.ts

@@ -1,3 +1,3 @@
-export { GET, POST } from '@/libs/next-auth';
+import NextAuthNode from '@/libs/next-auth';
 
-export const runtime = 'edge'; // optional
+export const { GET, POST } = NextAuthNode.handlers;

package/src/app/api/auth/error/AuthErrorPage.tsx

@@ -0,0 +1,38 @@
+import { signIn } from 'next-auth/react';
+import { useSearchParams } from 'next/navigation';
+import { memo } from 'react';
+
+import ErrorCapture from '@/components/Error';
+
+enum ErrorEnum {
+  AccessDenied = 'AccessDenied',
+  Configuration = 'Configuration',
+  Default = 'Default',
+  Verification = 'Verification',
+}
+
+const errorMap = {
+  [ErrorEnum.Configuration]:
+    'Wrong configuration, make sure you have the correct environment variables set. Visit https://lobehub.com/docs/self-hosting/advanced/authentication for more details.',
+  [ErrorEnum.AccessDenied]:
+    'Access was denied. Visit https://authjs.dev/reference/core/errors#accessdenied for more details. ',
+  [ErrorEnum.Verification]:
+    'Verification error, visit https://authjs.dev/reference/core/errors#verification for more details.',
+  [ErrorEnum.Default]:
+    'There was a problem when trying to authenticate. Visit https://authjs.dev/reference/core/errors for more details.',
+};
+
+export default memo(() => {
+  const search = useSearchParams();
+  const error = search.get('error') as ErrorEnum;
+  const props = {
+    error: {
+      cause: error,
+      message: errorMap[error] || 'Unknown error type.',
+      name: 'NextAuth Error',
+    },
+    reset: () => signIn(undefined, { callbackUrl: '/' }),
+  };
+  console.log('[NextAuth] Error:', props.error);
+  return <ErrorCapture {...props} />;
+});

package/src/app/api/auth/error/page.tsx

@@ -0,0 +1,5 @@
+'use client';
+
+import dynamic from 'next/dynamic';
+
+export default dynamic(() => import('./AuthErrorPage'));

package/src/database/server/migrations/0004_add_next_auth.sql

@@ -0,0 +1,60 @@
+CREATE TABLE IF NOT EXISTS "nextauth_accounts" (
+	"access_token" text,
+	"expires_at" integer,
+	"id_token" text,
+	"provider" text NOT NULL,
+	"providerAccountId" text NOT NULL,
+	"refresh_token" text,
+	"scope" text,
+	"session_state" text,
+	"token_type" text,
+	"type" text NOT NULL,
+	"userId" text NOT NULL,
+	CONSTRAINT "nextauth_accounts_provider_providerAccountId_pk" PRIMARY KEY("provider","providerAccountId")
+);
+--> statement-breakpoint
+CREATE TABLE IF NOT EXISTS "nextauth_authenticators" (
+	"counter" integer NOT NULL,
+	"credentialBackedUp" boolean NOT NULL,
+	"credentialDeviceType" text NOT NULL,
+	"credentialID" text NOT NULL,
+	"credentialPublicKey" text NOT NULL,
+	"providerAccountId" text NOT NULL,
+	"transports" text,
+	"userId" text NOT NULL,
+	CONSTRAINT "nextauth_authenticators_userId_credentialID_pk" PRIMARY KEY("userId","credentialID"),
+	CONSTRAINT "nextauth_authenticators_credentialID_unique" UNIQUE("credentialID")
+);
+--> statement-breakpoint
+CREATE TABLE IF NOT EXISTS "nextauth_sessions" (
+	"expires" timestamp NOT NULL,
+	"sessionToken" text PRIMARY KEY NOT NULL,
+	"userId" text NOT NULL
+);
+--> statement-breakpoint
+CREATE TABLE IF NOT EXISTS "nextauth_verificationtokens" (
+	"expires" timestamp NOT NULL,
+	"identifier" text NOT NULL,
+	"token" text NOT NULL,
+	CONSTRAINT "nextauth_verificationtokens_identifier_token_pk" PRIMARY KEY("identifier","token")
+);
+--> statement-breakpoint
+ALTER TABLE "users" ADD COLUMN "full_name" text;--> statement-breakpoint
+ALTER TABLE "users" ADD COLUMN "email_verified_at" timestamp with time zone;--> statement-breakpoint
+DO $$ BEGIN
+ ALTER TABLE "nextauth_accounts" ADD CONSTRAINT "nextauth_accounts_userId_users_id_fk" FOREIGN KEY ("userId") REFERENCES "public"."users"("id") ON DELETE cascade ON UPDATE no action;
+EXCEPTION
+ WHEN duplicate_object THEN null;
+END $$;
+--> statement-breakpoint
+DO $$ BEGIN
+ ALTER TABLE "nextauth_authenticators" ADD CONSTRAINT "nextauth_authenticators_userId_users_id_fk" FOREIGN KEY ("userId") REFERENCES "public"."users"("id") ON DELETE cascade ON UPDATE no action;
+EXCEPTION
+ WHEN duplicate_object THEN null;
+END $$;
+--> statement-breakpoint
+DO $$ BEGIN
+ ALTER TABLE "nextauth_sessions" ADD CONSTRAINT "nextauth_sessions_userId_users_id_fk" FOREIGN KEY ("userId") REFERENCES "public"."users"("id") ON DELETE cascade ON UPDATE no action;
+EXCEPTION
+ WHEN duplicate_object THEN null;
+END $$;