@stokr/components-library 3.0.65 → 3.0.66

package/README.md

@@ -127,17 +127,30 @@ Missing overrides may trigger a **one-time** warning listing unresolved `VITE_*`
 ### Optional provider props
 
 - **`inactivityTimeMs`** — Idle timeout before auto-logout + session modal (default 5 min).
+- **`inactivityWarningBeforeMs`** — How long before that timeout to show the **“session about to expire”** warning modal (default 30 s). See [Inactivity auto-logout](#inactivity-auto-logout).
 - **`accessTokenExpiryMs`** — Cookie TTL when **`Auth.setAccessToken`** runs (default **`DEFAULT_TOKEN_EXPIRY_MS`** = 1 h); not extended by **`getUser`** alone.
-- **`hideInactivityModal`** — Suppress built-in session modal.
+- **`hideInactivityModal`** — Suppress both built-in inactivity modals (warning + session expired).
+- **`onSessionExpiredLoginClick`** — Called when the user clicks **Log in** on the session-expired modal.
 - **`customValidateGetUser(user)`** — Hook after **`user/get`** succeeds (see `src/context/AuthContext.js`).
 
+### Inactivity auto-logout {#inactivity-auto-logout}
+
+When a user is logged in, `AuthProvider` resets an idle timer on mouse, keyboard, click, scroll, and touch events.
+
+1. **Warning modal** — Shown **`inactivityWarningBeforeMs`** before the idle deadline (default: 30 s before the 5 min timeout). The user can click **To continue, press here** to reset the idle timer, or close the modal (logout still happens at the deadline). Any activity also resets the timer and closes the warning.
+2. **Session expired modal** — Shown when the idle deadline is reached (existing behaviour). The warning modal closes automatically at the same moment.
+
+Neither modal is shown when the user is not logged in. Both are skipped when **`hideInactivityModal`** is set.
+
+**Storybook:** `Authentication / Auto-logout (inactivity)` → **With warning modal** (20 s idle, warning at 10 s).
+
 ### AuthContext consumer {#authcontext-usecontext}
 
 `import { AuthContext } from '…'` then `useContext(AuthContext)`.
 
 - **Invalid Firebase guard:** value is **`{ user: null, isFetchingUser: false }`** only (no methods).
-- **State (grouped):** `user` / `firebaseUser`, `isFetchingUser`, `avatar`; MFA (`waitingFor2fa`, `userMfaEnrollment`, `firebaseError`); verify-email (`verifyEmailError`, `isVerifyingEmail`); session UX (`loggedOutDueToInactivity`, `loggedOutDueToCookieExpiry`, `sessionExpiryPendingReason`).
-- **Actions (grouped):** `userRef`, `loginUser`, `logoutUser`, `getUser`, `setUser`, `updateUser`, `refreshIdToken`; `checkUserIsValid`, `checkTokenIsValid`; `uploadPhoto`, `deletePhoto`, `checkUserPhoto`; MFA enroll / verify / unenroll + `reset2faFlow`; subscription/onboarding helpers; password & email (`handleResetPassword`, `handleVerifyEmail`, `requestUpdateEmail`, …); wallets / PoA (`uploaProofOfAddress` keeps the source spelling); **`dismissSessionExpiryModal`**.
+- **State (grouped):** `user` / `firebaseUser`, `isFetchingUser`, `avatar`; MFA (`waitingFor2fa`, `userMfaEnrollment`, `firebaseError`); verify-email (`verifyEmailError`, `isVerifyingEmail`); session UX (`loggedOutDueToInactivity`, `loggedOutDueToCookieExpiry`, `sessionExpiryPendingReason`, `showInactivityWarningModal`).
+- **Actions (grouped):** `userRef`, `loginUser`, `logoutUser`, `getUser`, `setUser`, `updateUser`, `refreshIdToken`; `checkUserIsValid`, `checkTokenIsValid`; `uploadPhoto`, `deletePhoto`, `checkUserPhoto`; MFA enroll / verify / unenroll + `reset2faFlow`; subscription/onboarding helpers; password & email (`handleResetPassword`, `handleVerifyEmail`, `requestUpdateEmail`, …); wallets / PoA (`uploaProofOfAddress` keeps the source spelling); **`dismissSessionExpiryModal`**, **`extendSessionFromInactivityWarning`**, **`dismissInactivityWarningModal`**.
 
 Use **`AuthConsumer`** for the render-prop pattern.
 

package/dist/context/AuthContext.js

@@ -20,10 +20,12 @@ import { SuccessModal as SuccessModalComponent } from "../components/Modal/Succe
 const AuthContext = React__default.createContext();
 const FALLBACK_AUTH_CONTEXT_VALUE = { user: null, isFetchingUser: false };
 const INACTIVITY_TIME_MS = 5 * 60 * 1e3;
+const INACTIVITY_WARNING_BEFORE_MS = 30 * 1e3;
 const INACTIVITY_EVENTS = ["mousemove", "keydown", "click", "scroll", "touchstart"];
 class AuthProviderClass extends Component {
   userRef = React__default.createRef(null);
   inactivityTimerRef = null;
+  inactivityWarningTimerRef = null;
   cookieExpiryTimerRef = null;
   // Timestamp of the last inactivity timer reset; used to throttle the reset
   // to at most once per second so frequent DOM events (mousemove fires 30-60×/s)
@@ -47,7 +49,9 @@ class AuthProviderClass extends Component {
     loggedOutDueToInactivity: false,
     loggedOutDueToCookieExpiry: false,
     /** When set, show session modal but keep session until user dismisses (avoids login + session modals at once). */
-    sessionExpiryPendingReason: null
+    sessionExpiryPendingReason: null,
+    /** Shown ~30s before inactivity logout; user can extend the session from the modal. */
+    showInactivityWarningModal: false
   };
   componentDidMount() {
     if (this.props.config) {
@@ -88,6 +92,11 @@ class AuthProviderClass extends Component {
       this.clearInactivityTimer();
       this.clearCookieExpiryTimer();
     }
+    const sessionJustEnded = hadSession && !hasSession;
+    const sessionExpiryJustPending = !prevState.sessionExpiryPendingReason && this.state.sessionExpiryPendingReason;
+    if (this.state.showInactivityWarningModal && (sessionJustEnded || sessionExpiryJustPending)) {
+      this.setState({ showInactivityWarningModal: false });
+    }
   }
   componentWillUnmount() {
     INACTIVITY_EVENTS.forEach((event) => window.removeEventListener(event, this.resetInactivityTimer));
@@ -101,7 +110,14 @@ class AuthProviderClass extends Component {
     }
     return !!accessToken;
   };
+  clearInactivityWarningTimer = () => {
+    if (this.inactivityWarningTimerRef) {
+      clearTimeout(this.inactivityWarningTimerRef);
+      this.inactivityWarningTimerRef = null;
+    }
+  };
   clearInactivityTimer = () => {
+    this.clearInactivityWarningTimer();
     if (this.inactivityTimerRef) {
       clearTimeout(this.inactivityTimerRef);
       this.inactivityTimerRef = null;
@@ -138,6 +154,10 @@ class AuthProviderClass extends Component {
     const { inactivityTimeMs } = this.props;
     return typeof inactivityTimeMs === "number" && inactivityTimeMs > 0 ? inactivityTimeMs : INACTIVITY_TIME_MS;
   };
+  getInactivityWarningBeforeMs = () => {
+    const { inactivityWarningBeforeMs } = this.props;
+    return typeof inactivityWarningBeforeMs === "number" && inactivityWarningBeforeMs > 0 ? inactivityWarningBeforeMs : INACTIVITY_WARNING_BEFORE_MS;
+  };
   /** Cookie lifetime for `STOKR_ACCESS_TOKEN` — not the same as inactivity timeout. */
   getAccessTokenExpiryMs = () => {
     const n = Number(this.props.accessTokenExpiryMs);
@@ -167,20 +187,55 @@ class AuthProviderClass extends Component {
       );
     }
   };
-  resetInactivityTimer = () => {
+  resetInactivityTimer = (force = false) => {
     if (this.state.sessionExpiryPendingReason) return;
+    const { user } = this.state;
+    if (!hasLoggedInSession(user)) {
+      this.clearInactivityTimer();
+      if (this.state.showInactivityWarningModal) {
+        this.setState({ showInactivityWarningModal: false });
+      }
+      return;
+    }
     const now = Date.now();
-    if (now - this._lastActivityAt < 1e3) return;
+    if (!force && now - this._lastActivityAt < 1e3) return;
     this._lastActivityAt = now;
     this.clearInactivityTimer();
-    const { user } = this.state;
-    if (!hasLoggedInSession(user)) return;
+    if (this.state.showInactivityWarningModal) {
+      this.setState({ showInactivityWarningModal: false });
+    }
     const delay = this.getInactivityTimeMs();
-    this.inactivityTimerRef = setTimeout(() => {
-      this.inactivityTimerRef = null;
-      Auth.logout();
-      this.setState({ sessionExpiryPendingReason: "inactivity" });
-    }, delay);
+    const warningDelay = Math.max(0, delay - this.getInactivityWarningBeforeMs());
+    this.inactivityWarningTimerRef = setTimeout(() => {
+      this.inactivityWarningTimerRef = null;
+      if (!hasLoggedInSession(this.state.user) || this.state.sessionExpiryPendingReason) return;
+      this.setState({ showInactivityWarningModal: true });
+    }, warningDelay);
+    this.inactivityTimerRef = setTimeout(this.handleInactivityTimeout, delay);
+  };
+  /** Fires when the inactivity deadline is reached — always closes the warning modal first. */
+  handleInactivityTimeout = () => {
+    this.inactivityTimerRef = null;
+    this.clearInactivityWarningTimer();
+    if (!hasLoggedInSession(this.state.user)) {
+      this.setState({ showInactivityWarningModal: false });
+      return;
+    }
+    Auth.logout();
+    this.setState({
+      sessionExpiryPendingReason: "inactivity",
+      showInactivityWarningModal: false
+    });
+  };
+  /** User chose to stay signed in from the pre-logout warning modal. */
+  extendSessionFromInactivityWarning = () => {
+    this.setState({ showInactivityWarningModal: false }, () => {
+      this.resetInactivityTimer(true);
+    });
+  };
+  /** Close the pre-logout warning without extending the session (logout still scheduled). */
+  dismissInactivityWarningModal = () => {
+    this.setState({ showInactivityWarningModal: false });
   };
   loginUser = async (email, password, customToken) => {
     try {
@@ -353,6 +408,7 @@ class AuthProviderClass extends Component {
       avatar: avatarPlaceholder,
       isFetchingUser: false,
       sessionExpiryPendingReason: null,
+      showInactivityWarningModal: false,
       loggedOutDueToInactivity: options.dueToInactivity === true,
       loggedOutDueToCookieExpiry: options.dueToCookieExpiry === true
     });
@@ -848,10 +904,24 @@ class AuthProviderClass extends Component {
           clearLoggedOutDueToInactivity: this.clearLoggedOutDueToInactivity,
           clearLoggedOutDueToCookieExpiry: this.clearLoggedOutDueToCookieExpiry,
           dismissSessionExpiryModal: this.dismissSessionExpiryModal,
+          extendSessionFromInactivityWarning: this.extendSessionFromInactivityWarning,
+          dismissInactivityWarningModal: this.dismissInactivityWarningModal,
           reset2faFlow: this.reset2faFlow
         },
         children: [
           children,
+          !this.props.hideInactivityModal && this.state.showInactivityWarningModal && /* @__PURE__ */ jsx(
+            SuccessModalComponent,
+            {
+              isOpen: hasLoggedInSession(this.state.user) && !this.state.sessionExpiryPendingReason,
+              onClose: this.dismissInactivityWarningModal,
+              variant: "progress",
+              title: "Session is about to expire",
+              subtitle: "Your session will expire due to inactivity. Click below to stay signed in.",
+              content: /* @__PURE__ */ jsx(Text, { children: /* @__PURE__ */ jsx(Button, { onClick: this.extendSessionFromInactivityWarning, children: "To continue, press here" }) }),
+              maxWidth: "600px"
+            }
+          ),
           (this.state.loggedOutDueToInactivity || this.state.loggedOutDueToCookieExpiry || this.state.sessionExpiryPendingReason && hasLoggedInSession(this.state.user)) && !this.props.hideInactivityModal && /* @__PURE__ */ jsx(
             SuccessModalComponent,
             {
@@ -911,6 +981,8 @@ AuthProviderClass.propTypes = {
   }),
   /** Override inactivity timeout in ms (e.g. for Storybook). Production uses 5 minutes. */
   inactivityTimeMs: PropTypes.number,
+  /** How long before inactivity logout to show the warning modal (ms). Default 30 seconds. */
+  inactivityWarningBeforeMs: PropTypes.number,
   /** When true, the inactivity modal is not shown after auto-logout. Default false. */
   hideInactivityModal: PropTypes.bool,
   /** Override access token cookie lifetime in ms (e.g. for Storybook). Production uses 1 hour. */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stokr/components-library",
-  "version": "3.0.65",
+  "version": "3.0.66",
   "description": "STOKR - Components Library",
   "author": "Bilal Hodzic <bilal@stokr.io>",
   "license": "MIT",