@lobehub/lobehub 2.0.0-next.304 → 2.0.0-next.305

package/src/features/DesktopNavigationBridge/index.tsx

@@ -4,8 +4,6 @@ import { useWatchBroadcast } from '@lobechat/electron-client-ipc';
 import { memo, useCallback } from 'react';
 import { useNavigate } from 'react-router-dom';
 
-import { clearDesktopOnboardingCompleted } from '@/app/[variants]/(desktop)/desktop-onboarding/storage';
-
 const DesktopNavigationBridge = memo(() => {
   const navigate = useNavigate();
 
@@ -19,13 +17,6 @@ const DesktopNavigationBridge = memo(() => {
 
   useWatchBroadcast('navigate', handleNavigate);
 
-  const handleAuthorizationRequired = useCallback(() => {
-    clearDesktopOnboardingCompleted();
-    navigate('/desktop-onboarding#5', { replace: true });
-  }, [navigate]);
-
-  useWatchBroadcast('authorizationRequired', handleAuthorizationRequired);
-
   return null;
 });
 

package/src/features/Electron/AuthRequiredModal/index.tsx

@@ -0,0 +1,151 @@
+'use client';
+
+import { useWatchBroadcast } from '@lobechat/electron-client-ipc';
+import { Button, Flexbox, Icon, type ModalInstance, createModal } from '@lobehub/ui';
+import { AlertCircle, LogIn } from 'lucide-react';
+import { type ReactNode, memo, useCallback, useRef, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { useElectronStore } from '@/store/electron';
+
+interface ModalUpdateOptions {
+  closable?: boolean;
+  keyboard?: boolean;
+  maskClosable?: boolean;
+  title?: ReactNode;
+}
+
+interface AuthRequiredModalContentProps {
+  onClose: () => void;
+  setModalProps: (props: ModalUpdateOptions) => void;
+}
+
+const AuthRequiredModalContent = memo<AuthRequiredModalContentProps>(
+  ({ onClose, setModalProps }) => {
+    const { t } = useTranslation('auth');
+    const [isSigningIn, setIsSigningIn] = useState(false);
+    const isClosingRef = useRef(false);
+
+    const [dataSyncConfig, connectRemoteServer, refreshServerConfig, clearRemoteServerSyncError] =
+      useElectronStore((s) => [
+        s.dataSyncConfig,
+        s.connectRemoteServer,
+        s.refreshServerConfig,
+        s.clearRemoteServerSyncError,
+      ]);
+
+    // Update modal props based on signing in state
+    setModalProps({
+      closable: !isSigningIn,
+      keyboard: !isSigningIn,
+      maskClosable: !isSigningIn,
+      title: (
+        <Flexbox align="center" gap={8} horizontal>
+          <Icon icon={AlertCircle} />
+          {t('authModal.title')}
+        </Flexbox>
+      ),
+    });
+
+    // Listen for successful authorization to close the modal
+    useWatchBroadcast('authorizationSuccessful', async () => {
+      if (isClosingRef.current) return;
+      isClosingRef.current = true;
+      setIsSigningIn(false);
+      onClose();
+      await refreshServerConfig();
+    });
+
+    // Listen for authorization failure
+    useWatchBroadcast('authorizationFailed', () => {
+      setIsSigningIn(false);
+    });
+
+    const handleSignIn = useCallback(async () => {
+      setIsSigningIn(true);
+      clearRemoteServerSyncError();
+
+      await connectRemoteServer({
+        remoteServerUrl: dataSyncConfig?.remoteServerUrl,
+        storageMode: dataSyncConfig?.storageMode || 'cloud',
+      });
+    }, [clearRemoteServerSyncError, connectRemoteServer, dataSyncConfig]);
+
+    const handleLater = useCallback(() => {
+      if (isClosingRef.current) return;
+      isClosingRef.current = true;
+      onClose();
+    }, [onClose]);
+
+    return (
+      <Flexbox gap={16} style={{ padding: 16 }}>
+        <p style={{ margin: 0 }}>{t('authModal.description')}</p>
+        <Flexbox gap={8} horizontal justify="flex-end">
+          <Button disabled={isSigningIn} onClick={handleLater}>
+            {t('authModal.later')}
+          </Button>
+          <Button
+            icon={<Icon icon={LogIn} />}
+            loading={isSigningIn}
+            onClick={handleSignIn}
+            type="primary"
+          >
+            {isSigningIn ? t('authModal.signingIn') : t('authModal.signIn')}
+          </Button>
+        </Flexbox>
+      </Flexbox>
+    );
+  },
+);
+
+AuthRequiredModalContent.displayName = 'AuthRequiredModalContent';
+
+/**
+ * Hook to create and manage the auth required modal
+ */
+export const useAuthRequiredModal = () => {
+  const instanceRef = useRef<ModalInstance | null>(null);
+
+  const open = useCallback(() => {
+    // Don't open multiple modals
+    if (instanceRef.current) return;
+
+    const setModalProps = (nextProps: ModalUpdateOptions) => {
+      instanceRef.current?.update?.(nextProps);
+    };
+
+    const handleClose = () => {
+      instanceRef.current?.close();
+      instanceRef.current = null;
+    };
+
+    instanceRef.current = createModal({
+      children: <AuthRequiredModalContent onClose={handleClose} setModalProps={setModalProps} />,
+      closable: false,
+      footer: null,
+      keyboard: false,
+      maskClosable: false,
+      title: '',
+    });
+  }, []);
+
+  return { open };
+};
+
+/**
+ * Component that listens for authorizationRequired IPC events and opens the modal
+ */
+const AuthRequiredModal = memo(() => {
+  const { open } = useAuthRequiredModal();
+
+  // Listen for IPC event to open the modal
+  useWatchBroadcast('authorizationRequired', () => {
+    open();
+  });
+
+  return null;
+});
+
+AuthRequiredModal.displayName = 'AuthRequiredModal';
+
+export default AuthRequiredModal;

package/src/locales/default/auth.ts

@@ -28,6 +28,12 @@ export default {
   'apikey.list.columns.status': 'Enabled Status',
   'apikey.list.title': 'API Key List',
   'apikey.validation.required': 'This field cannot be empty',
+  'authModal.description':
+    'Your login session has expired. Please sign in again to continue using cloud sync features.',
+  'authModal.later': 'Later',
+  'authModal.signIn': 'Sign In Again',
+  'authModal.signingIn': 'Signing in...',
+  'authModal.title': 'Session Expired',
   'betterAuth.errors.confirmPasswordRequired': 'Please confirm your password',
   'betterAuth.errors.emailExists': 'This email is already registered. Please sign in instead',
   'betterAuth.errors.emailInvalid': 'Please enter a valid email address or username',

package/src/utils/errorResponse.ts

@@ -1,6 +1,16 @@
 import { AgentRuntimeErrorType, type ILobeAgentRuntimeErrorType } from '@lobechat/model-runtime';
 import { ChatErrorType, type ErrorResponse, type ErrorType } from '@lobechat/types';
 
+/**
+ * Error types that indicate a real authentication failure.
+ * When these errors occur, the response will include X-Auth-Required header
+ * to signal the client that re-authentication is needed.
+ */
+const AUTH_REQUIRED_ERROR_TYPES = new Set<ErrorType>([
+  ChatErrorType.Unauthorized,
+  ChatErrorType.InvalidClerkUser,
+]);
+
 const getStatus = (errorType: ILobeAgentRuntimeErrorType | ErrorType) => {
   // InvalidAccessCode / InvalidAzureAPIKey / InvalidOpenAIAPIKey / InvalidZhipuAPIKey ....
   if (errorType.toString().includes('Invalid')) return 401;
@@ -71,5 +81,15 @@ export const createErrorResponse = (
     );
   }
 
-  return new Response(JSON.stringify(data), { status: statusCode });
+  const headers: Record<string, string> = {
+    'Content-Type': 'application/json',
+  };
+
+  // Add X-Auth-Required header for real authentication failures
+  // This allows the client to distinguish between auth failures and other 401 errors (e.g., invalid API keys)
+  if (AUTH_REQUIRED_ERROR_TYPES.has(errorType as ErrorType)) {
+    headers['X-Auth-Required'] = 'true';
+  }
+
+  return new Response(JSON.stringify(data), { headers, status: statusCode });
 };