Adds background worker to check timeout state

[iOvergaard]

Description

This pull request introduces session timeout handling and token management improvements across multiple files, along with localization updates for timeout-related messages. The key changes include implementing a session timeout controller, enhancing token state management, and adding localized messages for session expiration warnings.

How to test

1. Log in
2. Go to chrome://inspect/#workers and inspect the "Token Check Worker"
3. You can see the messages coming out of the worker
4. Set Umbraco:Global:TimeOut to something low like "00:02:00", which is two minutes. Then log in and wait 30 seconds, you should now see a modal counting down
5. Confirm that both buttons "Log out" and "Stay logged in" work as intended
6. Let the countdown go to 0 and confirm that you are, in fact, logged out

Sequence

User:

flowchart TD
    Start([User logs into Umbraco]) --> Working[User working normally in Umbraco]
    
    Working --> TokenCheck{Background: Token check every 30s}
    TokenCheck --> |Token OK| Working
    
    TokenCheck --> |Token expires in <60s| WarningModal[⚠️ Session Timeout Warning Modal<br/>Shows countdown timer]
    
    WarningModal --> UserChoice{User decides}
    
    UserChoice --> |Clicks 'Continue'| ValidateToken[System validates/refreshes token]
    UserChoice --> |Clicks 'Logout'| LoggedOut[👋 User logged out]
    UserChoice --> |Ignores modal<br/>Timer expires| ValidateToken
    
    ValidateToken --> TokenValid{Token validation}
    TokenValid --> |Success| Working
    TokenValid --> |Fails| LoggedOut
    
    TokenCheck --> |Token already expired| AutoLogout[🚨 Automatic logout<br/>No warning given]
    AutoLogout --> LoggedOut
    
    LoggedOut --> LoginScreen[🔐 Redirected to login screen]
    LoginScreen --> |User logs in again| Start
    
    style WarningModal fill:#fff2cc,stroke:#d6b656
    style AutoLogout fill:#f8cecc,stroke:#b85450
    style LoggedOut fill:#f8cecc,stroke:#b85450
    style Working fill:#d5e8d4,stroke:#82b366
    style LoginScreen fill:#e1d5e7,stroke:#9673a6

Loading

System:

sequenceDiagram
    participant AC as AuthContext
    participant ASTC as AuthSessionTimeoutController
    participant AF as AuthFlow
    participant TCW as TokenCheckWorker
    participant MM as ModalManager
    participant User as User

    Note over AC,ASTC: Initialization
    AC->>ASTC: constructor(host, authFlow)
    ASTC->>TCW: new SharedWorker(token-check.worker.js)
    ASTC->>TCW: port.start()
    
    Note over AF,TCW: Token Setup
    AF->>ASTC: token$ observable emits tokenResponse
    ASTC->>TCW: postMessage({command: 'init', tokenResponse})
    TCW->>TCW: setInterval(VALIDATION_INTERVAL: 30s)
    
    Note over TCW,TCW: Periodic Token Validation
    loop Every 30 seconds
        TCW->>TCW: isTokenExpired(tokenResponse)
        TCW->>TCW: Check if token expires in < 60s buffer
        
        alt Token is expired
            TCW->>ASTC: postMessage({command: 'logout'})
            ASTC->>AC: host.timeOut()
            AC->>ASTC: timeoutSignal emits
            ASTC->>TCW: postMessage({command: 'init'}) // stop worker
            ASTC->>MM: close('auth-timeout')
            
        else Token needs refresh (< 60s remaining)
            TCW->>ASTC: postMessage({command: 'refreshToken', secondsUntilLogout})
            ASTC->>ASTC: #timeoutModal(secondsUntilLogout)
            ASTC->>MM: open(UMB_MODAL_AUTH_TIMEOUT)
            MM->>User: Show timeout modal
            
            alt User clicks Continue
                User->>ASTC: onContinue()
                ASTC->>ASTC: #tryValidateToken()
                ASTC->>AC: validateToken()
                
                alt Token validation succeeds
                    AC->>ASTC: Token refreshed
                    Note over ASTC: Continue normal flow
                    
                else Token validation fails
                    AC->>ASTC: Error thrown
                    ASTC->>AC: host.timeOut()
                end
                
            else User clicks Logout
                User->>ASTC: onLogout()
                ASTC->>AC: signOut()
                
            else Modal times out/closes
                ASTC->>ASTC: #tryValidateToken()
                ASTC->>AC: validateToken()
            end
        end
    end

Loading

Changes

Session Timeout Handling:

• src/Umbraco.Web.UI.Client/src/packages/core/auth/controllers/auth-session-timeout.controller.ts: Added UmbAuthSessionTimeoutController to manage session timeout and token expiration using a shared worker. It handles user logout, token refresh, and modal display for user decisions.
• src/Umbraco.Web.UI.Client/src/packages/core/auth/auth.context.ts: Integrated the session timeout controller into the authentication context.

Token Management Enhancements:

• src/Umbraco.Web.UI.Client/src/packages/core/auth/auth-flow.ts: Replaced the #tokenResponse property with UmbObjectState for better state management and added observable streams for token updates. Updated token-related methods to use the new state management approach. [1] [2] [3] [4] [5] [6] [7] [8] [9]

Localization Updates:

• src/Umbraco.Web.UI.Client/src/assets/lang/da.ts: Added Danish translations for session timeout warnings.
• src/Umbraco.Web.UI.Client/src/assets/lang/de.ts: Added German translations for session timeout warnings.
• src/Umbraco.Web.UI.Client/src/assets/lang/en.ts: Added English translations for session timeout warnings.

Modal and Worker Implementation:

• src/Umbraco.Web.UI.Client/src/packages/core/auth/modals/umb-auth-timeout-modal.element.ts: Implemented a modal element for session timeout warnings, allowing users to choose between logging out or staying logged in.
• src/Umbraco.Web.UI.Client/src/packages/core/auth/workers/token-check.worker.ts: Added a shared worker to periodically check token expiration and trigger appropriate actions (logout or refresh).

Build Configuration:

• src/Umbraco.Web.UI.Client/src/packages/core/vite.config.ts: Updated the Vite configuration to set a base path for the core package.
• src/Umbraco.Web.UI.Client/src/vite-config-base.ts: Added support for configuring the base path in the default Vite configuration.

[Copilot]

Pull Request Overview

This PR adds a background shared worker to monitor token expiration, integrates a session timeout controller in the auth context, implements a modal for timeout warnings, updates Vite configs to support a custom base path, and includes new translations for timeout messages.

• Enable WebWorker support in TS config
• Introduce SharedWorker token-check logic and session timeout controller
• Add modal UI and localization entries for session expiration warnings

Reviewed Changes

Copilot reviewed 14 out of 14 changed files in this pull request and generated 5 comments.

Show a summary per file

File	Description
src/Umbraco.Web.UI.Client/tsconfig.json	Added WebWorker to lib for shared worker support
src/Umbraco.Web.UI.Client/src/vite-config-base.ts	Added optional base argument to default Vite config
src/Umbraco.Web.UI.Client/src/packages/core/vite.config.ts	Set base path for core package builds
src/Umbraco.Web.UI.Client/src/packages/core/auth/workers/token-check.worker.ts	Implemented shared worker to periodically check token state
src/Umbraco.Web.UI.Client/src/packages/core/auth/modals/umb-auth-timeout-modal.token.ts	Defined UmbModalAuthTimeoutConfig and modal token
src/Umbraco.Web.UI.Client/src/packages/core/auth/modals/umb-auth-timeout-modal.element.ts	Built the countdown modal UI for session timeout
src/Umbraco.Web.UI.Client/src/packages/core/auth/modals/manifests.ts	Registered the timeout modal in the modal manifests
src/Umbraco.Web.UI.Client/src/packages/core/auth/modals/index.ts	Exported the new timeout modal token
src/Umbraco.Web.UI.Client/src/packages/core/auth/controllers/auth-session-timeout.controller.ts	Added controller to wire the token-check worker and modal
src/Umbraco.Web.UI.Client/src/packages/core/auth/auth.context.ts	Instantiated session timeout controller in the auth context
src/Umbraco.Web.UI.Client/src/packages/core/auth/auth-flow.ts	Replaced #tokenResponse with UmbObjectState and streams
src/Umbraco.Web.UI.Client/src/assets/lang/en.ts	Added English timeout warning translations
src/Umbraco.Web.UI.Client/src/assets/lang/de.ts	Added German timeout warning translations
src/Umbraco.Web.UI.Client/src/assets/lang/da.ts	Added Danish timeout warning translations

Comments suppressed due to low confidence (2)

src/Umbraco.Web.UI.Client/src/packages/core/auth/controllers/auth-session-timeout.controller.ts:41

• This comment is incomplete. Either finish describing the action (e.g., "Post the new token to the worker") or remove it to avoid confusion.

				// Post the new

src/Umbraco.Web.UI.Client/src/packages/core/auth/workers/token-check.worker.ts:1

• The new shared worker logic should have accompanying unit tests to validate expiration detection, refresh messaging, and logout signaling.

import type { TokenResponse } from '@umbraco-cms/backoffice/external/openid';

[umbracocommunity]

This pull request has been mentioned on Umbraco community forum. There might be relevant details there:

https://forum.umbraco.com/t/new-login-process-is-a-bit-of-a-mess/6261/3