🛠 [fix][frontend] lint errors

Author: tomy0000000

frontend/src/lib/auth.tsx

@@ -1,6 +1,7 @@
 import {
   type ReactNode,
   useCallback,
+  useEffect,
   useMemo,
   useRef,
   useState
@@ -44,16 +45,6 @@ function clientFromCredential({ host, accessToken }: StoredCredential): Client {
   return createClient({ baseURL: host, auth: () => accessToken })
 }
 
-function addUnauthorizedInterceptor(client: Client, onUnauthorized: () => void) {
-  client.instance.interceptors.response.use(undefined, (error) => {
-    if (error?.response?.status === 401) {
-      sessionStorage.setItem('logout_reason', 'session_expired')
-      onUnauthorized()
-    }
-    return Promise.reject(error)
-  })
-}
-
 const EMPTY_STATE: AuthState = {
   host: '',
   username: '',
@@ -62,22 +53,36 @@ const EMPTY_STATE: AuthState = {
 }
 
 export function AuthProvider({ children }: { children: ReactNode }) {
-  const logoutRef = useRef<(() => void) | null>(null)
-
   const [state, setState] = useState<AuthState>(() => {
     const stored = loadCredential()
     if (!stored) return EMPTY_STATE
-    const client = clientFromCredential(stored)
-    addUnauthorizedInterceptor(client, () => logoutRef.current?.())
-    return { ...stored, client }
+    return { ...stored, client: clientFromCredential(stored) }
   })
 
   const logout = useCallback(() => {
     window.localStorage.removeItem(LOCAL_STORAGE_KEY)
     setState(EMPTY_STATE)
   }, [])
 
-  logoutRef.current = logout
+  const logoutRef = useRef(logout)
+  useEffect(() => {
+    logoutRef.current = logout
+  }, [logout])
+
+  useEffect(() => {
+    const client = state.client
+    if (!client) return
+    const id = client.instance.interceptors.response.use(undefined, (error) => {
+      if (error?.response?.status === 401) {
+        sessionStorage.setItem('logout_reason', 'session_expired')
+        logoutRef.current()
+      }
+      return Promise.reject(error)
+    })
+    return () => {
+      client.instance.interceptors.response.eject(id)
+    }
+  }, [state.client])
 
   const login = useCallback(
     async (host: string, username: string, password: string) => {
@@ -93,7 +98,6 @@ export function AuthProvider({ children }: { children: ReactNode }) {
       }
       const accessToken = data.access_token
       client.setConfig({ baseURL: host, auth: () => accessToken })
-      addUnauthorizedInterceptor(client, () => logoutRef.current?.())
 
       window.localStorage.setItem(
         LOCAL_STORAGE_KEY,

frontend/src/routes/login.tsx

@@ -60,14 +60,15 @@ function LoginPage() {
   const [password, setPassword] = useState('')
   const [error, setError] = useState<string | null>(null)
   const [submitting, setSubmitting] = useState(false)
-  const [sessionExpired, setSessionExpired] = useState(false)
+  const [sessionExpired] = useState(
+    () => sessionStorage.getItem('logout_reason') === 'session_expired'
+  )
 
   useEffect(() => {
-    if (sessionStorage.getItem('logout_reason') === 'session_expired') {
+    if (sessionExpired) {
       sessionStorage.removeItem('logout_reason')
-      setSessionExpired(true)
     }
-  }, [])
+  }, [sessionExpired])
 
   const onSubmit = async (e: FormEvent) => {
     e.preventDefault()