@lobehub/chat 0.124.3 → 0.125.0

package/locales/zh-TW/setting.json

@@ -263,6 +263,22 @@
       "placeholder": "請輸入訪問密碼",
       "title": "訪問密碼"
     },
+    "oauth": {
+      "info": {
+        "desc": "已登錄",
+        "title": "帳戶資訊"
+      },
+      "signin": {
+        "action": "登錄",
+        "desc": "使用 SSO 登錄以解鎖應用",
+        "title": "登錄帳號"
+      },
+      "signout": {
+        "action": "退出登錄",
+        "confirm": "確認退出？",
+        "success": "退出登錄成功"
+      }
+    },
     "title": "系統設定"
   },
   "settingTTS": {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lobehub/chat",
-  "version": "0.124.3",
+  "version": "0.125.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",
@@ -105,6 +105,7 @@
     "modern-screenshot": "^4",
     "nanoid": "^5",
     "next": "^14.1",
+    "next-auth": "beta",
     "numeral": "^2.0.6",
     "nuqs": "^1.15.4",
     "openai": "^4.22",

package/src/app/api/auth.ts

@@ -4,9 +4,15 @@ import { ChatErrorType } from '@/types/fetch';
 interface AuthConfig {
   accessCode?: string | null;
   apiKey?: string | null;
+  oauthAuthorized?: boolean;
 }
 
-export const checkAuth = ({ apiKey, accessCode }: AuthConfig) => {
+export const checkAuth = ({ apiKey, accessCode, oauthAuthorized }: AuthConfig) => {
+  // If authorized by oauth
+  if (oauthAuthorized) {
+    return { auth: true };
+  }
+
   const { ACCESS_CODES } = getServerConfig();
 
   // if apiKey exist

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

@@ -1,6 +1,6 @@
 import { getPreferredRegion } from '@/app/api/config';
 import { createErrorResponse } from '@/app/api/errorResponse';
-import { LOBE_CHAT_AUTH_HEADER } from '@/const/auth';
+import { LOBE_CHAT_AUTH_HEADER, OAUTH_AUTHORIZED } from '@/const/auth';
 import {
   AgentInitErrorPayload,
   AgentRuntimeError,
@@ -10,7 +10,7 @@ import {
 import { ChatErrorType } from '@/types/fetch';
 import { ChatStreamPayload } from '@/types/openai/chat';
 
-import { checkPasswordOrUseUserApiKey, getJWTPayload } from '../auth';
+import { checkAuthMethod, getJWTPayload } from '../auth';
 import AgentRuntime from './agentRuntime';
 
 export const runtime = 'edge';
@@ -25,11 +25,13 @@ export const POST = async (req: Request, { params }: { params: { provider: strin
   try {
     // get Authorization from header
     const authorization = req.headers.get(LOBE_CHAT_AUTH_HEADER);
+    const oauthAuthorized = !!req.headers.get(OAUTH_AUTHORIZED);
+
     if (!authorization) throw AgentRuntimeError.createError(ChatErrorType.Unauthorized);
 
     // check the Auth With payload
     const payload = await getJWTPayload(authorization);
-    checkPasswordOrUseUserApiKey(payload.accessCode, payload.apiKey);
+    checkAuthMethod(payload.accessCode, payload.apiKey, oauthAuthorized);
 
     const body = await req.clone().json();
     agentRuntime = await AgentRuntime.initializeWithUserPayload(params.provider, payload, {

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

@@ -31,14 +31,22 @@ export const getJWTPayload = async (token: string): Promise<JWTPayload> => {
 };
 
 /**
- * Check if the provided access code is valid or if a user API key should be used.
+ * Check if the provided access code is valid, a user API key should be used or the OAuth 2 header is provided.
  *
  * @param {string} accessCode - The access code to check.
  * @param {string} apiKey - The user API key.
+ * @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 checkPasswordOrUseUserApiKey = (accessCode?: string, apiKey?: string) => {
-  const { ACCESS_CODES } = getServerConfig();
+export const checkAuthMethod = (
+  accessCode?: string,
+  apiKey?: string,
+  oauthAuthorized?: boolean,
+) => {
+  const { ACCESS_CODES, ENABLE_OAUTH_SSO } = getServerConfig();
+
+  // if OAuth 2 header is provided
+  if (ENABLE_OAUTH_SSO && oauthAuthorized) return;
 
   // if apiKey exist
   if (apiKey) return;

package/src/app/api/chat/google/route.ts

@@ -1,6 +1,6 @@
 import { createErrorResponse } from '@/app/api/errorResponse';
 import { getServerConfig } from '@/config/server';
-import { LOBE_CHAT_AUTH_HEADER } from '@/const/auth';
+import { LOBE_CHAT_AUTH_HEADER, OAUTH_AUTHORIZED } from '@/const/auth';
 import {
   AgentInitErrorPayload,
   AgentRuntimeError,
@@ -11,7 +11,7 @@ import {
 import { ChatErrorType } from '@/types/fetch';
 import { ChatStreamPayload } from '@/types/openai/chat';
 
-import { checkPasswordOrUseUserApiKey, getJWTPayload } from '../auth';
+import { checkAuthMethod, getJWTPayload } from '../auth';
 
 // due to the Chinese region does not support accessing Google
 // we need to use proxy to access it
@@ -49,11 +49,13 @@ export const POST = async (req: Request) => {
   try {
     // get Authorization from header
     const authorization = req.headers.get(LOBE_CHAT_AUTH_HEADER);
+    const oauthAuthorized = !!req.headers.get(OAUTH_AUTHORIZED);
+
     if (!authorization) throw AgentRuntimeError.createError(ChatErrorType.Unauthorized);
 
     // check the Auth With payload
     const payload = await getJWTPayload(authorization);
-    checkPasswordOrUseUserApiKey(payload.accessCode, payload.apiKey);
+    checkAuthMethod(payload.accessCode, payload.apiKey, oauthAuthorized);
 
     const { GOOGLE_API_KEY } = getServerConfig();
     const apiKey = payload?.apiKey || GOOGLE_API_KEY;

package/src/app/api/config/route.ts

@@ -7,11 +7,18 @@ export const runtime = 'edge';
  * get Server config to client
  */
 export const GET = async () => {
-  const { CUSTOM_MODELS, ENABLED_MOONSHOT, ENABLED_ZHIPU, ENABLED_AWS_BEDROCK, ENABLED_GOOGLE } =
-    getServerConfig();
+  const {
+    CUSTOM_MODELS,
+    ENABLED_MOONSHOT,
+    ENABLED_ZHIPU,
+    ENABLED_AWS_BEDROCK,
+    ENABLED_GOOGLE,
+    ENABLE_OAUTH_SSO,
+  } = getServerConfig();
 
   const config: GlobalServerConfig = {
     customModelName: CUSTOM_MODELS,
+    enabledOAuthSSO: ENABLE_OAUTH_SSO,
     languageModel: {
       bedrock: { enabled: ENABLED_AWS_BEDROCK },
       google: { enabled: ENABLED_GOOGLE },

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

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

package/src/app/api/oauth/next-auth.ts

@@ -0,0 +1,21 @@
+import NextAuth from 'next-auth';
+import Auth0 from 'next-auth/providers/auth0';
+
+import { getServerConfig } from '@/config/server';
+
+const { AUTH0_CLIENT_ID, AUTH0_CLIENT_SECRET, AUTH0_ISSUER } = getServerConfig();
+
+const nextAuth = NextAuth({
+  providers: [
+    Auth0({
+      clientId: AUTH0_CLIENT_ID,
+      clientSecret: AUTH0_CLIENT_SECRET,
+      issuer: AUTH0_ISSUER,
+    }),
+  ],
+});
+
+export const {
+  handlers: { GET, POST },
+  auth,
+} = nextAuth;

package/src/app/api/openai/createBizOpenAI/index.ts

@@ -14,9 +14,10 @@ import { createOpenai } from './createOpenai';
  * if auth not pass ,just return error response
  */
 export const createBizOpenAI = (req: Request, model: string): Response | OpenAI => {
-  const { apiKey, accessCode, endpoint, useAzure, apiVersion } = getOpenAIAuthFromRequest(req);
+  const { apiKey, accessCode, endpoint, useAzure, apiVersion, oauthAuthorized } =
+    getOpenAIAuthFromRequest(req);
 
-  const result = checkAuth({ accessCode, apiKey });
+  const result = checkAuth({ accessCode, apiKey, oauthAuthorized });
 
   if (!result.auth) {
     return createErrorResponse(result.error as ErrorType);

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

@@ -7,12 +7,15 @@ import { ChatErrorType, ErrorType } from '@/types/fetch';
 
 import { parserPluginSettings } from './settings';
 
-const checkAuth = (accessCode: string | null) => {
-  const { ACCESS_CODES, PLUGIN_SETTINGS } = getServerConfig();
+const checkAuth = (accessCode: string | null, oauthAuthorized: boolean | null) => {
+  const { ACCESS_CODES, PLUGIN_SETTINGS, ENABLE_OAUTH_SSO } = 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 accessCode doesn't exist
   if (!ACCESS_CODES.length) return { auth: true };
 
@@ -30,9 +33,9 @@ const defaultPluginSettings = parserPluginSettings(PLUGIN_SETTINGS);
 const handler = createGatewayOnEdgeRuntime({ defaultPluginSettings, pluginsIndexUrl });
 
 export const POST = async (req: Request) => {
-  const { accessCode } = getOpenAIAuthFromRequest(req);
+  const { accessCode, oauthAuthorized } = getOpenAIAuthFromRequest(req);
 
-  const result = checkAuth(accessCode);
+  const result = checkAuth(accessCode, oauthAuthorized);
 
   if (!result.auth) {
     return createErrorResponse(result.error as ErrorType);

package/src/app/settings/common/Common.tsx

@@ -2,6 +2,7 @@ import { Form, type ItemGroup, SelectWithImg, SliderWithInput } from '@lobehub/u
 import { Form as AntForm, App, Button, Input, Select } from 'antd';
 import isEqual from 'fast-deep-equal';
 import { AppWindow, Monitor, Moon, Palette, Sun } from 'lucide-react';
+import { signIn, signOut, useSession } from 'next-auth/react';
 import { memo, useCallback, useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
 
@@ -23,12 +24,16 @@ type SettingItemGroup = ItemGroup;
 
 export interface SettingsCommonProps {
   showAccessCodeConfig: boolean;
+  showOAuthLogin: boolean;
 }
 
-const Common = memo<SettingsCommonProps>(({ showAccessCodeConfig }) => {
+const Common = memo<SettingsCommonProps>(({ showAccessCodeConfig, showOAuthLogin }) => {
   const { t } = useTranslation('setting');
   const [form] = AntForm.useForm();
 
+  const { data: session, status } = useSession();
+  const isOAuthLoggedIn = status === 'authenticated' && session && session.user;
+
   const [clearSessions, clearSessionGroups] = useSessionStore((s) => [
     s.clearSessions,
     s.clearSessionGroups,
@@ -49,6 +54,22 @@ const Common = memo<SettingsCommonProps>(({ showAccessCodeConfig }) => {
 
   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('auth0');
+  }, []);
+
   const handleReset = useCallback(() => {
     modal.confirm({
       centered: true,
@@ -196,6 +217,23 @@ const Common = memo<SettingsCommonProps>(({ showAccessCodeConfig }) => {
         label: t('settingSystem.accessCode.title'),
         name: 'password',
       },
+      {
+        children: isOAuthLoggedIn ? (
+          <Button onClick={handleSignOut}>{t('settingSystem.oauth.signout.action')}</Button>
+        ) : (
+          <Button onClick={handleSignIn} type="primary">
+            {t('settingSystem.oauth.signin.action')}
+          </Button>
+        ),
+        desc: isOAuthLoggedIn
+          ? `${session.user?.email} ${t('settingSystem.oauth.info.desc')}`
+          : t('settingSystem.oauth.signin.desc'),
+        hidden: !showOAuthLogin,
+        label: isOAuthLoggedIn
+          ? t('settingSystem.oauth.info.title')
+          : t('settingSystem.oauth.signin.title'),
+        minWidth: undefined,
+      },
       {
         children: (
           <Button danger onClick={handleReset} type="primary">

package/src/app/settings/common/page.tsx

@@ -3,7 +3,7 @@ import { getServerConfig } from '@/config/server';
 import Index from './index';
 
 export default () => {
-  const { SHOW_ACCESS_CODE_CONFIG } = getServerConfig();
+  const { SHOW_ACCESS_CODE_CONFIG, ENABLE_OAUTH_SSO } = getServerConfig();
 
-  return <Index showAccessCodeConfig={SHOW_ACCESS_CODE_CONFIG} />;
+  return <Index showAccessCodeConfig={SHOW_ACCESS_CODE_CONFIG} showOAuthLogin={ENABLE_OAUTH_SSO} />;
 };

package/src/app/settings/page.tsx

@@ -9,9 +9,9 @@ const Page = () => {
 
   const Page = mobile ? MobilePage : DesktopPage;
 
-  const { SHOW_ACCESS_CODE_CONFIG } = getServerConfig();
+  const { SHOW_ACCESS_CODE_CONFIG, ENABLE_OAUTH_SSO } = getServerConfig();
 
-  return <Page showAccessCodeConfig={SHOW_ACCESS_CODE_CONFIG} />;
+  return <Page showAccessCodeConfig={SHOW_ACCESS_CODE_CONFIG} showOAuthLogin={ENABLE_OAUTH_SSO} />;
 };
 
 export default Page;

package/src/chains/summaryTitle.ts

@@ -1,7 +1,7 @@
 import { chatHelpers } from '@/store/chat/helpers';
 import { globalHelpers } from '@/store/global/helpers';
 import { LanguageModel } from '@/types/llm';
-import { OpenAIChatMessage, ChatStreamPayload } from '@/types/openai/chat';
+import { ChatStreamPayload, OpenAIChatMessage } from '@/types/openai/chat';
 
 export const chainSummaryTitle = async (
   messages: OpenAIChatMessage[],

package/src/config/server/app.ts

@@ -47,5 +47,10 @@ export const getAppConfig = () => {
       : 'https://chat-plugins.lobehub.com',
 
     PLUGIN_SETTINGS: process.env.PLUGIN_SETTINGS,
+
+    ENABLE_OAUTH_SSO: !!process.env.ENABLE_OAUTH_SSO,
+    AUTH0_CLIENT_ID: process.env.AUTH0_CLIENT_ID || '',
+    AUTH0_CLIENT_SECRET: process.env.AUTH0_CLIENT_SECRET || '',
+    AUTH0_ISSUER: process.env.AUTH0_ISSUER || '',
   };
 };

package/src/const/auth.ts

@@ -1,5 +1,7 @@
 export const LOBE_CHAT_AUTH_HEADER = 'X-lobe-chat-auth';
 
+export const OAUTH_AUTHORIZED = 'X-oauth-authorized';
+
 export const JWT_SECRET_KEY = 'LobeHub · LobeChat';
 export const NON_HTTP_PREFIX = 'http_nosafe';
 

package/src/const/fetch.ts

@@ -7,6 +7,8 @@ export const AZURE_OPENAI_API_VERSION = 'X-azure-openai-api-version';
 
 export const LOBE_CHAT_ACCESS_CODE = 'X-lobe-chat-access-code';
 
+export const OAUTH_AUTHORIZED = 'X-oauth-authorized';
+
 /**
  * @deprecated
  */
@@ -16,8 +18,10 @@ export const getOpenAIAuthFromRequest = (req: Request) => {
   const accessCode = req.headers.get(LOBE_CHAT_ACCESS_CODE);
   const useAzureStr = req.headers.get(USE_AZURE_OPENAI);
   const apiVersion = req.headers.get(AZURE_OPENAI_API_VERSION);
+  const oauthAuthorizedStr = req.headers.get(OAUTH_AUTHORIZED);
 
+  const oauthAuthorized = !!oauthAuthorizedStr;
   const useAzure = !!useAzureStr;
 
-  return { accessCode, apiKey, apiVersion, endpoint, useAzure };
+  return { accessCode, apiKey, apiVersion, endpoint, oauthAuthorized, useAzure };
 };

package/src/features/ChatInput/ActionBar/Clear.tsx

@@ -21,9 +21,11 @@ const Clear = memo(() => {
     clearImageList();
   }, []);
 
-  const actionTitle: any = confirmOpened
-    ? void 0
-    : <HotKeys desc={t('clearCurrentMessages', { ns: 'chat' })} keys={hotkeys} />
+  const actionTitle: any = confirmOpened ? (
+    void 0
+  ) : (
+    <HotKeys desc={t('clearCurrentMessages', { ns: 'chat' })} keys={hotkeys} />
+  );
 
   return (
     <Popconfirm
@@ -35,11 +37,7 @@ const Clear = memo(() => {
       placement={'topRight'}
       title={t('confirmClearCurrentMessages', { ns: 'chat' })}
     >
-      <ActionIcon
-        icon={Eraser}
-        placement={'bottom'}
-        title={actionTitle}
-      />
+      <ActionIcon icon={Eraser} placement={'bottom'} title={actionTitle} />
     </Popconfirm>
   );
 });

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

@@ -1,16 +1,22 @@
 import { Icon } from '@lobehub/ui';
 import { Segmented } from 'antd';
-import { AsteriskSquare, KeySquare } from 'lucide-react';
+import { SegmentedLabeledOption } from 'antd/es/segmented';
+import { AsteriskSquare, KeySquare, ScanFace } from 'lucide-react';
 import { memo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
 
+import { useGlobalStore } from '@/store/global';
+import { commonSelectors } from '@/store/global/selectors';
+
 import APIKeyForm from './APIKeyForm';
 import AccessCodeForm from './AccessCodeForm';
+import OAuthForm from './OAuthForm';
 import { ErrorActionContainer } from './style';
 
 enum Tab {
   Api = 'api',
+  Oauth = 'oauth',
   Password = 'password',
 }
 
@@ -21,27 +27,39 @@ interface InvalidAccessCodeProps {
 
 const InvalidAccessCode = memo<InvalidAccessCodeProps>(({ id, provider }) => {
   const { t } = useTranslation('error');
-  const [mode, setMode] = useState<Tab>(Tab.Password);
+  const isEnabledOAuth = useGlobalStore(commonSelectors.enabledOAuthSSO);
+  const defaultTab = isEnabledOAuth ? Tab.Oauth : Tab.Password;
+  const [mode, setMode] = useState<Tab>(defaultTab);
 
   return (
     <ErrorActionContainer>
       <Segmented
         block
         onChange={(value) => setMode(value as Tab)}
-        options={[
-          {
-            icon: <Icon icon={AsteriskSquare} />,
-            label: t('unlock.tabs.password'),
-            value: Tab.Password,
-          },
-          { icon: <Icon icon={KeySquare} />, label: t('unlock.tabs.apiKey'), value: Tab.Api },
-        ]}
+        options={
+          [
+            isEnabledOAuth
+              ? {
+                  icon: <Icon icon={ScanFace} />,
+                  label: t('oauth', { ns: 'common' }),
+                  value: Tab.Oauth,
+                }
+              : undefined,
+            {
+              icon: <Icon icon={AsteriskSquare} />,
+              label: t('unlock.tabs.password'),
+              value: Tab.Password,
+            },
+            { icon: <Icon icon={KeySquare} />, label: t('unlock.tabs.apiKey'), value: Tab.Api },
+          ].filter(Boolean) as SegmentedLabeledOption[]
+        }
         style={{ width: '100%' }}
         value={mode}
       />
       <Flexbox gap={24}>
         {mode === Tab.Password && <AccessCodeForm id={id} />}
         {mode === Tab.Api && <APIKeyForm id={id} provider={provider} />}
+        {isEnabledOAuth && mode === Tab.Oauth && <OAuthForm id={id} />}
       </Flexbox>
     </ErrorActionContainer>
   );

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: {