# Identity & Access / Session Timeout Session timeout modal patterns showing expiring, expiring soon, and session ended states with countdown timers and progress indicators. **Category:** Patterns **Storybook:** https://doc.ux4g.gov.in/web/?path=/story/ux4g-patterns-identity-access-session-timeout--session-timeout ## Pattern variants - Session Timeout: https://doc.ux4g.gov.in/web/?path=/story/ux4g-patterns-identity-access-session-timeout--session-timeout ## When to use this pattern Use Identity & Access / Session Timeout when building citizen-facing flows that match the described government journey. Combine components such as cards, forms, tables, buttons, and status indicators as shown in Storybook. ## Framework setup ### HTML / CDN ```html ``` ### React ```bash npm install ux4g-web-components ``` ```jsx import 'ux4g-web-components/styles.css'; import 'ux4g-web-components/design-system'; ``` ### Angular Update `angular.json`: ```json { "styles": [ "node_modules/ux4g-web-components/styles/ux4g.css", "src/styles.css" ], "scripts": [ "node_modules/ux4g-web-components/dist/runtime/design-system.js" ] } ``` ## Code examples The snippets below are extracted from the Storybook canvas for Identity & Access / Session Timeout. Each example shows the rendered HTML, the equivalent React JSX, and the Angular template markup. ### 1. Session Timeout — Your Session is Expiring HTML: ```html

lock

Your session is expiring

04:47

You've been inactive for a while. For your security, we'll sign you out automatically.

``` React: ```jsx import React from 'react'; const IdentityAccessSessionTimeoutExample1Demo = () => ( <> {/* Screen 1: Your session is expiring */}

{/* Reusable: Mock Dashboard Backdrop (Blurred) */}

{/* Overlay & Centered Modal Card */}

{/* Session Modal Card Component */}

{/* Purple Lock Status Badge */}

lock

{/* Heading */}

Your session is expiring

{/* Countdown Timer (Purple) */}

04:47

{/* Description */}

You've been inactive for a while. For your security, we'll sign you out automatically.

{/* Progress Bar (50% filled, Purple) */}

{/* Actions */}

{/* Screen 2: Your session is expiring soon */} ); export default IdentityAccessSessionTimeoutExample1Demo; ``` Angular: ```html

lock

Your session is expiring

04:47

You've been inactive for a while. For your security, we'll sign you out automatically.

``` ### 2. Session Timeout — Your Session is Expiring Soon HTML: ```html

warning

Your session is expiring soon

00:57

You'll be signed out in less than a minute

``` React: ```jsx import React from 'react'; const IdentityAccessSessionTimeoutExample2Demo = () => ( <> {/* Screen 2: Your session is expiring soon */}

{/* Reusable: Mock Dashboard Backdrop (Blurred) */}

{/* Overlay & Centered Modal Card */}

{/* Session Modal Card Component */}

{/* Amber Warning Status Badge */}

warning

{/* Heading */}

Your session is expiring soon

{/* Countdown Timer (Amber/Orange) */}

00:57

{/* Description */}

You'll be signed out in less than a minute

{/* Progress Bar (15% filled, Amber/Orange) */}

{/* Actions */}

{/* Screen 3: Session ended */} ); export default IdentityAccessSessionTimeoutExample2Demo; ``` Angular: ```html

warning

Your session is expiring soon

00:57

You'll be signed out in less than a minute

``` ### 3. Session Timeout — Session Ended HTML: ```html

schedule

Session ended

Your form progress has been saved. Sign in again to continue where you left off.

``` React: ```jsx import React from 'react'; const IdentityAccessSessionTimeoutExample3Demo = () => ( <> {/* Screen 3: Session ended */}

{/* Reusable: Mock Dashboard Backdrop (Blurred) */}

{/* Overlay & Centered Modal Card */}

{/* Session Modal Card Component */}

{/* Neutral Clock Status Badge */}

schedule

{/* Heading */}

Session ended

{/* Description */}

Your form progress has been saved. Sign in again to continue where you left off.

{/* Actions */}

); export default IdentityAccessSessionTimeoutExample3Demo; ``` Angular: ```html

schedule

Session ended

Your form progress has been saved. Sign in again to continue where you left off.

```