Introduction

This package provides a session timeout component that handles:

• An inactivity timer and session TTL checker
• A timeout warning dialog
• Session timeout/TTL extension

and is easy to integrate with the @bento-core/authentication package. For the component's technical details, please see DESIGN.md.

See below for usage instructions.

Usage

Quick Start

import { SessionTimeoutGenerator } from '@bento-core/session-timeout';

// Generate the component
const { SessionTimeout } = SessionTimeoutGenerator({
  /** See Generator Options **/
});

// Use the component (e.g. In LayoutView)
const Layout = (props) => {
  return (
    <>
      {/* ... other components */ }

      <HashRouter>
        <>
          {/* ... other components */ }

          <SessionTimeout />

          {/* ... other components */ }
        </>
      </HashRouter>
    </>
  );
};

Generator Configuration

See the available DEFAULT_CONFIG_SESSIONTIMEOUT object to understand the component generator options. You can choose to override config, and/or selectors. You DO NOT need to override all of the options if you don't want to. The component generator will only use the options you provide.

export const DEFAULT_CONFIG_SESSIONTIMEOUT = {
  // Misc. Configuration Options
  config: {
    // Show the timeout warning dialog N seconds before the session expires
    thresholdTime: 300,
    // Interval to ping the server ttl endpoint in seconds
    pingInterval: 10,
    // The message to show if the extend session request fails (JSX Component or string)
    extendSessionError: 'Unable to extend session. Please try again.',
    // The message to show after the user has signed out (JSX Component or string)
    afterSignout: (
      <div>
        <div>This authenticated session is no longer valid.</div>
        <div>Please login to establish a new session.</div>
      </div>
    ),
    // The endpoint to ping to extend the session
    extendEndpoint: '',
    // The endpoint to ping to get the session ttl
    ttlEndpoint: '',
  },

  // Redux State Selectors
  selectors: {
    /**
     * Selects whether the user is signed in from the global Redux state
     *
     * Note:
     * - If a user is signed in, the component is activated.
     *
     *
     * @param {object} state Redux state
     * @returns {boolean} Whether the user is signed in
     */
    isSignedIn: (state) => state.login && state.login.isSignedIn,
  },
};

Exports

This component exports the following components and objects by default. You may use them as necessary.

• SessionTimeoutGenerator - The component generator function
• DEFAULT_CONFIG_SESSIONTIMEOUT - The default configuration object

Props

This component, which is generated by the provided generator, accepts the following props directly. The default value is specified, along with the possible values. The classes prop will override the default styling for any provided classes.

<SessionTimeout
  title={undefined}             // string|React.Component The title of the modal
  body={undefined}              // string|React.Componemnt The body text of the modal.
  classes={undefined}           // object The classes to apply to the modal
  signOut={undefined}           // Function to sign out the user when the session expires and any other actions to take
  showNotification={undefined}  // Function to show a notification to the user
/>