@umbraco-cms/backoffice 16.1.0 → 16.2.0-rc

package/dist-cms/packages/content/content-type/workspace/views/design/content-type-design-editor-group.element.js

@@ -59,7 +59,7 @@ let UmbContentTypeWorkspaceViewEditGroupElement = class UmbContentTypeWorkspaceV
             }
         }
     }
-    _singleValueUpdate(propertyName, value) {
+    #singleValueUpdate(propertyName, value) {
         if (!this._groupStructureHelper || !this.group)
             return;
         const partialObject = {};
@@ -76,7 +76,7 @@ let UmbContentTypeWorkspaceViewEditGroupElement = class UmbContentTypeWorkspaceV
         if (changedName) {
             newName = changedName;
         }
-        this._singleValueUpdate('name', newName);
+        this.#singleValueUpdate('name', newName);
         e.target.value = newName;
     }
     #blurGroup(e) {
@@ -87,7 +87,7 @@ let UmbContentTypeWorkspaceViewEditGroupElement = class UmbContentTypeWorkspaceV
             const changedName = this.groupStructureHelper
                 .getStructureManager()
                 .makeEmptyContainerName(this._group.id, 'Group', this._group.parent?.id ?? null);
-            this._singleValueUpdate('name', changedName);
+            this.#singleValueUpdate('name', changedName);
             e.target.value = changedName;
         }
     }
@@ -163,7 +163,7 @@ let UmbContentTypeWorkspaceViewEditGroupElement = class UmbContentTypeWorkspaceV
 							label=${this.localize.term('sort_sortOrder')}
 							.value=${this.group.sortOrder.toString()}
 							?disabled=${!this._hasOwnerContainer}
-							@change=${(e) => this._singleValueUpdate('sortOrder', parseInt(e.target.value) ?? 0)}></uui-input>
+							@change=${(e) => this.#singleValueUpdate('sortOrder', parseInt(e.target.value) ?? 0)}></uui-input>
 					`)}
 			</div>
 		`;

package/dist-cms/packages/content/content-type/workspace/views/design/content-type-design-editor-property.element.js

@@ -502,12 +502,15 @@ __decorate([
 ], UmbContentTypeDesignEditorPropertyElement.prototype, "ownerVariesBySegment", void 0);
 __decorate([
     property({ type: Boolean, reflect: true, attribute: '_inherited' })
+    // eslint-disable-next-line @typescript-eslint/naming-convention
 ], UmbContentTypeDesignEditorPropertyElement.prototype, "_inherited", void 0);
 __decorate([
     state()
+    // eslint-disable-next-line @typescript-eslint/naming-convention
 ], UmbContentTypeDesignEditorPropertyElement.prototype, "_inheritedContentTypeId", void 0);
 __decorate([
     state()
+    // eslint-disable-next-line @typescript-eslint/naming-convention
 ], UmbContentTypeDesignEditorPropertyElement.prototype, "_inheritedContentTypeName", void 0);
 __decorate([
     property({ type: String, reflect: false })

package/dist-cms/packages/content/content-type/workspace/views/design/content-type-design-editor-tab.element.d.ts

@@ -1,4 +1,3 @@
-import type { UmbPropertyTypeContainerModel } from '../../../types.js';
 import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
 import './content-type-design-editor-properties.element.js';
 import './content-type-design-editor-group.element.js';
@@ -6,10 +5,10 @@ export declare class UmbContentTypeDesignEditorTabElement extends UmbLitElement
     #private;
     get containerId(): string | null | undefined;
     set containerId(value: string | null | undefined);
-    _groups: Array<UmbPropertyTypeContainerModel>;
-    _hasProperties: boolean;
-    _sortModeActive?: boolean;
-    _editContentTypePath?: string;
+    private _groups;
+    private _hasProperties;
+    private _sortModeActive?;
+    private _editContentTypePath?;
     constructor();
     render(): import("lit-html").TemplateResult<1>;
     static styles: import("lit").CSSResult[];

package/dist-cms/packages/content/property-type/workspace/property-type-workspace-editor.element.d.ts

@@ -1,8 +1,8 @@
 import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
 export declare class UmbPropertyTypeWorkspaceEditorElement extends UmbLitElement {
     #private;
-    _isNew?: boolean;
-    _name?: string;
+    private _isNew?;
+    private _name?;
     constructor();
     render(): "" | import("lit-html").TemplateResult<1>;
     static styles: import("lit").CSSResult[];

package/dist-cms/packages/core/auth/auth-flow.d.ts

@@ -1,3 +1,4 @@
+import { TokenResponse } from '@umbraco-cms/backoffice/external/openid';
 import { Subject } from '@umbraco-cms/backoffice/external/rxjs';
 /**
  * This class is used to handle the auth flow through any backend supporting OpenID Connect.
@@ -38,6 +39,7 @@ import { Subject } from '@umbraco-cms/backoffice/external/rxjs';
  */
 export declare class UmbAuthFlow {
     #private;
+    readonly token$: import("rxjs").Observable<TokenResponse | undefined>;
     /**
      * This signal will emit when the authorization flow is complete.
      * @remark It will also emit if there is an error during the authorization flow.

package/dist-cms/packages/core/auth/auth-flow.js

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/naming-convention */
 /*
  * Copyright 2017 Google Inc.
  *
@@ -16,6 +17,7 @@
 import { UMB_STORAGE_TOKEN_RESPONSE_NAME } from './constants.js';
 import { BaseTokenRequestHandler, BasicQueryStringUtils, FetchRequestor, LocalStorageBackend, RedirectRequestHandler, AuthorizationRequest, AuthorizationNotifier, AuthorizationServiceConfiguration, GRANT_TYPE_AUTHORIZATION_CODE, GRANT_TYPE_REFRESH_TOKEN, RevokeTokenRequest, TokenRequest, TokenResponse, } from '@umbraco-cms/backoffice/external/openid';
 import { Subject } from '@umbraco-cms/backoffice/external/rxjs';
+import { UmbObjectState } from '@umbraco-cms/backoffice/observable-api';
 const requestor = new FetchRequestor();
 /**
  * This class is needed to prevent the hash from being parsed as part of the query string.
@@ -81,6 +83,9 @@ export class UmbAuthFlow {
     #link_key_endpoint;
     #unlink_endpoint;
     constructor(openIdConnectUrl, redirectUri, postLogoutRedirectUri, clientId = 'umbraco-back-office', scope = 'offline_access') {
+        // tokens
+        this.#tokenResponse = new UmbObjectState(undefined);
+        this.token$ = this.#tokenResponse.asObservable();
         /**
          * This signal will emit when the authorization flow is complete.
          * @remark It will also emit if there is an error during the authorization flow.
@@ -139,7 +144,7 @@ export class UmbAuthFlow {
         const tokenResponseJson = await this.#storageBackend.getItem(UMB_STORAGE_TOKEN_RESPONSE_NAME);
         if (tokenResponseJson) {
             const response = new TokenResponse(JSON.parse(tokenResponseJson));
-            this.#tokenResponse = response;
+            this.#tokenResponse.setValue(response);
         }
     }
     /**
@@ -192,7 +197,7 @@ export class UmbAuthFlow {
     async clearTokenStorage() {
         await this.#storageBackend.removeItem(UMB_STORAGE_TOKEN_RESPONSE_NAME);
         // clear the internal state
-        this.#tokenResponse = undefined;
+        this.#tokenResponse.setValue(undefined);
     }
     /**
      * This method will sign the user out of the application.
@@ -200,17 +205,17 @@ export class UmbAuthFlow {
     async signOut() {
         const signOutPromises = [];
         // revoke the access token if it exists
-        if (this.#tokenResponse) {
+        if (this.#tokenResponse.value) {
             const tokenRevokeRequest = new RevokeTokenRequest({
-                token: this.#tokenResponse.accessToken,
+                token: this.#tokenResponse.value.accessToken,
                 client_id: this.#clientId,
                 token_type_hint: 'access_token',
             });
             signOutPromises.push(this.#tokenHandler.performRevokeTokenRequest(this.#configuration, tokenRevokeRequest));
             // revoke the refresh token if it exists
-            if (this.#tokenResponse.refreshToken) {
+            if (this.#tokenResponse.value.refreshToken) {
                 const refreshTokenRevokeRequest = new RevokeTokenRequest({
-                    token: this.#tokenResponse.refreshToken,
+                    token: this.#tokenResponse.value.refreshToken,
                     client_id: this.#clientId,
                     token_type_hint: 'refresh_token',
                 });
@@ -243,12 +248,12 @@ export class UmbAuthFlow {
      */
     async performWithFreshTokens() {
         // if the access token is valid, return it
-        if (this.#tokenResponse?.isValid()) {
-            return Promise.resolve(this.#tokenResponse.accessToken);
+        if (this.#tokenResponse.value?.isValid()) {
+            return Promise.resolve(this.#tokenResponse.value.accessToken);
         }
         // if the access token is not valid, try to refresh it
         const success = await this.makeRefreshTokenRequest();
-        const newToken = this.#tokenResponse?.accessToken ?? '';
+        const newToken = this.#tokenResponse.value?.accessToken ?? '';
         if (!success) {
             // if the refresh token request failed, we need to clear the token state
             this.clearTokenStorage();
@@ -301,8 +306,9 @@ export class UmbAuthFlow {
      * Save the current token response to local storage.
      */
     async #saveTokenState() {
-        if (this.#tokenResponse) {
-            await this.#storageBackend.setItem(UMB_STORAGE_TOKEN_RESPONSE_NAME, JSON.stringify(this.#tokenResponse.toJson()));
+        await this.#storageBackend.removeItem(UMB_STORAGE_TOKEN_RESPONSE_NAME);
+        if (this.#tokenResponse.value) {
+            await this.#storageBackend.setItem(UMB_STORAGE_TOKEN_RESPONSE_NAME, JSON.stringify(this.#tokenResponse.value.toJson()));
         }
     }
     /**
@@ -327,7 +333,7 @@ export class UmbAuthFlow {
         await this.#performTokenRequest(request);
     }
     async makeRefreshTokenRequest() {
-        if (!this.#tokenResponse?.refreshToken) {
+        if (!this.#tokenResponse.value?.refreshToken) {
             return false;
         }
         const request = new TokenRequest({
@@ -335,7 +341,7 @@ export class UmbAuthFlow {
             redirect_uri: this.#redirectUri,
             grant_type: GRANT_TYPE_REFRESH_TOKEN,
             code: undefined,
-            refresh_token: this.#tokenResponse.refreshToken,
+            refresh_token: this.#tokenResponse.value.refreshToken,
             extras: undefined,
         });
         return this.#performTokenRequest(request);
@@ -347,8 +353,9 @@ export class UmbAuthFlow {
      */
     async #performTokenRequest(request) {
         try {
-            this.#tokenResponse = await this.#tokenHandler.performTokenRequest(this.#configuration, request);
-            this.#saveTokenState();
+            const tokenResponse = await this.#tokenHandler.performTokenRequest(this.#configuration, request);
+            this.#tokenResponse.setValue(tokenResponse);
+            await this.#saveTokenState();
             return true;
         }
         catch (error) {

package/dist-cms/packages/core/auth/auth.context.js

@@ -1,10 +1,12 @@
 import { UmbAuthFlow } from './auth-flow.js';
 import { UMB_AUTH_CONTEXT } from './auth.context.token.js';
+import { UmbAuthSessionTimeoutController } from './controllers/auth-session-timeout.controller.js';
 import { UMB_STORAGE_TOKEN_RESPONSE_NAME } from './constants.js';
 import { UmbContextBase } from '@umbraco-cms/backoffice/class-api';
 import { UmbBooleanState } from '@umbraco-cms/backoffice/observable-api';
 import { ReplaySubject, Subject, firstValueFrom, switchMap, distinctUntilChanged, throttleTime, auditTime, } from '@umbraco-cms/backoffice/external/rxjs';
 import { umbHttpClient } from '@umbraco-cms/backoffice/http-client';
+import { isTestEnvironment } from '@umbraco-cms/backoffice/utils';
 export class UmbAuthContext extends UmbContextBase {
     #isAuthorized;
     // Timeout is different from `isAuthorized` because it can occur repeatedly
@@ -63,6 +65,10 @@ export class UmbAuthContext extends UmbContextBase {
         // Observe changes to local storage and update the authorization state
         // This establishes the tab-to-tab communication
         window.addEventListener('storage', this.#onStorageEvent.bind(this));
+        if (!isTestEnvironment()) {
+            // Start the session timeout controller
+            new UmbAuthSessionTimeoutController(this, this.#authFlow);
+        }
     }
     destroy() {
         super.destroy();

package/dist-cms/packages/core/auth/controllers/auth-session-timeout.controller.d.ts

@@ -0,0 +1,8 @@
+import type { UmbAuthFlow } from '../auth-flow.js';
+import type { UmbAuthContext } from '../auth.context.js';
+import { UmbControllerBase } from '@umbraco-cms/backoffice/class-api';
+export declare class UmbAuthSessionTimeoutController extends UmbControllerBase {
+    #private;
+    constructor(host: UmbAuthContext, authFlow: UmbAuthFlow);
+    destroy(): void;
+}

package/dist-cms/packages/core/auth/controllers/auth-session-timeout.controller.js

@@ -0,0 +1,91 @@
+import { UMB_MODAL_AUTH_TIMEOUT } from '../modals/umb-auth-timeout-modal.token.js';
+import { UmbControllerBase } from '@umbraco-cms/backoffice/class-api';
+export class UmbAuthSessionTimeoutController extends UmbControllerBase {
+    #tokenCheckWorker;
+    #host;
+    constructor(host, authFlow) {
+        super(host, 'UmbAuthSessionTimeoutController');
+        this.#host = host;
+        this.#tokenCheckWorker = new SharedWorker(new URL('../workers/token-check.worker.js', import.meta.url), {
+            name: 'TokenCheckWorker',
+            type: 'module',
+        });
+        // Ensure the worker is ready to receive messages
+        this.#tokenCheckWorker.port.start();
+        // Listen for messages from the token check worker
+        this.#tokenCheckWorker.port.onmessage = async (event) => {
+            if (event.data?.command === 'logout') {
+                // If the worker signals a logout, we clear the token storage and set the user as unauthorized
+                host.timeOut();
+            }
+            else if (event.data?.command === 'refreshToken') {
+                // If the worker signals a token refresh, we let the user decide whether to continue or logout
+                this.#openTimeoutModal(event.data.secondsUntilLogout);
+            }
+        };
+        // Initialize the token check worker with the current token response
+        this.observe(authFlow.token$, (tokenResponse) => {
+            // Inform the token check worker about the new token response
+            console.log('[Auth Context] Informing token check worker about new token response.');
+            // Post the new
+            this.#tokenCheckWorker?.port.postMessage({
+                command: 'init',
+                tokenResponse,
+            });
+        }, '_authFlowAuthorizationSignal');
+        // Listen for the timeout signal to stop the token check worker
+        this.observe(host.timeoutSignal, async () => {
+            // Stop the token check worker when the user has timed out
+            this.#tokenCheckWorker?.port.postMessage({
+                command: 'init',
+            });
+            // Close the modal if it is open
+            await this.#closeTimeoutModal();
+        }, '_authFlowTimeoutSignal');
+    }
+    destroy() {
+        super.destroy();
+        this.#tokenCheckWorker?.port.close();
+        this.#tokenCheckWorker = undefined;
+    }
+    async #closeTimeoutModal() {
+        const contextToken = (await import('@umbraco-cms/backoffice/modal')).UMB_MODAL_MANAGER_CONTEXT;
+        const modalManager = await this.getContext(contextToken);
+        modalManager?.close('auth-timeout');
+    }
+    async #openTimeoutModal(remainingTimeInSeconds) {
+        const contextToken = (await import('@umbraco-cms/backoffice/modal')).UMB_MODAL_MANAGER_CONTEXT;
+        const modalManager = await this.getContext(contextToken);
+        modalManager
+            ?.open(this, UMB_MODAL_AUTH_TIMEOUT, {
+            modal: {
+                key: 'auth-timeout',
+            },
+            data: {
+                remainingTimeInSeconds,
+                onLogout: () => {
+                    this.#host.signOut();
+                },
+                onContinue: () => {
+                    // If the user chooses to stay logged in, we validate the token
+                    this.#tryValidateToken();
+                },
+            },
+        })
+            .onSubmit()
+            .catch(() => {
+            // If the modal is forced closed or an error occurs, we handle it gracefully
+            this.#tryValidateToken();
+        });
+    }
+    async #tryValidateToken() {
+        try {
+            await this.#host.validateToken();
+        }
+        catch (error) {
+            console.error('[Auth Context] Error validating token:', error);
+            // If the token validation fails, we clear the token storage and set the user as unauthorized
+            this.#host.timeOut();
+        }
+    }
+}

package/dist-cms/packages/core/auth/modals/index.d.ts

@@ -1 +1,2 @@
 export * from './umb-app-auth-modal.token.js';
+export * from './umb-auth-timeout-modal.token.js';

package/dist-cms/packages/core/auth/modals/index.js

@@ -1 +1,2 @@
 export * from './umb-app-auth-modal.token.js';
+export * from './umb-auth-timeout-modal.token.js';

package/dist-cms/packages/core/auth/modals/manifests.js

@@ -5,4 +5,10 @@ export const manifests = [
         name: 'Umb App Auth Modal',
         element: () => import('./umb-app-auth-modal.element.js'),
     },
+    {
+        type: 'modal',
+        alias: 'Umb.Modal.AuthTimeout',
+        name: 'Umb Auth Timeout Modal',
+        element: () => import('./umb-auth-timeout-modal.element.js'),
+    },
 ];

package/dist-cms/packages/core/auth/modals/umb-app-auth-modal.element.d.ts

@@ -11,7 +11,6 @@ export declare class UmbAppAuthModalElement extends UmbModalBaseElement<UmbModal
     get headline(): string;
     firstUpdated(): void;
     render(): import("lit-html").TemplateResult<1>;
-    private onSubmit;
     static styles: import("lit").CSSResult[];
 }
 export default UmbAppAuthModalElement;

package/dist-cms/packages/core/auth/modals/umb-app-auth-modal.element.js

@@ -22,7 +22,7 @@ let UmbAppAuthModalElement = class UmbAppAuthModalElement extends UmbModalBaseEl
             // Do not show any Umbraco auth provider if local login is disabled
             return provider.forProviderName.toLowerCase() !== 'umbraco';
         };
-        this.onSubmit = async (providerOrManifest, loginHint) => {
+        this.#onSubmit = async (providerOrManifest, loginHint) => {
             try {
                 const authContext = await this.getContext(UMB_AUTH_CONTEXT);
                 if (!authContext) {
@@ -49,7 +49,7 @@ let UmbAppAuthModalElement = class UmbAppAuthModalElement extends UmbModalBaseEl
     get props() {
         return {
             userLoginState: this.data?.userLoginState ?? 'loggingIn',
-            onSubmit: this.onSubmit.bind(this),
+            onSubmit: this.#onSubmit.bind(this),
         };
     }
     get headline() {
@@ -137,6 +137,7 @@ let UmbAppAuthModalElement = class UmbAppAuthModalElement extends UmbModalBaseEl
 		`;
     }
     #filterProvider;
+    #onSubmit;
     static { this.styles = [
         UmbTextStyles,
         css `

package/dist-cms/packages/core/auth/modals/umb-auth-timeout-modal.element.d.ts

@@ -0,0 +1,16 @@
+import type { UmbModalAuthTimeoutConfig } from './umb-auth-timeout-modal.token.js';
+import { UmbModalBaseElement } from '@umbraco-cms/backoffice/modal';
+export declare class UmbAuthTimeoutModalElement extends UmbModalBaseElement<UmbModalAuthTimeoutConfig, never> {
+    #private;
+    private _remainingTimeInSeconds;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    render(): import("lit-html").TemplateResult<1>;
+    static readonly styles: import("lit").CSSResult[];
+}
+export default UmbAuthTimeoutModalElement;
+declare global {
+    interface HTMLElementTagNameMap {
+        'umb-auth-timeout-modal': UmbAuthTimeoutModalElement;
+    }
+}

package/dist-cms/packages/core/auth/modals/umb-auth-timeout-modal.element.js

@@ -0,0 +1,88 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { css, customElement, html, state } from '@umbraco-cms/backoffice/external/lit';
+import { umbFocus } from '@umbraco-cms/backoffice/lit-element';
+import { UmbModalBaseElement } from '@umbraco-cms/backoffice/modal';
+import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
+let UmbAuthTimeoutModalElement = class UmbAuthTimeoutModalElement extends UmbModalBaseElement {
+    constructor() {
+        super(...arguments);
+        this._remainingTimeInSeconds = 60;
+    }
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    #interval;
+    connectedCallback() {
+        super.connectedCallback();
+        this.#startCountdown();
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        if (this.#interval) {
+            clearInterval(this.#interval);
+        }
+    }
+    #startCountdown() {
+        this._remainingTimeInSeconds = this.data?.remainingTimeInSeconds ?? 60;
+        this.#interval = setInterval(() => {
+            if (this._remainingTimeInSeconds > 0) {
+                this._remainingTimeInSeconds--;
+            }
+            else {
+                clearInterval(this.#interval);
+                this.#handleLogout();
+            }
+        }, 1000);
+    }
+    #handleLogout() {
+        this.data?.onLogout?.();
+        this.modalContext?.submit();
+    }
+    #handleConfirm() {
+        this.data?.onContinue?.();
+        this.modalContext?.submit();
+    }
+    render() {
+        return html `
+			<uui-dialog-layout class="uui-text" .headline=${this.localize.term('timeout_warningHeadline')}>
+				<umb-localize key="timeout_warningText" .args=${[this._remainingTimeInSeconds]}>
+					Your session is about to expire and you will be logged out in
+					<strong>${this._remainingTimeInSeconds} seconds</strong>.
+				</umb-localize>
+
+				<uui-button
+					slot="actions"
+					look="secondary"
+					label=${this.localize.term('timeout_warningLogoutAction')}
+					@click=${this.#handleLogout}></uui-button>
+				<uui-button
+					slot="actions"
+					id="confirm"
+					color="positive"
+					look="primary"
+					label=${this.localize.term('timeout_warningContinueAction')}
+					@click=${this.#handleConfirm}
+					${umbFocus()}></uui-button>
+			</uui-dialog-layout>
+		`;
+    }
+    static { this.styles = [
+        UmbTextStyles,
+        css `
+			uui-dialog-layout {
+				max-inline-size: 60ch;
+			}
+		`,
+    ]; }
+};
+__decorate([
+    state()
+], UmbAuthTimeoutModalElement.prototype, "_remainingTimeInSeconds", void 0);
+UmbAuthTimeoutModalElement = __decorate([
+    customElement('umb-auth-timeout-modal')
+], UmbAuthTimeoutModalElement);
+export { UmbAuthTimeoutModalElement };
+export default UmbAuthTimeoutModalElement;

package/dist-cms/packages/core/auth/modals/umb-auth-timeout-modal.token.d.ts

@@ -0,0 +1,7 @@
+import { UmbModalToken } from '../../modal/token/modal-token.js';
+export type UmbModalAuthTimeoutConfig = {
+    remainingTimeInSeconds: number;
+    onLogout: () => void;
+    onContinue: () => void;
+};
+export declare const UMB_MODAL_AUTH_TIMEOUT: UmbModalToken<UmbModalAuthTimeoutConfig, never>;

package/dist-cms/packages/core/auth/modals/umb-auth-timeout-modal.token.js

@@ -0,0 +1,6 @@
+import { UmbModalToken } from '../../modal/token/modal-token.js';
+export const UMB_MODAL_AUTH_TIMEOUT = new UmbModalToken('Umb.Modal.AuthTimeout', {
+    modal: {
+        type: 'dialog',
+    },
+});

package/dist-cms/packages/core/auth/workers/token-check.worker.js

@@ -0,0 +1,104 @@
+/**
+ * Applies a buffer time before the actual expiration of the token.
+ * This is to ensure that we have time to refresh the token before it expires.
+ */
+const BUFFER_BEFORE_EXPIRATION = 60; // 1 minute in seconds
+/**
+ * The interval at which the token will be validated.
+ */
+const VALIDATION_INTERVAL = 30000; // 30 seconds in milliseconds
+/**
+ * The multiplier for the token expiry time.
+ * In Umbraco, access_tokens live for a quarter of the time of the refresh_token.
+ */
+const TOKEN_EXPIRY_MULTIPLIER = 4;
+const ports = [];
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+let interval;
+console.log('[Token Check Worker] Token check worker initialized.');
+/**
+ * Define the globalThis object to handle the onconnect event as SharedWorkerGlobalScope.
+ * This must be defined manually because TypeScript does not recognize the SharedWorkerGlobalScope type on all environments.
+ */
+const _self = globalThis;
+_self.onconnect = (event) => {
+    console.log('[Token Check Worker] Connected to main thread.');
+    const port = event.ports[0];
+    ports.push(port);
+    // Listen for messages from any port connected to this worker
+    port.onmessage = (e) => {
+        if (e.data?.command === 'init') {
+            console.log('[Token Check Worker] Initializing with token response:', e.data.tokenResponse);
+            if (e.data.tokenResponse) {
+                init(e.data.tokenResponse);
+            }
+            else if (interval) {
+                console.warn('[Token Check Worker] No token response provided, stopping the interval.');
+                clearInterval(interval);
+                interval = undefined;
+            }
+        }
+    };
+};
+/**
+ * Checks if the provided token is expired.
+ * If the token is not provided, it is considered expired.
+ * @param {TokenResponse} token - The token response to check.
+ * @returns {object} An object containing:
+ * - tokenIsExpired: A boolean indicating if the token is expired.
+ * - numberOfSecondsUntilExpiration: The number of seconds until the token expires, or 0 if it is expired.
+ */
+function isTokenExpired(token) {
+    const currentTime = Math.floor(Date.now() / 1000);
+    const tokenExpiresAt = token.issuedAt + (token.expiresIn ?? 1) * TOKEN_EXPIRY_MULTIPLIER;
+    const tokenExpiresInSeconds = tokenExpiresAt - currentTime;
+    console.log('[Token Check Worker] Token expires in', tokenExpiresInSeconds, 'seconds');
+    let tokenExpiresInSecondsWithBuffer = tokenExpiresInSeconds - BUFFER_BEFORE_EXPIRATION;
+    if (tokenExpiresInSecondsWithBuffer < 0) {
+        tokenExpiresInSecondsWithBuffer = 0;
+    }
+    const tokenIsExpired = tokenExpiresInSecondsWithBuffer === 0;
+    return {
+        tokenIsExpired,
+        numberOfSecondsUntilExpiration: tokenExpiresInSecondsWithBuffer,
+    };
+}
+/**
+ * This worker checks the token expiration at regular intervals.
+ * If the token is expired or missing, it will trigger a logout.
+ * @param {TokenResponse} tokenResponse - The token response to check.
+ */
+function init(tokenResponse) {
+    console.log('[Token Check Worker] Initializing token check worker...');
+    if (interval) {
+        clearInterval(interval);
+    }
+    interval = setInterval(() => {
+        const result = isTokenExpired(tokenResponse);
+        if (result.tokenIsExpired) {
+            console.log('[Token Check Worker] Token is expired or missing, triggering logout.');
+            // Trigger logout logic here, e.g., send a message to all connected ports
+            for (const port of ports) {
+                if (port) {
+                    port.postMessage({ command: 'logout' });
+                }
+            }
+            clearInterval(interval);
+            interval = undefined;
+            console.log('[Token Check Worker] Waiting for token refresh...');
+        }
+        else if (result.numberOfSecondsUntilExpiration <= BUFFER_BEFORE_EXPIRATION) {
+            console.log('[Token Check Worker] Token should be refreshed, but it is not expired yet.');
+            // Let all connected clients know that the token should be refreshed
+            for (const port of ports) {
+                if (port) {
+                    port.postMessage({
+                        command: 'refreshToken',
+                        secondsUntilLogout: result.numberOfSecondsUntilExpiration,
+                    });
+                }
+            }
+        }
+    }, VALIDATION_INTERVAL);
+}
+export {};