Merge pull request #8 from LeslieLeung/claude/persist-electron-login-01JR43KbqHC57U8B8ZQC4Nr2

Author: LeslieLeung

frontend/apps/web/electron/main.ts

@@ -10,6 +10,8 @@ const __dirname = path.dirname(__filename)
 // Configuration store
 interface StoreType {
   apiUrl: string
+  accessToken?: string
+  refreshToken?: string
 }
 
 /**
@@ -387,3 +389,40 @@ ipcMain.on('open-config-window', () => {
   console.log('[Main] Received request to open config window')
   createConfigWindow()
 })
+
+// IPC handler: get access token
+ipcMain.handle('get-access-token', () => {
+  return store.get('accessToken') || null
+})
+
+// IPC handler: get refresh token
+ipcMain.handle('get-refresh-token', () => {
+  return store.get('refreshToken') || null
+})
+
+// IPC handler: set access token
+ipcMain.handle('set-access-token', (_event, token: string | null) => {
+  if (token === null) {
+    store.delete('accessToken')
+  } else {
+    store.set('accessToken', token)
+  }
+  return true
+})
+
+// IPC handler: set refresh token
+ipcMain.handle('set-refresh-token', (_event, token: string | null) => {
+  if (token === null) {
+    store.delete('refreshToken')
+  } else {
+    store.set('refreshToken', token)
+  }
+  return true
+})
+
+// IPC handler: clear all tokens
+ipcMain.handle('clear-tokens', () => {
+  store.delete('accessToken')
+  store.delete('refreshToken')
+  return true
+})

frontend/apps/web/electron/preload.ts

@@ -11,6 +11,13 @@ contextBridge.exposeInMainWorld('electronAPI', {
   // 获取平台信息
   getPlatform: () => ipcRenderer.invoke('get-platform'),
 
+  // Token management
+  getAccessToken: () => ipcRenderer.invoke('get-access-token'),
+  getRefreshToken: () => ipcRenderer.invoke('get-refresh-token'),
+  setAccessToken: (token: string | null) => ipcRenderer.invoke('set-access-token', token),
+  setRefreshToken: (token: string | null) => ipcRenderer.invoke('set-refresh-token', token),
+  clearTokens: () => ipcRenderer.invoke('clear-tokens'),
+
   // 检查是否在 Electron 环境中
   isElectron: true
 })
@@ -25,6 +32,11 @@ export interface ElectronAPI {
     version: string
     name: string
   }>
+  getAccessToken: () => Promise<string | null>
+  getRefreshToken: () => Promise<string | null>
+  setAccessToken: (token: string | null) => Promise<boolean>
+  setRefreshToken: (token: string | null) => Promise<boolean>
+  clearTokens: () => Promise<boolean>
   isElectron: boolean
 }
 

frontend/apps/web/src/App.tsx

@@ -2,9 +2,10 @@ import { Routes, Route, Navigate } from 'react-router-dom'
 import { ProtectedRoute } from './components/ProtectedRoute'
 import { Layout } from './components/Layout'
 import { Rss } from 'lucide-react'
+import { useAuthStore } from './stores/authStore'
 
 // Lazy load pages
-import { lazy, Suspense } from 'react'
+import { lazy, Suspense, useEffect, useState } from 'react'
 
 const LoginPage = lazy(() => import('./pages/LoginPage'))
 const RegisterPage = lazy(() => import('./pages/RegisterPage'))
@@ -39,6 +40,21 @@ function LoadingSpinner() {
  * Defines the main routing structure for the web application.
  */
 function App() {
+  const { loadUser } = useAuthStore()
+  const [isInitialized, setIsInitialized] = useState(false)
+
+  useEffect(() => {
+    // Initialize authentication state on app startup
+    loadUser().finally(() => {
+      setIsInitialized(true)
+    })
+  }, [loadUser])
+
+  // Show loading spinner while initializing authentication
+  if (!isInitialized) {
+    return <LoadingSpinner />
+  }
+
   return (
     <Suspense fallback={<LoadingSpinner />}>
       <Routes>

frontend/apps/web/src/electron.d.ts

@@ -10,6 +10,11 @@ declare global {
         version: string
         name: string
       }>
+      getAccessToken: () => Promise<string | null>
+      getRefreshToken: () => Promise<string | null>
+      setAccessToken: (token: string | null) => Promise<boolean>
+      setRefreshToken: (token: string | null) => Promise<boolean>
+      clearTokens: () => Promise<boolean>
       isElectron: boolean
     }
   }

frontend/apps/web/src/stores/authStore.ts

@@ -26,7 +26,7 @@ interface AuthState {
  */
 export const useAuthStore = create<AuthState>((set) => ({
   user: null,
-  isAuthenticated: authService.isAuthenticated(),
+  isAuthenticated: false,
   isLoading: false,
   error: null,
 
@@ -84,7 +84,8 @@ export const useAuthStore = create<AuthState>((set) => ({
   },
 
   loadUser: async () => {
-    if (!authService.isAuthenticated()) {
+    const isAuthenticated = await authService.isAuthenticated()
+    if (!isAuthenticated) {
       set({ isAuthenticated: false, user: null })
       return
     }
@@ -98,7 +99,7 @@ export const useAuthStore = create<AuthState>((set) => ({
         isLoading: false,
       })
     } catch (error) {
-      authService.clearTokens()
+      await authService.clearTokens()
       set({
         user: null,
         isAuthenticated: false,

frontend/packages/api-client/src/client.ts

@@ -1,4 +1,5 @@
 import axios, { type AxiosInstance, type AxiosRequestConfig, type InternalAxiosRequestConfig } from 'axios'
+import { tokenStorage } from './tokenStorage'
 
 /**
  * API client for communicating with the Glean backend.
@@ -59,7 +60,7 @@ export class ApiClient {
         }
       }
 
-      const token = localStorage.getItem('access_token')
+      const token = await tokenStorage.getAccessToken()
       if (token) {
         config.headers.Authorization = `Bearer ${token}`
       }
@@ -79,14 +80,14 @@ export class ApiClient {
 
         // Don't try to refresh if this is already a refresh request or auth request
         if (originalRequest.url?.includes('/auth/refresh') || originalRequest.url?.includes('/auth/login')) {
-          this.clearTokensAndRedirect()
+          await this.clearTokensAndRedirect()
           return Promise.reject(error)
         }
 
         // Check if we have a refresh token
-        const refreshToken = localStorage.getItem('refresh_token')
+        const refreshToken = await tokenStorage.getRefreshToken()
         if (!refreshToken) {
-          this.clearTokensAndRedirect()
+          await this.clearTokensAndRedirect()
           return Promise.reject(error)
         }
 
@@ -115,8 +116,8 @@ export class ApiClient {
           const { access_token, refresh_token: newRefreshToken } = response.data
 
           // Save new tokens
-          localStorage.setItem('access_token', access_token)
-          localStorage.setItem('refresh_token', newRefreshToken)
+          await tokenStorage.setAccessToken(access_token)
+          await tokenStorage.setRefreshToken(newRefreshToken)
 
           // Update authorization header
           originalRequest.headers.Authorization = `Bearer ${access_token}`
@@ -129,7 +130,7 @@ export class ApiClient {
         } catch (refreshError) {
           // Refresh failed, clear tokens and redirect to login
           this.processQueue(refreshError, null)
-          this.clearTokensAndRedirect()
+          await this.clearTokensAndRedirect()
           return Promise.reject(refreshError)
         } finally {
           this.isRefreshing = false
@@ -218,9 +219,8 @@ export class ApiClient {
   /**
    * Clear tokens and redirect to login page.
    */
-  private clearTokensAndRedirect(): void {
-    localStorage.removeItem('access_token')
-    localStorage.removeItem('refresh_token')
+  private async clearTokensAndRedirect(): Promise<void> {
+    await tokenStorage.clearTokens()
     // Only redirect if not already on login page
     if (!window.location.pathname.includes('/login')) {
       window.location.href = '/login'

frontend/packages/api-client/src/index.ts

@@ -10,6 +10,7 @@ export { EntryService } from './services/entries'
 export { FolderService } from './services/folders'
 export { TagService } from './services/tags'
 export { BookmarkService, type BookmarkListParams } from './services/bookmarks'
+export { tokenStorage } from './tokenStorage'
 
 // Create service instances
 import { apiClient } from './client'

frontend/packages/api-client/src/services/auth.ts

@@ -8,6 +8,7 @@ import type {
   UserUpdateRequest,
 } from '@glean/types'
 import { ApiClient } from '../client'
+import { tokenStorage } from '../tokenStorage'
 
 /**
  * Authentication API service.
@@ -43,8 +44,7 @@ export class AuthService {
    */
   async logout(): Promise<void> {
     await this.client.post<{ message: string }>('/auth/logout')
-    localStorage.removeItem('access_token')
-    localStorage.removeItem('refresh_token')
+    await tokenStorage.clearTokens()
   }
 
   /**
@@ -62,25 +62,24 @@ export class AuthService {
   }
 
   /**
-   * Save authentication tokens to local storage.
+   * Save authentication tokens to storage.
    */
-  saveTokens(tokens: TokenResponse): void {
-    localStorage.setItem('access_token', tokens.access_token)
-    localStorage.setItem('refresh_token', tokens.refresh_token)
+  async saveTokens(tokens: TokenResponse): Promise<void> {
+    await tokenStorage.setAccessToken(tokens.access_token)
+    await tokenStorage.setRefreshToken(tokens.refresh_token)
   }
 
   /**
-   * Clear authentication tokens from local storage.
+   * Clear authentication tokens from storage.
    */
-  clearTokens(): void {
-    localStorage.removeItem('access_token')
-    localStorage.removeItem('refresh_token')
+  async clearTokens(): Promise<void> {
+    await tokenStorage.clearTokens()
   }
 
   /**
    * Check if user is authenticated.
    */
-  isAuthenticated(): boolean {
-    return !!localStorage.getItem('access_token')
+  async isAuthenticated(): Promise<boolean> {
+    return await tokenStorage.isAuthenticated()
   }
 }

frontend/packages/api-client/src/tokenStorage.ts

@@ -0,0 +1,85 @@
+/**
+ * Token storage abstraction for cross-platform token persistence.
+ *
+ * Automatically uses Electron's secure storage in desktop app,
+ * and localStorage in web browser.
+ */
+class TokenStorage {
+  private isElectron: boolean
+
+  constructor() {
+    this.isElectron = typeof window !== 'undefined' && !!window.electronAPI
+  }
+
+  /**
+   * Get access token from storage.
+   */
+  async getAccessToken(): Promise<string | null> {
+    if (this.isElectron && window.electronAPI) {
+      return await window.electronAPI.getAccessToken()
+    }
+    return localStorage.getItem('access_token')
+  }
+
+  /**
+   * Get refresh token from storage.
+   */
+  async getRefreshToken(): Promise<string | null> {
+    if (this.isElectron && window.electronAPI) {
+      return await window.electronAPI.getRefreshToken()
+    }
+    return localStorage.getItem('refresh_token')
+  }
+
+  /**
+   * Save access token to storage.
+   */
+  async setAccessToken(token: string | null): Promise<void> {
+    if (this.isElectron && window.electronAPI) {
+      await window.electronAPI.setAccessToken(token)
+      return
+    }
+    if (token === null) {
+      localStorage.removeItem('access_token')
+    } else {
+      localStorage.setItem('access_token', token)
+    }
+  }
+
+  /**
+   * Save refresh token to storage.
+   */
+  async setRefreshToken(token: string | null): Promise<void> {
+    if (this.isElectron && window.electronAPI) {
+      await window.electronAPI.setRefreshToken(token)
+      return
+    }
+    if (token === null) {
+      localStorage.removeItem('refresh_token')
+    } else {
+      localStorage.setItem('refresh_token', token)
+    }
+  }
+
+  /**
+   * Clear all tokens from storage.
+   */
+  async clearTokens(): Promise<void> {
+    if (this.isElectron && window.electronAPI) {
+      await window.electronAPI.clearTokens()
+      return
+    }
+    localStorage.removeItem('access_token')
+    localStorage.removeItem('refresh_token')
+  }
+
+  /**
+   * Check if user is authenticated (has access token).
+   */
+  async isAuthenticated(): Promise<boolean> {
+    const token = await this.getAccessToken()
+    return !!token
+  }
+}
+
+export const tokenStorage = new TokenStorage()