4.67.0

Session timeout

Indicates a user will be logged out after a period of inactivity

Demo

Note: The sessionTimeout component is set to open the warning dialog at 5 seconds of inactivity and emit the s-timeout event at 10 seconds of inactivity on this docsite. In all other contexts, it will warn at 25 minutes and time out at 30 minutes.

API

Tag

Name Description
<aui-session-timeout> Custom element, no content

Attributes

Name Value Required Description
cookieattributes Stringified JSON object

Specifies attributes that will be set on the skylab_session_timeout_{env} cookie. See guidelines for more information.
i18n string

A stringified JSON object which defines a list of localized strings. The keys must be one of the string IDs defined below.

Properties

Name Value Required Description
i18n object

A JSON object which defines a list of localized strings. The keys must be one of the string IDs defined below.

Methods

Name Description
resetSession() Resets the inactivity timer by writing a new expiry to the skylab_session_timeout_{env} cookie.

Events

Name Detail Description
s-timeout

Fired after the session is inactive for 30 minutes.
s-sessionextend

Fired when the session is extended due to a click in the document body.

Demo

Note: The sessionTimeout component is set to open the warning dialog at 5 seconds of inactivity and emit the s-timeout event at 10 seconds of inactivity on this docsite. In all other contexts, it will warn at 25 minutes and time out at 30 minutes.

API

Tag

Name
<AuiSessionTimeout>

Props

Name Value Required Description
cookieAttributes JSON object

Specifies attributes that will be set on the skylab_session_timeout_{env} cookie. See guidelines for more information.
i18n object

A JSON object which defines a list of localized strings. The keys must be one of the string IDs defined below.
onS-timeout Function

Handles the s-timeout event fired when the session is inactive for 30 minutes.
onS-sessionextend Function

Handles the s-sessionextend event fired when the session is extended due to a click in the document body.

Methods

Name Description
resetSession() Resets the inactivity timer by writing a new expiry to the skylab_session_timeout_{env} cookie. See the React implementation notes below for more information on calling this method.

React implementation notes

Using refs to call AuiSessionTimeout method

In order to call the resetSession() method, you must create a ref, assign it to the AuiSessionTimeout, and then use ref.current to access the method:

    
    const sessionTimeoutRef = React.createRef();
    
    function deselectAll() {
      sessionTimeoutRef.current.resetSession();
    }
    
    return (
      <AuiSessionTimeout ref={sessionTimeoutRef} />
    )

Skylab React links

General information about using our React package

i18n Strings

ID Description Default value
"sessionTimeout.header" The warning dialog's header text. Continue this session?
"sessionTimeout.body" The warning dialog's body text. This text must include the string {TIMER} as a placeholder for the countdown timer. For security reasons, this session ends in {TIMER} minutes if there is no activity.
"sessionTimeout.primaryButton" The primary button text in the warning dialog's footer. Continue
"sessionTimeout.secondaryButton" The secondary button text in the warning dialog's footer. Sign out

Guidelines

About this component

The <aui-session-timeout> component displays a warning dialog when the user's session has been inactive for 25 minutes, and emits the s-timeout event at 30 minutes of inactivity. Your app is then responsible for logging the user out. In the warning dialog, pressing the "Sign out" button will cause the component to emit the s-timeout event immediately, and pressing the "Yes" button will dismiss the dialog and reset the session expiry.

When <aui-session-timeout> registers a click event on the page, it resets the expiry to 30 minutes in the future. Consuming apps should also regularly call the resetSession() method while long-lived network activities (large file uploads, for instance) and data processing events are taking place, to ensure the user stays logged in even if they are not actively engaging with the page.

Logout is entirely client-side: the component emits s-timeout and your app handles the redirect. There is no server-side enforcement of the session expiry value.

The component stores the inactivity expiry in a dedicated, env-partitioned cookie named skylab_session_timeout_{env}, where {env} is the normalized value of window.aui.env (local/ci/qa → qa, dev → dev, sbx → sbx, anything else → prd). This keeps sbx and prd timers independent.

The cookie value is URI-encoded JSON:

{ "sessionTimeout": <epoch milliseconds> }

The cookie is domain-scoped to .avalara.com or .avalara.io (localhost falls back to host-only), with SameSite=lax, Secure, and path=/ as defaults. The cookieattributes attribute or cookieAttributes property can be used to override these defaults. If your app is embedded in a third-party iframe, for example, you will need to set SameSite=none and Secure. The following properties are accepted:

{ "domain"?: string, // default: ".avalara.com" or ".avalara.io", depending on window.location.host "secure"?: boolean, // default: true (set to false if running on localhost) "sameSite"?: "none" | "lax" | "strict", // default: "lax" "path"?: string, // default: "/" }

NOTE: secure must be set to true if sameSite is "none".

Design

Design resources can be found on the Skylab design documentation site: skylab.avalara.com