@lobehub/chat 1.99.6 → 1.100.0

package/src/database/migrations/meta/_journal.json

@@ -196,6 +196,13 @@
       "when": 1752413805765,
       "tag": "0027_ai_image",
       "breakpoints": true
+    },
+    {
+      "idx": 28,
+      "version": "7",
+      "when": 1752567402506,
+      "tag": "0028_oauth_handoffs",
+      "breakpoints": true
     }
   ],
   "version": "6"

package/src/database/models/oauthHandoff.ts

@@ -0,0 +1,94 @@
+import { and, eq, lt, sql } from 'drizzle-orm';
+
+import { LobeChatDatabase } from '@/database/type';
+
+import { NewOAuthHandoff, OAuthHandoffItem, oauthHandoffs } from '../schemas';
+
+export class OAuthHandoffModel {
+  private db: LobeChatDatabase;
+
+  constructor(db: LobeChatDatabase) {
+    this.db = db;
+  }
+
+  /**
+   * 创建新的认证凭证传递记录
+   * @param params 凭证数据
+   * @returns 创建的记录
+   */
+  create = async (params: NewOAuthHandoff): Promise<OAuthHandoffItem> => {
+    const [result] = await this.db
+      .insert(oauthHandoffs)
+      .values(params)
+      .onConflictDoNothing()
+      .returning();
+
+    return result;
+  };
+
+  /**
+   * 获取并消费认证凭证
+   * 该方法会先查询记录，如果找到则立即删除，确保凭证只能被使用一次
+   * @param id 凭证ID
+   * @param client 客户端类型
+   * @returns 凭证数据，如果不存在或已过期则返回null
+   */
+  fetchAndConsume = async (id: string, client: string): Promise<OAuthHandoffItem | null> => {
+    // 先查找记录，同时检查是否过期 (5分钟TTL)
+    const fiveMinutesAgo = new Date(Date.now() - 5 * 60 * 1000);
+
+    const handoff = await this.db.query.oauthHandoffs.findFirst({
+      where: and(
+        eq(oauthHandoffs.id, id),
+        eq(oauthHandoffs.client, client),
+        // 检查记录是否在5分钟内创建
+        sql`${oauthHandoffs.createdAt} > ${fiveMinutesAgo}`,
+      ),
+    });
+
+    if (!handoff) {
+      return null;
+    }
+
+    // 立即删除记录以确保一次性使用
+    await this.db.delete(oauthHandoffs).where(eq(oauthHandoffs.id, id));
+
+    return handoff;
+  };
+
+  /**
+   * 清理过期的认证凭证记录
+   * 这个方法应该被定期调用（比如通过 cron job）来清理过期的记录
+   * @returns 清理的记录数量
+   */
+  cleanupExpired = async (): Promise<number> => {
+    const fiveMinutesAgo = new Date(Date.now() - 5 * 60 * 1000);
+
+    const result = await this.db
+      .delete(oauthHandoffs)
+      .where(lt(oauthHandoffs.createdAt, fiveMinutesAgo));
+
+    return result.rowCount || 0;
+  };
+
+  /**
+   * 检查凭证是否存在（不消费）
+   * 主要用于测试和调试
+   * @param id 凭证ID
+   * @param client 客户端类型
+   * @returns 是否存在且未过期
+   */
+  exists = async (id: string, client: string): Promise<boolean> => {
+    const fiveMinutesAgo = new Date(Date.now() - 5 * 60 * 1000);
+
+    const handoff = await this.db.query.oauthHandoffs.findFirst({
+      where: and(
+        eq(oauthHandoffs.id, id),
+        eq(oauthHandoffs.client, client),
+        sql`${oauthHandoffs.createdAt} > ${fiveMinutesAgo}`,
+      ),
+    });
+
+    return !!handoff;
+  };
+}

package/src/database/repositories/tableViewer/index.test.ts

@@ -23,7 +23,7 @@ describe('TableViewerRepo', () => {
     it('should return all tables with counts', async () => {
       const result = await repo.getAllTables();
 
-      expect(result.length).toEqual(58);
+      expect(result.length).toEqual(59);
       expect(result[0]).toEqual({ name: 'agents', count: 0, type: 'BASE TABLE' });
     });
 

package/src/database/schemas/oidc.ts

@@ -1,5 +1,6 @@
 /* eslint-disable sort-keys-fix/sort-keys-fix  */
 import { boolean, jsonb, pgTable, primaryKey, text, varchar } from 'drizzle-orm/pg-core';
+import { createInsertSchema, createSelectSchema } from 'drizzle-zod';
 
 import { timestamps, timestamptz } from './_helpers';
 import { users } from './user';
@@ -156,3 +157,48 @@ export const oidcConsents = pgTable(
     pk: primaryKey({ columns: [table.userId, table.clientId] }),
   }),
 );
+
+/**
+ * 通用认证凭证传递表
+ * 用于在不同客户端（桌面端、浏览器插件、移动端等）之间安全传递认证凭证
+ *
+ * 工作流程:
+ * 1. 客户端生成唯一的 handoff ID
+ * 2. 将 handoff ID 作为参数附加到 OAuth redirect_uri
+ * 3. 认证成功后，中间页将凭证存储到此表
+ * 4. 客户端轮询此表获取凭证
+ * 5. 成功获取后立即删除记录
+ */
+export const oauthHandoffs = pgTable('oauth_handoffs', {
+  /**
+   * 由客户端生成的一次性唯一标识符
+   * 用于客户端轮询时认领自己的凭证
+   */
+  id: text('id').primaryKey(),
+
+  /**
+   * 客户端类型标识
+   * 如: 'desktop', 'browser-extension', 'mobile-app' 等
+   */
+  client: varchar('client', { length: 50 }).notNull(),
+
+  /**
+   * 凭证数据的 JSON 载荷
+   * 灵活存储不同认证流程所需的各种数据
+   * 当前主要包含: { code: string; state: string }
+   */
+  payload: jsonb('payload').$type<Record<string, unknown>>().notNull(),
+
+  /**
+   * 时间戳字段，用于 TTL 控制
+   * 凭证应在创建后 5 分钟内被消费，否则视为过期
+   */
+  ...timestamps,
+});
+
+// Zod schemas for validation
+export const insertAuthHandoffSchema = createInsertSchema(oauthHandoffs);
+export const selectAuthHandoffSchema = createSelectSchema(oauthHandoffs);
+
+export type OAuthHandoffItem = typeof oauthHandoffs.$inferSelect;
+export type NewOAuthHandoff = typeof oauthHandoffs.$inferInsert;

package/src/features/ElectronTitlebar/Connection/Waiting.tsx

@@ -1,24 +1,16 @@
 'use client';
 
 import { useWatchBroadcast } from '@lobechat/electron-client-ipc';
-import { Button, Icon, Text } from '@lobehub/ui';
-import { createStyles, cx, keyframes } from 'antd-style';
-import { WifiIcon } from 'lucide-react';
-import { memo } from 'react';
+import { Button, Highlighter, Icon, Text } from '@lobehub/ui';
+import { createStyles } from 'antd-style';
+import { ShieldX } from 'lucide-react';
+import { memo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
+import { Flexbox } from 'react-layout-kit';
 
 import { useElectronStore } from '@/store/electron';
 
-const airdropPulse = keyframes`
-    0% {
-      transform: translate(-50%, -50%) scale(0.8);
-      opacity: 0.5;
-    }
-    100% {
-      transform: translate(-50%, -50%) scale(2.5);
-      opacity: 0;
-    }
-`;
+import WaitingAnim from './WaitingAnim';
 
 const useStyles = createStyles(({ css, token }) => ({
   container: css`
@@ -47,15 +39,15 @@ const useStyles = createStyles(({ css, token }) => ({
     color: ${token.colorTextSecondary} !important;
   `,
 
-  helpLink: css`
-    margin-inline-start: ${token.marginXXS}px;
-    color: ${token.colorTextSecondary};
-    text-decoration: underline;
-    text-underline-offset: 2px;
+  errorIcon: css`
+    margin-block-end: ${token.marginXL}px;
+    color: ${token.colorError};
+  `,
 
-    &:hover {
-      color: ${token.colorText};
-    }
+  errorMessage: css`
+    margin-block-end: ${token.marginXL}px !important;
+    color: ${token.colorError} !important;
+    text-align: center;
   `,
 
   helpText: css`
@@ -63,84 +55,7 @@ const useStyles = createStyles(({ css, token }) => ({
     font-size: ${token.fontSizeSM}px;
     color: ${token.colorTextTertiary};
   `,
-  // 新增：图标和脉冲动画的容器
-  iconContainer: css`
-    position: relative;
-
-    display: flex;
-    align-items: center;
-    justify-content: center;
-
-    width: 160px;
-    height: 160px;
-    margin-block-end: ${token.marginXL}px;
-  `,
-
-  // 新增：不同延迟的脉冲动画
-  pulse1: css`
-    animation: ${airdropPulse} 3s ease-out infinite;
-  `,
-
-  pulse2: css`
-    animation: ${airdropPulse} 3s ease-out 1.2s infinite;
-  `,
 
-  pulse3: css`
-    animation: ${airdropPulse} 3s ease-out 1.8s infinite;
-  `,
-  // 新增：基础脉冲样式
-  pulseBase: css`
-    pointer-events: none;
-    content: '';
-
-    position: absolute;
-    inset-block-start: 50%;
-    inset-inline-start: 50%;
-    transform: translate(-50%, -50%);
-
-    width: 100px;
-    height: 100px;
-    border-radius: 50%;
-
-    opacity: 0;
-    background-color: ${token.colorPrimaryBgHover};
-  `,
-
-  // 新增：Radar 图标样式
-  radarIcon: css`
-    z-index: 1;
-    color: ${token.colorPrimary};
-  `,
-
-  ring1: css`
-    width: 80px;
-    height: 80px;
-    border: 1px solid ${token.colorText};
-  `,
-
-  ring2: css`
-    width: 120px;
-    height: 120px;
-    border: 1px solid ${token.colorTextQuaternary};
-  `,
-
-  ring3: css`
-    width: 160px;
-    height: 160px;
-    border: 1px solid ${token.colorFillSecondary};
-  `,
-
-  // 新增：星环基础样式
-  ringBase: css`
-    pointer-events: none;
-
-    position: absolute;
-    inset-block-start: 50%;
-    inset-inline-start: 50%;
-    transform: translate(-50%, -50%);
-
-    border-radius: 50%;
-  `,
   title: css`
     margin-block-end: ${token.marginSM}px !important;
     color: ${token.colorText} !important;
@@ -151,46 +66,75 @@ interface WaitingOAuthProps {
   setIsOpen: (open: boolean) => void;
   setWaiting: (waiting: boolean) => void;
 }
+
 const WaitingOAuth = memo<WaitingOAuthProps>(({ setWaiting, setIsOpen }) => {
   const { styles } = useStyles();
-  const { t } = useTranslation('electron'); // 指定 namespace 为 electron
-  const [disconnect, refreshServerConfig] = useElectronStore((s) => [
+  const { t } = useTranslation('electron');
+  const [errorMessage, setErrorMessage] = useState<string | null>(null);
+  const [disconnect, refreshServerConfig, connectRemoteServer] = useElectronStore((s) => [
     s.disconnectRemoteServer,
     s.refreshServerConfig,
+    s.connectRemoteServer,
   ]);
 
   const handleCancel = async () => {
     await disconnect();
     setWaiting(false);
+    setErrorMessage(null);
+  };
+
+  const handleRetry = async () => {
+    setErrorMessage(null);
+    const { dataSyncConfig } = useElectronStore.getState();
+    await connectRemoteServer(dataSyncConfig);
   };
 
   useWatchBroadcast('authorizationSuccessful', async () => {
     setIsOpen(false);
     setWaiting(false);
+    setErrorMessage(null);
     await refreshServerConfig();
   });
 
+  useWatchBroadcast('authorizationFailed', ({ error }) => {
+    setErrorMessage(error);
+  });
+
+  // 错误状态
+  if (errorMessage) {
+    return (
+      <div className={styles.container}>
+        <Flexbox className={styles.content} gap={12}>
+          <Flexbox align={'center'}>
+            <Icon className={styles.errorIcon} icon={ShieldX} size={64} />
+            <Text as={'h4'} className={styles.title}>
+              {t('waitingOAuth.errorTitle')}
+            </Text>
+          </Flexbox>
+          <Highlighter language={'log'} style={{ maxHeight: 500, maxWidth: 800, overflow: 'auto' }}>
+            {errorMessage}
+          </Highlighter>
+          <Flexbox gap={12} horizontal>
+            <Button onClick={handleCancel}>{t('waitingOAuth.cancel')}</Button>
+            <Button onClick={handleRetry} type="primary">
+              {t('waitingOAuth.retry')}
+            </Button>
+          </Flexbox>
+        </Flexbox>
+      </div>
+    );
+  }
+
+  // 正常等待状态
   return (
     <div className={styles.container}>
       <div className={styles.content}>
-        {/* 更新为新的图标和脉冲动画结构 */}
-        <div className={styles.iconContainer}>
-          {/* 新增：星环 */}
-          <div className={cx(styles.ringBase, styles.ring1)} />
-          <div className={cx(styles.ringBase, styles.ring2)} />
-          <div className={cx(styles.ringBase, styles.ring3)} />
-          {/* 脉冲 */}
-          <div className={cx(styles.pulseBase, styles.pulse1)} />
-          <div className={cx(styles.pulseBase, styles.pulse2)} />
-          <div className={cx(styles.pulseBase, styles.pulse3)} />
-
-          <Icon className={styles.radarIcon} icon={WifiIcon} size={40} />
-        </div>
+        <WaitingAnim />
         <Text as={'h4'} className={styles.title}>
           {t('waitingOAuth.title')}
         </Text>
         <Text className={styles.description}>{t('waitingOAuth.description')}</Text>
-        <Button onClick={handleCancel}>{t('waitingOAuth.cancel')}</Button>{' '}
+        <Button onClick={handleCancel}>{t('waitingOAuth.cancel')}</Button>
         <Text className={styles.helpText}>{t('waitingOAuth.helpText')}</Text>
       </div>
     </div>

package/src/features/ElectronTitlebar/Connection/WaitingAnim.tsx

@@ -0,0 +1,114 @@
+'use client';
+
+import { Icon } from '@lobehub/ui';
+import { createStyles, cx, keyframes } from 'antd-style';
+import { WifiIcon } from 'lucide-react';
+import { memo } from 'react';
+
+const airdropPulse = keyframes`
+    0% {
+      transform: translate(-50%, -50%) scale(0.8);
+      opacity: 0.5;
+    }
+    100% {
+      transform: translate(-50%, -50%) scale(2.5);
+      opacity: 0;
+    }
+`;
+
+const useStyles = createStyles(({ css, token }) => ({
+  container: css`
+    position: relative;
+
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    width: 160px;
+    height: 160px;
+    margin-block-end: ${token.marginXL}px;
+  `,
+
+  pulse1: css`
+    animation: ${airdropPulse} 3s ease-out infinite;
+  `,
+
+  pulse2: css`
+    animation: ${airdropPulse} 3s ease-out 1.2s infinite;
+  `,
+
+  pulse3: css`
+    animation: ${airdropPulse} 3s ease-out 1.8s infinite;
+  `,
+  pulseBase: css`
+    pointer-events: none;
+    content: '';
+
+    position: absolute;
+    inset-block-start: 50%;
+    inset-inline-start: 50%;
+    transform: translate(-50%, -50%);
+
+    width: 100px;
+    height: 100px;
+    border-radius: 50%;
+
+    opacity: 0;
+    background-color: ${token.colorPrimaryBgHover};
+  `,
+
+  radarIcon: css`
+    z-index: 1;
+    color: ${token.colorPrimary};
+  `,
+
+  ring1: css`
+    width: 80px;
+    height: 80px;
+    border: 1px solid ${token.colorText};
+  `,
+
+  ring2: css`
+    width: 120px;
+    height: 120px;
+    border: 1px solid ${token.colorTextQuaternary};
+  `,
+
+  ring3: css`
+    width: 160px;
+    height: 160px;
+    border: 1px solid ${token.colorFillSecondary};
+  `,
+
+  ringBase: css`
+    pointer-events: none;
+
+    position: absolute;
+    inset-block-start: 50%;
+    inset-inline-start: 50%;
+    transform: translate(-50%, -50%);
+
+    border-radius: 50%;
+  `,
+}));
+
+const WaitingAnim = memo(() => {
+  const { styles } = useStyles();
+
+  return (
+    <div className={styles.container}>
+      {/* 新增：星环 */}
+      <div className={cx(styles.ringBase, styles.ring1)} />
+      <div className={cx(styles.ringBase, styles.ring2)} />
+      <div className={cx(styles.ringBase, styles.ring3)} />
+      {/* 脉冲 */}
+      <div className={cx(styles.pulseBase, styles.pulse1)} />
+      <div className={cx(styles.pulseBase, styles.pulse2)} />
+      <div className={cx(styles.pulseBase, styles.pulse3)} />
+
+      <Icon className={styles.radarIcon} icon={WifiIcon} size={40} />
+    </div>
+  );
+});
+
+export default WaitingAnim;

package/src/libs/oidc-provider/config.ts

@@ -1,11 +1,14 @@
 import { ClientMetadata } from 'oidc-provider';
+import urlJoin from 'url-join';
+
+import { appEnv } from '@/envs/app';
 
 /**
  * 默认 OIDC 客户端配置
  */
 export const defaultClients: ClientMetadata[] = [
   {
-    application_type: 'native',
+    application_type: 'web',
     client_id: 'lobehub-desktop',
     client_name: 'LobeHub Desktop',
     // 仅支持授权码流程
@@ -13,19 +16,17 @@ export const defaultClients: ClientMetadata[] = [
 
     logo_uri: 'https://hub-apac-1.lobeobjects.space/lobehub-desktop-icon.png',
 
-    // 桌面端注册的自定义协议回调（使用反向域名格式）
     post_logout_redirect_uris: [
-      'com.lobehub.lobehub-desktop-dev://auth/logout/callback',
-      'com.lobehub.lobehub-desktop-nightly://auth/logout/callback',
-      'com.lobehub.lobehub-desktop-beta://auth/logout/callback',
-      'com.lobehub.lobehub-desktop://auth/logout/callback',
+      // 动态构建 Web 页面回调 URL
+      urlJoin(appEnv.APP_URL!, '/oauth/logout'),
+      'http://localhost:3210/oauth/logout',
     ],
 
+    // 桌面端授权回调 - 改为 Web 页面路径
     redirect_uris: [
-      'com.lobehub.lobehub-desktop-dev://auth/callback',
-      'com.lobehub.lobehub-desktop-nightly://auth/callback',
-      'com.lobehub.lobehub-desktop-beta://auth/callback',
-      'com.lobehub.lobehub-desktop://auth/callback',
+      // 动态构建 Web 页面回调 URL
+      urlJoin(appEnv.APP_URL!, '/oidc/callback/desktop'),
+      'http://localhost:3210/oidc/callback/desktop',
     ],
 
     // 支持授权码获取令牌和刷新令牌
@@ -40,16 +41,14 @@ export const defaultClients: ClientMetadata[] = [
  * OIDC Scopes 定义
  */
 export const defaultScopes = [
-  'openid', // OIDC 必须
-  'profile', // 请求用户信息（姓名、头像等）
-  'email', // 请求用户邮箱
-  'offline_access', // 请求 Refresh Token
-  'sync:read', // 自定义 Scope：读取同步数据权限
-  'sync:write', // 自定义 Scope：写入同步数据权限
+  'openid',
+  'profile',
+  'email',
+  'offline_access', // 允许获取 refresh_token
 ];
 
 /**
- * OIDC Claims 定义 (与 Scopes 关联)
+ * OIDC Claims 定义
  */
 export const defaultClaims = {
   email: ['email', 'email_verified'],