@umbraco-cms/backoffice 17.2.2 → 17.3.0-rc2

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

@@ -5,270 +5,30 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 import { UmbModalBaseElement } from '../../modal/index.js';
-import { UmbTextStyles } from '../../style/text-style.style.js';
 import { UMB_AUTH_CONTEXT } from '../auth.context.token.js';
-import { css, customElement, html, state, when } from '../../../../external/lit/index.js';
-import { UMB_SERVER_CONTEXT } from '../../server/index.js';
+import { customElement, html } from '../../../../external/lit/index.js';
+import '../components/umb-auth-view.element.js';
 let UmbAppAuthModalElement = class UmbAppAuthModalElement extends UmbModalBaseElement {
-    constructor() {
-        super(...arguments);
-        this._serverUrl = '';
-        this._loading = true;
-        this._allowLocalLogin = false;
-        this.#filterProvider = (provider) => {
-            if (this._allowLocalLogin) {
-                return true;
-            }
-            // Do not show any Umbraco auth provider if local login is disabled
-            return provider.forProviderName.toLowerCase() !== 'umbraco';
-        };
-        this.#onSubmit = async (providerOrManifest, loginHint) => {
-            try {
-                const authContext = await this.getContext(UMB_AUTH_CONTEXT);
-                if (!authContext) {
-                    throw new Error('Auth context not available');
-                }
-                const manifest = typeof providerOrManifest === 'string' ? undefined : providerOrManifest;
-                const providerName = typeof providerOrManifest === 'string' ? providerOrManifest : providerOrManifest.forProviderName;
-                // If the user is timed out, we do not want to lose the state, so avoid redirecting to the provider
-                // and instead just make the authorization request. In all other cases, we want to redirect to the provider.
-                const isTimedOut = this.data?.userLoginState === 'timedOut';
-                await authContext.makeAuthorizationRequest(providerName, isTimedOut ? false : true, loginHint, manifest);
-                const isAuthed = authContext.getIsAuthorized();
-                this.value = { success: isAuthed };
-                if (isAuthed) {
-                    this._submitModal();
-                }
-            }
-            catch (error) {
-                console.error('[AuthModal] Error submitting auth request', error);
-                this._error = error instanceof Error ? error.message : 'Unknown error (see console)';
-            }
-        };
-    }
-    get props() {
-        return {
-            userLoginState: this.data?.userLoginState ?? 'loggingIn',
-            onSubmit: this.#onSubmit.bind(this),
-        };
-    }
-    get headline() {
-        return this.data?.userLoginState === 'timedOut'
-            ? this.localize.term('login_instruction')
-            : this.localize.term([
-                'login_greeting0',
-                'login_greeting1',
-                'login_greeting2',
-                'login_greeting3',
-                'login_greeting4',
-                'login_greeting5',
-                'login_greeting6',
-            ][new Date().getDay()]);
-    }
-    firstUpdated() {
-        this.consumeContext(UMB_SERVER_CONTEXT, (context) => {
-            this._serverUrl = context?.getServerUrl() ?? '';
-            this.style.setProperty('--image', `url('${this._serverUrl}/umbraco/management/api/v1/security/back-office/graphics/login-background') no-repeat center center/cover`);
-            const serverConnection = context?.getServerConnection();
-            this.observe(serverConnection?.allowLocalLogin, (allowLocalLogin) => {
-                this._allowLocalLogin = allowLocalLogin ?? false;
-            });
-            this.observe(serverConnection?.isConnected, (isConnected) => {
-                this._loading = !isConnected;
+    #onSuccess = () => {
+        this.value = { success: true };
+        this._submitModal();
+    };
+    connectedCallback() {
+        super.connectedCallback();
+        // Close this modal when another tab restores the session via BroadcastChannel.
+        this.consumeContext(UMB_AUTH_CONTEXT, (ctx) => {
+            this.observe(ctx?.isAuthorized, (isAuthorized) => {
+                if (isAuthorized)
+                    this.#onSuccess();
             });
         });
     }
     render() {
-        return html `
-			<div id="layout">
-				<img
-					id="logo-on-background"
-					src="${this._serverUrl}/umbraco/management/api/v1/security/back-office/graphics/login-logo-alternative"
-					alt="Logo"
-					aria-hidden="true"
-					part="auth-logo-background" />
-				<div id="graphic" aria-hidden="true">
-					<img
-						part="auth-logo"
-						id="logo-on-image"
-						src="${this._serverUrl}/umbraco/management/api/v1/security/back-office/graphics/login-logo"
-						alt="Logo" />
-					<svg
-						id="curve-top"
-						width="1746"
-						height="1374"
-						viewBox="0 0 1746 1374"
-						fill="none"
-						xmlns="http://www.w3.org/2000/svg">
-						<path d="M8 1C61.5 722.5 206.5 1366.5 1745.5 1366.5" stroke="currentColor" stroke-width="15"></path>
-					</svg>
-					<svg
-						id="curve-bottom"
-						width="1364"
-						height="552"
-						viewBox="0 0 1364 552"
-						fill="none"
-						xmlns="http://www.w3.org/2000/svg">
-						<path d="M1 8C387 24 1109 11 1357 548" stroke="currentColor" stroke-width="15"></path>
-					</svg>
-				</div>
-				<div id="content-container">
-					<div id="content">
-						<header id="header">
-							<h1 id="greeting">${this.headline}</h1>
-						</header>
-						${this._error ? html `<p style="margin-top:0;color:red">${this._error}</p>` : ''}
-						${this.data?.userLoginState === 'timedOut'
-            ? html `<p style="margin-top:0">${this.localize.term('login_timeout')}</p>`
-            : ''}
-						${when(this._loading, () => html `
-								<div id="loader">
-									<uui-loader></uui-loader>
-								</div>
-							`, () => html ` <umb-extension-slot
-									id="providers"
-									type="authProvider"
-									default-element="umb-auth-provider-default"
-									.props=${this.props}
-									.filter=${this.#filterProvider}></umb-extension-slot>`)}
-					</div>
-				</div>
-			</div>
-		`;
+        return html `<umb-auth-view
+			.userLoginState=${this.data?.userLoginState ?? 'loggingIn'}
+			.onSuccess=${this.#onSuccess}></umb-auth-view>`;
     }
-    #filterProvider;
-    #onSubmit;
-    static { this.styles = [
-        UmbTextStyles,
-        css `
-			:host {
-				display: flex;
-				justify-content: center;
-				width: 100vw;
-
-				background: var(--uui-color-background, #f4f4f4);
-
-				--curves-color: var(--umb-login-curves-color, #f5c1bc);
-				--curves-display: var(--umb-login-curves-display, inline);
-			}
-
-			#layout {
-				display: flex;
-				justify-content: center;
-				padding: 32px 0 32px 32px;
-				width: 100vw;
-				max-width: 1920px;
-				height: calc(100vh - 64px);
-			}
-
-			#graphic {
-				position: relative;
-				width: 100%;
-				height: 100%;
-				background: var(--umb-login-image, var(--image));
-				border-radius: var(--umb-login-image-border-radius, 38px);
-				position: relative;
-				overflow: hidden;
-				color: var(--curves-color);
-			}
-
-			#graphic svg {
-				position: absolute;
-				width: 45%;
-				height: fit-content;
-				display: var(--curves-display);
-			}
-
-			#curve-top {
-				top: -9%;
-				right: -9%;
-			}
-
-			#curve-bottom {
-				bottom: -0.5%;
-				left: -0.1%;
-			}
-
-			#content-container {
-				background: var(--umb-login-content-background, none);
-				display: var(--umb-login-content-display, flex);
-				width: var(--umb-login-content-width, 100%);
-				height: var(--umb-login-content-height, 100%);
-				overflow: auto;
-				border-radius: var(--umb-login-content-border-radius, 0);
-				padding: 16px;
-				margin: auto;
-			}
-
-			#content {
-				max-width: 360px;
-				margin: auto;
-				width: 100%;
-			}
-
-			#logo-on-background {
-				display: none;
-			}
-
-			#logo-on-image,
-			#logo-on-background {
-				position: absolute;
-				top: 24px;
-				left: 24px;
-				height: 55px;
-			}
-
-			#header {
-				text-align: center;
-				display: flex;
-				flex-direction: column;
-				gap: var(--uui-size-space-5);
-			}
-
-			#greeting {
-				color: var(--umb-login-greeting-color, var(--uui-color-interactive-emphasis));
-				text-align: center;
-				font-weight: 400;
-				font-size: var(--umb-login-header-font-size-large, 4rem);
-				margin: 0 0 var(--uui-size-layout-1);
-				line-height: 1.2;
-			}
-
-			#providers {
-				display: flex;
-				flex-direction: column;
-				gap: var(--uui-size-space-5);
-			}
-
-			#loader {
-				display: flex;
-				justify-content: center;
-				align-items: center;
-			}
-
-			@media (max-width: 900px) {
-				#graphic {
-					display: none;
-				}
-				#logo-on-background {
-					display: block;
-				}
-			}
-		`,
-    ]; }
 };
-__decorate([
-    state()
-], UmbAppAuthModalElement.prototype, "_error", void 0);
-__decorate([
-    state()
-], UmbAppAuthModalElement.prototype, "_serverUrl", void 0);
-__decorate([
-    state()
-], UmbAppAuthModalElement.prototype, "_loading", void 0);
-__decorate([
-    state()
-], UmbAppAuthModalElement.prototype, "_allowLocalLogin", void 0);
 UmbAppAuthModalElement = __decorate([
     customElement('umb-app-auth-modal')
 ], UmbAppAuthModalElement);

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

@@ -33,7 +33,11 @@ let UmbAuthTimeoutModalElement = class UmbAuthTimeoutModalElement extends UmbMod
             }
             else {
                 clearInterval(this.#interval);
-                this.#handleLogout();
+                // Timer expired — notify the controller so it can call timeOut() and
+                // open the re-auth popup. Submit (not reject) so the catch block is
+                // not triggered.
+                this.data?.onExpired?.();
+                this.modalContext?.submit();
             }
         }, 1000);
     }

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

@@ -3,5 +3,7 @@ export type UmbModalAuthTimeoutConfig = {
     remainingTimeInSeconds: number;
     onLogout: () => void;
     onContinue: () => void;
+    /** Called when the countdown reaches zero without any user interaction. */
+    onExpired: () => void;
 };
 export declare const UMB_MODAL_AUTH_TIMEOUT: UmbModalToken<UmbModalAuthTimeoutConfig, never>;

package/dist-cms/packages/core/auth/umb-auth-client.d.ts

@@ -0,0 +1,49 @@
+export interface UmbAuthClientEndpoints {
+    authorizationEndpoint: string;
+    tokenEndpoint: string;
+    revocationEndpoint: string;
+    linkEndpoint: string;
+    linkKeyEndpoint: string;
+    unlinkEndpoint: string;
+}
+export interface UmbTokenEndpointResponse {
+    expiresIn: number;
+    issuedAt: number;
+}
+/**
+ * Minimal PKCE + token endpoint client.
+ * All token values are `[redacted]` with cookie auth — this client only tracks session timing.
+ * Zero localStorage usage.
+ */
+export declare class UmbAuthClient {
+    #private;
+    constructor(endpoints: UmbAuthClientEndpoints, redirectUri: string, clientId?: string, scope?: string);
+    get codeVerifier(): string | undefined;
+    get state(): string | undefined;
+    /**
+     * Generates PKCE parameters and builds the authorization URL.
+     */
+    buildAuthorizationUrl(identityProvider: string, usernameHint?: string): Promise<string>;
+    /**
+     * Exchanges an authorization code for tokens.
+     * Real tokens are stored in httpOnly cookies by the server.
+     * We only extract session timing from the response.
+     */
+    exchangeCode(code: string, codeVerifier: string): Promise<UmbTokenEndpointResponse | undefined>;
+    /**
+     * Refreshes the session using the httpOnly refresh token cookie.
+     * The `refresh_token` body parameter is `[redacted]` because the server's
+     * `HideBackOfficeTokensHandler` intercepts the request and swaps it for
+     * the real token from the httpOnly cookie. The parameter must be present
+     * (OpenIddict's pipeline requires it) but the value is ignored by the handler.
+     */
+    refreshToken(): Promise<UmbTokenEndpointResponse | undefined>;
+    /**
+     * Revokes the current session tokens via the revocation endpoint.
+     */
+    revokeToken(): Promise<void>;
+    /**
+     * Clears the in-memory PKCE state after login completes.
+     */
+    clearPkceState(): void;
+}

package/dist-cms/packages/core/auth/umb-auth-client.js

@@ -0,0 +1,172 @@
+const CHARSET = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
+function bufferToString(buffer) {
+    const state = [];
+    for (let i = 0; i < buffer.byteLength; i += 1) {
+        state.push(CHARSET[buffer[i] % CHARSET.length]);
+    }
+    return state.join('');
+}
+function urlSafeBase64(buffer) {
+    const bytes = new Uint8Array(buffer);
+    let binary = '';
+    for (let i = 0; i < bytes.byteLength; i++) {
+        binary += String.fromCharCode(bytes[i]);
+    }
+    return btoa(binary).replace(/\+/g, '-').replace(/\//g, '_').replace(/=/g, '');
+}
+function generateRandom(size) {
+    const buffer = new Uint8Array(size);
+    crypto.getRandomValues(buffer);
+    return bufferToString(buffer);
+}
+async function deriveChallenge(codeVerifier) {
+    const encoder = new TextEncoder();
+    const data = encoder.encode(codeVerifier);
+    const hash = await crypto.subtle.digest('SHA-256', data);
+    return urlSafeBase64(hash);
+}
+/**
+ * Minimal PKCE + token endpoint client.
+ * All token values are `[redacted]` with cookie auth — this client only tracks session timing.
+ * Zero localStorage usage.
+ */
+export class UmbAuthClient {
+    #endpoints;
+    #clientId;
+    #redirectUri;
+    #scope;
+    // PKCE state held in memory during login flow
+    #codeVerifier;
+    #state;
+    constructor(endpoints, redirectUri, clientId = 'umbraco-back-office', scope = 'offline_access') {
+        this.#endpoints = endpoints;
+        this.#redirectUri = redirectUri;
+        this.#clientId = clientId;
+        this.#scope = scope;
+    }
+    get codeVerifier() {
+        return this.#codeVerifier;
+    }
+    get state() {
+        return this.#state;
+    }
+    /**
+     * Generates PKCE parameters and builds the authorization URL.
+     */
+    async buildAuthorizationUrl(identityProvider, usernameHint) {
+        this.#codeVerifier = generateRandom(128);
+        this.#state = generateRandom(32);
+        const codeChallenge = await deriveChallenge(this.#codeVerifier);
+        /* eslint-disable @typescript-eslint/naming-convention */
+        // OAuth 2.0 / PKCE wire-format parameter names — must use snake_case per RFC 6749 / RFC 7636
+        const params = new URLSearchParams({
+            client_id: this.#clientId,
+            redirect_uri: this.#redirectUri,
+            scope: this.#scope,
+            response_type: 'code',
+            state: this.#state,
+            code_challenge: codeChallenge,
+            code_challenge_method: 'S256',
+            prompt: 'consent',
+            access_type: 'offline',
+        });
+        /* eslint-enable @typescript-eslint/naming-convention */
+        if (identityProvider !== 'Umbraco') {
+            params.set('identity_provider', identityProvider);
+        }
+        if (usernameHint) {
+            params.set('login_hint', usernameHint);
+        }
+        return `${this.#endpoints.authorizationEndpoint}?${params.toString()}`;
+    }
+    /**
+     * Exchanges an authorization code for tokens.
+     * Real tokens are stored in httpOnly cookies by the server.
+     * We only extract session timing from the response.
+     */
+    async exchangeCode(code, codeVerifier) {
+        /* eslint-disable @typescript-eslint/naming-convention */
+        const body = new URLSearchParams({
+            client_id: this.#clientId,
+            redirect_uri: this.#redirectUri,
+            grant_type: 'authorization_code',
+            code,
+            code_verifier: codeVerifier,
+        });
+        /* eslint-enable @typescript-eslint/naming-convention */
+        return this.#performTokenRequest(body);
+    }
+    /**
+     * Refreshes the session using the httpOnly refresh token cookie.
+     * The `refresh_token` body parameter is `[redacted]` because the server's
+     * `HideBackOfficeTokensHandler` intercepts the request and swaps it for
+     * the real token from the httpOnly cookie. The parameter must be present
+     * (OpenIddict's pipeline requires it) but the value is ignored by the handler.
+     */
+    async refreshToken() {
+        /* eslint-disable @typescript-eslint/naming-convention */
+        const body = new URLSearchParams({
+            client_id: this.#clientId,
+            redirect_uri: this.#redirectUri,
+            grant_type: 'refresh_token',
+            refresh_token: '[redacted]',
+        });
+        /* eslint-enable @typescript-eslint/naming-convention */
+        return this.#performTokenRequest(body);
+    }
+    /**
+     * Revokes the current session tokens via the revocation endpoint.
+     */
+    async revokeToken() {
+        /* eslint-disable @typescript-eslint/naming-convention */
+        const body = new URLSearchParams({
+            client_id: this.#clientId,
+            token: '[redacted]',
+            token_type_hint: 'access_token',
+        });
+        /* eslint-enable @typescript-eslint/naming-convention */
+        try {
+            await fetch(this.#endpoints.revocationEndpoint, {
+                method: 'POST',
+                credentials: 'include',
+                headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
+                body: body.toString(),
+            });
+        }
+        catch {
+            // Revocation is best-effort
+        }
+    }
+    /**
+     * Clears the in-memory PKCE state after login completes.
+     */
+    clearPkceState() {
+        this.#codeVerifier = undefined;
+        this.#state = undefined;
+    }
+    async #performTokenRequest(body) {
+        try {
+            const response = await fetch(this.#endpoints.tokenEndpoint, {
+                method: 'POST',
+                credentials: 'include',
+                headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
+                body: body.toString(),
+            });
+            if (!response.ok) {
+                console.error('[UmbAuthClient] Token request failed:', response.status, response.statusText);
+                return undefined;
+            }
+            const json = await response.json();
+            const expiresIn = json.expires_in ? parseInt(String(json.expires_in), 10) : 0;
+            if (expiresIn === 0) {
+                console.warn('[UmbAuthClient] Token response missing or zero expires_in — session timing may be inaccurate');
+            }
+            const issuedAt = json.issued_at ?? Math.floor(Date.now() / 1000);
+            return { expiresIn, issuedAt };
+        }
+        catch (error) {
+            console.error('[UmbAuthClient] Token request error:', error);
+            return undefined;
+        }
+    }
+}