4.32.2

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 aui-context 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 sessionTimeout property on the aui-context cookie to 30 minutes in the future.

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 aui-context 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 sessionTimeout property on the aui-context cookie to 30 minutes in the future. 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 sessionTimeout value.

The component reads and sets the sessionTimeout property on the aui-context cookie (more information about this cookie is below). When <aui-session-timeout> registers a click event on the page, it resets the sessionTimeout value 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.

The aui-context cookie

The value of this cookie is an encoded JSON string with the following keys:

  • activeAccountId
  • activeCompanyId
  • sessionTimeout

Only the sessionTimeout key is set or changed by this component. All other values are preserved.

The cookieattributes attribute or cookieAttributes property can be used to change the default cookie attributes. If your app is being embedded in a third-party iframe, for example, you will need to set SameSite=none and Secure on the cookie. The following are accepted properties on the cookieattributes object:

{ "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".

Redirecting to logout before loading <aui-session-timeout>

On any request for an authenticated route, the app server should check the sessionTimeout value on the aui-context cookie. If that timestamp is in the past, the app should follow its standard logout procedure and redirect the user to Avalara Identity (be sure to include the returnUrl query param when redirecting). The server-side implementation drives the optimal user experience where the redirect occurs prior to loading the client-side HTML.

Design

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