@lobehub/chat 0.124.3 → 0.126.0

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

@@ -0,0 +1,95 @@
+import { Icon } from '@lobehub/ui';
+import { App, Button } from 'antd';
+import { ScanFace } from 'lucide-react';
+import { signIn, signOut, useSession } from 'next-auth/react';
+import { memo, useCallback } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Center, Flexbox } from 'react-layout-kit';
+
+import { useChatStore } from '@/store/chat';
+
+import { FormAction } from './style';
+
+const OAuthForm = memo<{ id: string }>(({ id }) => {
+  const { t } = useTranslation('error');
+
+  const { data: session, status } = useSession();
+  const isOAuthLoggedIn = status === 'authenticated' && session && session.user;
+
+  const [resend, deleteMessage] = useChatStore((s) => [s.resendMessage, s.deleteMessage]);
+
+  const { message, modal } = App.useApp();
+
+  const handleSignOut = useCallback(() => {
+    modal.confirm({
+      centered: true,
+      okButtonProps: { danger: true },
+      onOk: () => {
+        signOut();
+        message.success(t('settingSystem.oauth.signout.success', { ns: 'setting' }));
+      },
+      title: t('settingSystem.oauth.signout.confirm', { ns: 'setting' }),
+    });
+  }, []);
+
+  return (
+    <Center gap={16} style={{ maxWidth: 300 }}>
+      <FormAction
+        avatar={isOAuthLoggedIn ? '✅' : '🕵️‍♂️'}
+        description={
+          isOAuthLoggedIn
+            ? `${t('unlock.oauth.welcome')} ${session?.user?.name}`
+            : t('unlock.oauth.description')
+        }
+        title={isOAuthLoggedIn ? t('unlock.oauth.success') : t('unlock.oauth.title')}
+      >
+        {isOAuthLoggedIn ? (
+          <Button
+            block
+            icon={<Icon icon={ScanFace} />}
+            onClick={handleSignOut}
+            style={{ marginTop: 8 }}
+          >
+            {t('settingSystem.oauth.signout.action', { ns: 'setting' })}
+          </Button>
+        ) : (
+          <Button
+            block
+            icon={<Icon icon={ScanFace} />}
+            loading={status === 'loading'}
+            onClick={() => signIn('auth0')}
+            style={{ marginTop: 8 }}
+            type={'primary'}
+          >
+            {t('oauth', { ns: 'common' })}
+          </Button>
+        )}
+      </FormAction>
+      <Flexbox gap={12} width={'100%'}>
+        {isOAuthLoggedIn ? (
+          <Button
+            block
+            onClick={() => {
+              resend(id);
+              deleteMessage(id);
+            }}
+            style={{ marginTop: 8 }}
+            type={'primary'}
+          >
+            {t('unlock.confirm')}
+          </Button>
+        ) : (
+          <Button
+            onClick={() => {
+              deleteMessage(id);
+            }}
+          >
+            {t('unlock.closeMessage')}
+          </Button>
+        )}
+      </Flexbox>
+    </Center>
+  );
+});
+
+export default OAuthForm;

package/src/layout/GlobalLayout/index.tsx

@@ -3,6 +3,7 @@
 import { App } from 'antd';
 import { createStyles } from 'antd-style';
 import 'antd/dist/reset.css';
+import { SessionProvider } from 'next-auth/react';
 import dynamic from 'next/dynamic';
 import { FC, PropsWithChildren, memo } from 'react';
 
@@ -47,13 +48,15 @@ interface GlobalLayoutProps extends AppThemeProps {
 }
 
 const GlobalLayout = ({ children, defaultLang, ...theme }: GlobalLayoutProps) => (
-  <AppTheme {...theme}>
-    <Locale defaultLang={defaultLang}>
-      <StoreHydration />
-      <Container>{children}</Container>
-      <DebugUI />
-    </Locale>
-  </AppTheme>
+  <SessionProvider basePath="/api/oauth">
+    <AppTheme {...theme}>
+      <Locale defaultLang={defaultLang}>
+        <StoreHydration />
+        <Container>{children}</Container>
+        <DebugUI />
+      </Locale>
+    </AppTheme>
+  </SessionProvider>
 );
 
 export default GlobalLayout;

package/src/locales/default/common.ts

@@ -108,6 +108,7 @@ export default {
     zhipu: '智谱AI',
   },
   noDescription: '暂无描述',
+  oauth: 'SSO 登录',
   ok: '确定',
   password: '密码',
   pin: '置顶',

package/src/locales/default/error.ts

@@ -110,6 +110,12 @@ export default {
     },
     closeMessage: '关闭提示',
     confirm: '确认并重试',
+    oauth: {
+      description: '管理员已开启统一登录认证，点击下方按钮登录，即可解锁应用',
+      success: '登录成功',
+      title: '登录账号',
+      welcome: '欢迎你！',
+    },
     password: {
       description: '管理员已开启应用加密，输入应用密码后即可解锁应用。密码只需填写一次',
       placeholder: '请输入密码',

package/src/locales/default/setting.ts

@@ -265,6 +265,22 @@ export default {
       placeholder: '请输入访问密码',
       title: '访问密码',
     },
+    oauth: {
+      info: {
+        desc: '已登录',
+        title: '账户信息',
+      },
+      signin: {
+        action: '登录',
+        desc: '使用 SSO 登录以解锁应用',
+        title: '登录账号',
+      },
+      signout: {
+        action: '退出登录',
+        confirm: '确认退出？',
+        success: '退出登录成功',
+      },
+    },
     title: '系统设置',
   },
   settingTTS: {

package/src/middleware.ts

@@ -0,0 +1,25 @@
+// export { auth as middleware } from './app/api/next-auth';
+import { NextResponse } from 'next/server';
+
+import { auth } from './app/api/oauth/next-auth';
+import { OAUTH_AUTHORIZED } from './const/auth';
+
+export const config = {
+  matcher: '/api/:path*',
+};
+
+export default auth((req) => {
+  // Just check if session exists
+  const session = req.auth;
+  const isLoggedIn = !!session;
+
+  // Remove & amend OAuth authorized header
+  const requestHeaders = new Headers(req.headers);
+  requestHeaders.delete(OAUTH_AUTHORIZED);
+  if (isLoggedIn) requestHeaders.set(OAUTH_AUTHORIZED, 'true');
+  return NextResponse.next({
+    request: {
+      headers: requestHeaders,
+    },
+  });
+});

package/src/store/global/slices/common/initialState.ts

@@ -1,6 +1,5 @@
 import { AppRouterInstance } from 'next/dist/shared/lib/app-router-context.shared-runtime';
 
-
 export enum SidebarTabKey {
   Chat = 'chat',
   Market = 'market',

package/src/store/global/slices/common/selectors.ts

@@ -1,5 +1,6 @@
 import { GlobalStore } from '@/store/global';
 
 export const commonSelectors = {
+  enabledOAuthSSO: (s: GlobalStore) => s.serverConfig.enabledOAuthSSO,
   userAvatar: (s: GlobalStore) => s.avatar || '',
 };

package/src/types/settings/index.ts

@@ -21,6 +21,7 @@ export interface GlobalTool {
 export interface GlobalServerConfig {
   customModelName?: string;
   defaultAgent?: DeepPartial<GlobalDefaultAgent>;
+  enabledOAuthSSO?: boolean;
   languageModel?: DeepPartial<GlobalLLMConfig>;
 }
 

package/tsconfig.json

@@ -19,13 +19,13 @@
     "types": ["vitest/globals"],
     "paths": {
       "@/*": ["./src/*"],
-      "~test-utils": ["./tests/utils.tsx"],
+      "~test-utils": ["./tests/utils.tsx"]
     },
     "plugins": [
       {
-        "name": "next",
-      },
-    ],
+        "name": "next"
+      }
+    ]
   },
   "exclude": ["node_modules"],
   "include": [
@@ -36,11 +36,11 @@
     "**/*.ts",
     "**/*.d.ts",
     "**/*.tsx",
-    ".next/types/**/*.ts",
+    ".next/types/**/*.ts"
   ],
   "ts-node": {
     "compilerOptions": {
-      "module": "commonjs",
-    },
-  },
+      "module": "commonjs"
+    }
+  }
 }