Fix (multiuser): Ask user to log back in when security token has expired (#9017)

* Initial plan

* Warn user when credentials have expired in multiuser mode

Agent-Logs-Url: https://github.com/lstein/InvokeAI/sessions/f0947cda-b15c-475d-b7f4-2d553bdf2cd6

Co-authored-by: lstein <111189+lstein@users.noreply.github.com>

* Address code review: avoid multiple localStorage reads in base query

Agent-Logs-Url: https://github.com/lstein/InvokeAI/sessions/f0947cda-b15c-475d-b7f4-2d553bdf2cd6

Co-authored-by: lstein <111189+lstein@users.noreply.github.com>

* bugfix(multiuser): ask user to log back in when authentication token expires

* feat: sliding window session expiry with token refresh

Backend:
- SlidingWindowTokenMiddleware refreshes JWT on each mutating request
  (POST/PUT/PATCH/DELETE), returning a new token in X-Refreshed-Token
  response header. GET requests don't refresh (they're often background
  fetches that shouldn't reset the inactivity timer).
- CORS expose_headers updated to allow X-Refreshed-Token.

Frontend:
- dynamicBaseQuery picks up X-Refreshed-Token from responses and
  updates localStorage so subsequent requests use the fresh expiry.
- 401 handler only triggers sessionExpiredLogout when a token was
  actually sent (not for unauthenticated background requests).
- ProtectedRoute polls localStorage every 5s and listens for storage
  events to detect token removal (e.g. manual deletion, other tabs).

Result: session expires after TOKEN_EXPIRATION_NORMAL (1 day) of
inactivity, not a fixed time after login. Any user-initiated action
resets the clock.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

* chore(backend): ruff

* fix: address review feedback on auth token handling

Bug fixes:
- ProtectedRoute: only treat 401 errors as session expiry, not
  transient 500/network errors that should not force logout
- Token refresh: use explicit remember_me claim in JWT instead of
  inferring from remaining lifetime, preventing silent downgrade of
  7-day tokens to 1-day when <24h remains
- TokenData: add remember_me field, set during login

Tests (6 new):
- Mutating requests (POST/PUT/DELETE) return X-Refreshed-Token
- GET requests do not return X-Refreshed-Token
- Unauthenticated requests do not return X-Refreshed-Token
- Remember-me token refreshes to 7-day duration even near expiry
- Normal token refreshes to 1-day duration
- remember_me claim preserved through refresh cycle

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

* chore(backend): ruff

---------

Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com>
Co-authored-by: lstein <111189+lstein@users.noreply.github.com>
Co-authored-by: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Co-authored-by: Jonathan <34005131+JPPhoto@users.noreply.github.com>

Author: 4 people

invokeai/app/api/routers/auth.py

@@ -150,6 +150,7 @@ async def login(
         user_id=user.user_id,
         email=user.email,
         is_admin=user.is_admin,
+        remember_me=request.remember_me,
     )
     token = create_access_token(token_data, expires_delta)
 

invokeai/app/api_app.py

@@ -79,6 +79,50 @@ async def lifespan(app: FastAPI):
 )
 
 
+class SlidingWindowTokenMiddleware(BaseHTTPMiddleware):
+    """Refresh the JWT token on each authenticated response.
+
+    When a request includes a valid Bearer token, the response includes a
+    X-Refreshed-Token header with a new token that has a fresh expiry.
+    This implements sliding-window session expiry: the session only expires
+    after a period of *inactivity*, not a fixed time after login.
+    """
+
+    async def dispatch(self, request: Request, call_next: RequestResponseEndpoint):
+        response = await call_next(request)
+
+        # Only refresh on mutating requests (POST/PUT/PATCH/DELETE) — these indicate
+        # genuine user activity. GET requests are often background fetches (RTK Query
+        # cache revalidation, refetch-on-focus, etc.) and should not reset the
+        # inactivity timer.
+        if response.status_code < 400 and request.method in ("POST", "PUT", "PATCH", "DELETE"):
+            auth_header = request.headers.get("authorization", "")
+            if auth_header.startswith("Bearer "):
+                token = auth_header[7:]
+                try:
+                    from datetime import timedelta
+
+                    from invokeai.app.api.routers.auth import TOKEN_EXPIRATION_NORMAL, TOKEN_EXPIRATION_REMEMBER_ME
+                    from invokeai.app.services.auth.token_service import create_access_token, verify_token
+
+                    token_data = verify_token(token)
+                    if token_data is not None:
+                        # Use the remember_me claim from the token to determine the
+                        # correct refresh duration. This avoids the bug where a 7-day
+                        # token with <24h remaining would be silently downgraded to 1 day.
+                        if token_data.remember_me:
+                            expires_delta = timedelta(days=TOKEN_EXPIRATION_REMEMBER_ME)
+                        else:
+                            expires_delta = timedelta(days=TOKEN_EXPIRATION_NORMAL)
+
+                        new_token = create_access_token(token_data, expires_delta)
+                        response.headers["X-Refreshed-Token"] = new_token
+                except Exception:
+                    pass  # Don't fail the request if token refresh fails
+
+        return response
+
+
 class RedirectRootWithQueryStringMiddleware(BaseHTTPMiddleware):
     """When a request is made to the root path with a query string, redirect to the root path without the query string.
 
@@ -99,6 +143,7 @@ async def dispatch(self, request: Request, call_next: RequestResponseEndpoint):
 
 # Add the middleware
 app.add_middleware(RedirectRootWithQueryStringMiddleware)
+app.add_middleware(SlidingWindowTokenMiddleware)
 
 
 # Add event handler
@@ -117,6 +162,7 @@ async def dispatch(self, request: Request, call_next: RequestResponseEndpoint):
     allow_credentials=app_config.allow_credentials,
     allow_methods=app_config.allow_methods,
     allow_headers=app_config.allow_headers,
+    expose_headers=["X-Refreshed-Token"],
 )
 
 app.add_middleware(GZipMiddleware, minimum_size=1000)

invokeai/app/services/auth/token_service.py

@@ -21,6 +21,7 @@ class TokenData(BaseModel):
     user_id: str
     email: str
     is_admin: bool
+    remember_me: bool = False
 
 
 def set_jwt_secret(secret: str) -> None:

invokeai/frontend/web/public/locales/en.json

@@ -25,7 +25,8 @@
             "rememberMe": "Remember me for 7 days",
             "signIn": "Sign In",
             "signingIn": "Signing in...",
-            "loginFailed": "Login failed. Please check your credentials."
+            "loginFailed": "Login failed. Please check your credentials.",
+            "sessionExpired": "Your credentials have expired. Please log in again to resume."
         },
         "setup": {
             "title": "Welcome to InvokeAI",

invokeai/frontend/web/src/features/auth/components/LoginPage.tsx

@@ -13,8 +13,8 @@ import {
   Text,
   VStack,
 } from '@invoke-ai/ui-library';
-import { useAppDispatch } from 'app/store/storeHooks';
-import { setCredentials } from 'features/auth/store/authSlice';
+import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
+import { selectSessionExpired, setCredentials } from 'features/auth/store/authSlice';
 import type { ChangeEvent, FormEvent } from 'react';
 import { memo, useCallback, useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -29,6 +29,7 @@ export const LoginPage = memo(() => {
   const [rememberMe, setRememberMe] = useState(true);
   const [login, { isLoading, error }] = useLoginMutation();
   const dispatch = useAppDispatch();
+  const sessionExpired = useAppSelector(selectSessionExpired);
   const { data: setupStatus, isLoading: isLoadingSetup } = useGetSetupStatusQuery();
 
   // Redirect to app if multiuser mode is disabled
@@ -114,6 +115,12 @@ export const LoginPage = memo(() => {
               {t('auth.login.title')}
             </Heading>
 
+            {sessionExpired && (
+              <Flex p={3} borderRadius="md" bg="warning.600" color="white" fontSize="sm" justifyContent="center">
+                <Text fontWeight="semibold">{t('auth.login.sessionExpired')}</Text>
+              </Flex>
+            )}
+
             <FormControl isRequired isInvalid={!!errorMessage}>
               <FormLabel>{t('auth.login.email')}</FormLabel>
               <Input

invokeai/frontend/web/src/features/auth/components/ProtectedRoute.tsx

@@ -1,7 +1,7 @@
 import { Center, Spinner } from '@invoke-ai/ui-library';
 import type { RootState } from 'app/store/store';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
-import { logout, setCredentials } from 'features/auth/store/authSlice';
+import { logout, sessionExpiredLogout, setCredentials } from 'features/auth/store/authSlice';
 import type { PropsWithChildren } from 'react';
 import { memo, useEffect } from 'react';
 import { useNavigate } from 'react-router-dom';
@@ -33,13 +33,42 @@ export const ProtectedRoute = memo(({ children, requireAdmin = false }: PropsWit
   });
 
   useEffect(() => {
-    // If we have a token but fetching user failed, token is invalid - logout
-    if (userError && isAuthenticated) {
-      dispatch(logout());
+    // Only treat 401 as session expiry. Other errors (500, network, etc.) are
+    // transient and should not force logout — the 401 handler in dynamicBaseQuery
+    // already covers the actual expiry case.
+    if (userError && isAuthenticated && 'status' in userError && userError.status === 401) {
+      dispatch(sessionExpiredLogout());
       navigate('/login', { replace: true });
     }
   }, [userError, isAuthenticated, dispatch, navigate]);
 
+  // Detect when auth_token is removed from localStorage (e.g. by another tab,
+  // browser devtools, or token expiry cleanup). The 'storage' event fires when
+  // localStorage is modified by another context; we also poll periodically to
+  // catch same-tab deletions (which don't trigger the storage event).
+  useEffect(() => {
+    if (!multiuserEnabled || !isAuthenticated) {
+      return;
+    }
+
+    const checkToken = () => {
+      if (!localStorage.getItem('auth_token') && isAuthenticated) {
+        dispatch(sessionExpiredLogout());
+        navigate('/login', { replace: true });
+      }
+    };
+
+    // Listen for cross-tab localStorage changes
+    window.addEventListener('storage', checkToken);
+    // Poll for same-tab deletions (e.g. browser console)
+    const interval = setInterval(checkToken, 5000);
+
+    return () => {
+      window.removeEventListener('storage', checkToken);
+      clearInterval(interval);
+    };
+  }, [multiuserEnabled, isAuthenticated, dispatch, navigate]);
+
   useEffect(() => {
     // If we successfully fetched user data, update auth state
     if (currentUser && token && !user) {

invokeai/frontend/web/src/features/auth/store/authSlice.ts

@@ -16,6 +16,7 @@ const zAuthState = z.object({
   token: z.string().nullable(),
   user: zUser.nullable(),
   isLoading: z.boolean(),
+  sessionExpired: z.boolean(),
 });
 
 type User = z.infer<typeof zUser>;
@@ -34,6 +35,7 @@ const initialState: AuthState = {
   token: getStoredAuthToken(),
   user: null,
   isLoading: false,
+  sessionExpired: false,
 };
 
 const getInitialAuthState = (): AuthState => initialState;
@@ -46,6 +48,7 @@ const authSlice = createSlice({
       state.token = action.payload.token;
       state.user = action.payload.user;
       state.isAuthenticated = true;
+      state.sessionExpired = false;
       if (typeof window !== 'undefined' && window.localStorage) {
         localStorage.setItem('auth_token', action.payload.token);
       }
@@ -54,6 +57,16 @@ const authSlice = createSlice({
       state.token = null;
       state.user = null;
       state.isAuthenticated = false;
+      state.sessionExpired = false;
+      if (typeof window !== 'undefined' && window.localStorage) {
+        localStorage.removeItem('auth_token');
+      }
+    },
+    sessionExpiredLogout: (state) => {
+      state.token = null;
+      state.user = null;
+      state.isAuthenticated = false;
+      state.sessionExpired = true;
       if (typeof window !== 'undefined' && window.localStorage) {
         localStorage.removeItem('auth_token');
       }
@@ -64,7 +77,7 @@ const authSlice = createSlice({
   },
 });
 
-export const { setCredentials, logout, setLoading } = authSlice.actions;
+export const { setCredentials, logout, sessionExpiredLogout, setLoading } = authSlice.actions;
 
 export const authSliceConfig: SliceConfig<typeof authSlice> = {
   slice: authSlice,
@@ -73,11 +86,12 @@ export const authSliceConfig: SliceConfig<typeof authSlice> = {
   persistConfig: {
     migrate: () => getInitialAuthState(),
     // Don't persist auth state - token is stored in localStorage
-    persistDenylist: ['isAuthenticated', 'token', 'user', 'isLoading'],
+    persistDenylist: ['isAuthenticated', 'token', 'user', 'isLoading', 'sessionExpired'],
   },
 };
 
 export const selectIsAuthenticated = (state: { auth: AuthState }) => state.auth.isAuthenticated;
 export const selectCurrentUser = (state: { auth: AuthState }) => state.auth.user;
 export const selectAuthToken = (state: { auth: AuthState }) => state.auth.token;
 export const selectIsAuthLoading = (state: { auth: AuthState }) => state.auth.isLoading;
+export const selectSessionExpired = (state: { auth: AuthState }) => state.auth.sessionExpired;

invokeai/frontend/web/src/services/api/index.ts

@@ -7,6 +7,7 @@ import type {
   TagDescription,
 } from '@reduxjs/toolkit/query/react';
 import { buildCreateApi, coreModule, fetchBaseQuery, reactHooksModule } from '@reduxjs/toolkit/query/react';
+import { sessionExpiredLogout } from 'features/auth/store/authSlice';
 import queryString from 'query-string';
 import stableHash from 'stable-hash';
 
@@ -68,22 +69,27 @@ export const getBaseUrl = (): string => {
   return window.location.origin;
 };
 
-const dynamicBaseQuery: BaseQueryFn<string | FetchArgs, unknown, FetchBaseQueryError> = (args, api, extraOptions) => {
+const dynamicBaseQuery: BaseQueryFn<string | FetchArgs, unknown, FetchBaseQueryError> = async (
+  args,
+  api,
+  extraOptions
+) => {
   const isOpenAPIRequest =
     (args instanceof Object && args.url.includes('openapi.json')) ||
     (typeof args === 'string' && args.includes('openapi.json'));
 
+  const isAuthEndpoint =
+    (args instanceof Object &&
+      typeof args.url === 'string' &&
+      (args.url.includes('/auth/login') || args.url.includes('/auth/setup'))) ||
+    (typeof args === 'string' && (args.includes('/auth/login') || args.includes('/auth/setup')));
+
+  const token = localStorage.getItem('auth_token');
+
   const fetchBaseQueryArgs: FetchBaseQueryArgs = {
     baseUrl: getBaseUrl(),
     prepareHeaders: (headers) => {
       // Add auth token to all requests except setup and login
-      const token = localStorage.getItem('auth_token');
-      const isAuthEndpoint =
-        (args instanceof Object &&
-          typeof args.url === 'string' &&
-          (args.url.includes('/auth/login') || args.url.includes('/auth/setup'))) ||
-        (typeof args === 'string' && (args.includes('/auth/login') || args.includes('/auth/setup')));
-
       if (token && !isAuthEndpoint) {
         headers.set('Authorization', `Bearer ${token}`);
       }
@@ -98,7 +104,25 @@ const dynamicBaseQuery: BaseQueryFn<string | FetchArgs, unknown, FetchBaseQueryE
 
   const rawBaseQuery = fetchBaseQuery(fetchBaseQueryArgs);
 
-  return rawBaseQuery(args, api, extraOptions);
+  const result = await rawBaseQuery(args, api, extraOptions);
+
+  // If we sent an auth token but got 401, the token is invalid/expired.
+  // Only trigger session expiry when we actually sent a token — unauthenticated
+  // requests (e.g. client_state queries during page load) should not cause logout.
+  if (result.error && result.error.status === 401 && !isAuthEndpoint && token) {
+    api.dispatch(sessionExpiredLogout());
+  }
+
+  // Sliding window token refresh: if the server returned a refreshed token,
+  // update localStorage so subsequent requests use the new expiry.
+  if (!result.error && result.meta?.response) {
+    const refreshedToken = result.meta.response.headers.get('X-Refreshed-Token');
+    if (refreshedToken) {
+      localStorage.setItem('auth_token', refreshedToken);
+    }
+  }
+
+  return result;
 };
 
 const createLruSelector = createSelectorCreator({