@umbraco-cms/backoffice 17.4.0-rc2 → 18.0.0-beta1

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

@@ -40,6 +40,11 @@ export class UmbAuthContext extends UmbContextBase {
     #authorizationSignal;
     // Track clients that have been configured to prevent duplicate interceptor binding
     #configuredClients;
+    // Lazily initialised on the first configureClient() call. Owns the singleton
+    // UmbAuthSignalerContext provided on the host (`<umb-app>`), so we MUST share
+    // one instance across every client we configure — instantiating a new controller
+    // per call would re-provide the signaler and stack listeners.
+    #interceptorController;
     // Endpoint URLs
     #linkEndpoint;
     #linkKeyEndpoint;
@@ -123,20 +128,26 @@ export class UmbAuthContext extends UmbContextBase {
         this.#channel.onmessage = (evt) => {
             switch (evt.data?.type) {
                 case 'authorized': {
-                    // Set session locally — do NOT call #updateSession which would re-broadcast
-                    const accessTokenExpiresAt = evt.data.issuedAt + evt.data.expiresIn;
-                    const expiresAt = evt.data.issuedAt + evt.data.expiresIn * TOKEN_EXPIRY_MULTIPLIER;
-                    this.#session.setValue({ accessTokenExpiresAt, expiresAt });
-                    this.#isAuthorized.setValue(true);
+                    // Apply locally — do NOT call #updateSession which would re-broadcast.
+                    this.#setSessionLocally(evt.data.expiresIn, evt.data.issuedAt);
                     this.#authorizationSignal.next();
                     break;
                 }
                 case 'sessionUpdate':
-                    this.#session.setValue({
-                        accessTokenExpiresAt: evt.data.accessTokenExpiresAt,
-                        expiresAt: evt.data.expiresAt,
-                    });
-                    this.#isAuthorized.setValue(true);
+                    // Peer broadcast already-computed timestamps, so set the session
+                    // directly. We still go through the `#inSessionUpdateCallback` guard
+                    // so observers triggered re-entrantly skip a redundant /token call.
+                    this.#inSessionUpdateCallback = true;
+                    try {
+                        this.#session.setValue({
+                            accessTokenExpiresAt: evt.data.accessTokenExpiresAt,
+                            expiresAt: evt.data.expiresAt,
+                        });
+                        this.#isAuthorized.setValue(true);
+                    }
+                    finally {
+                        this.#inSessionUpdateCallback = false;
+                    }
                     break;
                 case 'sessionCleared':
                     this.#session.setValue(undefined);
@@ -174,6 +185,9 @@ export class UmbAuthContext extends UmbContextBase {
         });
     }
     destroy() {
+        // Tear down any in-flight popup auth flow so its window-level message listener
+        // and the closed-poll interval don't leak past this context's lifetime.
+        this.#popupCleanup?.();
         super.destroy();
         this.#channel.close();
     }
@@ -222,30 +236,32 @@ export class UmbAuthContext extends UmbContextBase {
         };
         window.addEventListener('message', pkceHandler);
         // Wait for the popup to complete via BroadcastChannel.
-        // Resolves when authorized; also resolves (no-op) if the popup is closed/cancelled.
+        // The Promise resolves once cleanup runs — whether triggered by an `authorized`
+        // broadcast, the popup being closed/cancelled, a new auth flow superseding this
+        // one, or the auth context being destroyed. resolve() is parked inside cleanup
+        // so every termination path is observable to the awaiter.
         return new Promise((resolve) => {
             const cleanup = () => {
                 clearInterval(closedPoll);
                 this.#channel.removeEventListener('message', handler);
                 window.removeEventListener('message', pkceHandler);
                 this.#popupCleanup = undefined;
+                resolve();
             };
             this.#popupCleanup = cleanup;
             const handler = (evt) => {
                 if (evt.data?.type === 'authorized') {
-                    cleanup();
                     this.#client.clearPkceState();
                     this.#authWindowProxy?.close();
-                    resolve();
+                    cleanup();
                 }
             };
             this.#channel.addEventListener('message', handler);
             // Poll for popup closed (user cancelled or closed the window)
             const closedPoll = setInterval(() => {
                 if (this.#authWindowProxy?.closed) {
-                    cleanup();
                     this.#client.clearPkceState();
-                    resolve();
+                    cleanup();
                 }
             }, 500);
         });
@@ -262,28 +278,30 @@ export class UmbAuthContext extends UmbContextBase {
         if (!code) {
             return null;
         }
-        // Try to get PKCE state — first from the parent window (popup flow), then from sessionStorage (redirect flow)
+        // Try to get PKCE state. Check sessionStorage first — it's synchronous and covers
+        // the redirect flow (where the same tab navigated to the IDP and back). Only fall
+        // back to asking window.opener if sessionStorage didn't have a matching entry.
+        // The previous order hung for the full opener-postMessage timeout whenever
+        // `oauth_complete` happened to load with a non-OAuth window.opener (which is set
+        // for ANY window.open target, not only OAuth popups).
         let codeVerifier;
-        if (window.opener) {
-            // Popup flow: request code_verifier from parent via postMessage
-            codeVerifier = await this.#requestCodeVerifierFromOpener(state);
-        }
-        if (!codeVerifier) {
-            // Redirect flow: read from sessionStorage
-            const pkceData = sessionStorage.getItem('umb:pkce');
-            if (pkceData) {
-                try {
-                    const parsed = JSON.parse(pkceData);
-                    if (parsed.state === state) {
-                        codeVerifier = parsed.codeVerifier;
-                        sessionStorage.removeItem('umb:pkce');
-                    }
-                }
-                catch {
-                    // Ignore parse errors
+        const pkceData = sessionStorage.getItem('umb:pkce');
+        if (pkceData) {
+            try {
+                const parsed = JSON.parse(pkceData);
+                if (parsed.state === state) {
+                    codeVerifier = parsed.codeVerifier;
                     sessionStorage.removeItem('umb:pkce');
                 }
             }
+            catch {
+                // Ignore parse errors
+                sessionStorage.removeItem('umb:pkce');
+            }
+        }
+        if (!codeVerifier && window.opener) {
+            // Popup flow: request code_verifier from parent via postMessage.
+            codeVerifier = await this.#requestCodeVerifierFromOpener(state);
         }
         if (!codeVerifier) {
             console.error('[UmbAuthContext] No code_verifier available for authorization code exchange');
@@ -355,18 +373,12 @@ export class UmbAuthContext extends UmbContextBase {
      *   const token = await authContext.getLatestToken();
      *   const result = await fetch('https://my-api.com', { headers: { Authorization: `Bearer ${token}` } });
      * ```
-     * @deprecated Use {@link configureClient} for `@hey-api/openapi-ts` clients or {@link getOpenApiConfiguration} for manual fetch calls. With cookie-based auth this always returns `'[redacted]'`. Scheduled for removal in Umbraco 19.
      * @see {@link configureClient} for automatic token handling with `@hey-api/openapi-ts` clients.
      * @see {@link getOpenApiConfiguration} for manual fetch calls with cookie-based auth.
      * @memberof UmbAuthContext
      * @returns The latest token from the Management API
      */
     async getLatestToken() {
-        new UmbDeprecation({
-            deprecated: 'getLatestToken',
-            solution: 'Use configureClient for @hey-api/openapi-ts clients or getOpenApiConfiguration for manual fetch calls. With cookie-based auth this always returns "[redacted]".',
-            removeInVersion: '19.0.0',
-        }).warn();
         await this.#ensureTokenReady();
         return '[redacted]';
     }
@@ -455,14 +467,11 @@ export class UmbAuthContext extends UmbContextBase {
         }
         if (!navigator.locks)
             return;
-        const state = await navigator.locks.query();
-        if (state.held?.some((l) => l.name === 'umb:token-refresh')) {
-            // A refresh is in progress in another tab — queue behind it so we send
-            // requests with the new cookie rather than the soon-to-be-revoked one.
-            await navigator.locks.request('umb:token-refresh', async () => {
-                // No-op: we only need to wait for the ongoing refresh to finish.
-            });
-        }
+        // Always queue behind the refresh lock with a no-op callback. If the lock is
+        // free we acquire it immediately and resolve; if a peer tab holds it we wait
+        // behind that holder. This avoids a race window where querying the lock state
+        // could return "free" microseconds before another tab acquires it.
+        await navigator.locks.request('umb:token-refresh', () => Promise.resolve());
     }
     /**
      * Clears the in-memory session state.
@@ -540,20 +549,30 @@ export class UmbAuthContext extends UmbContextBase {
         return {
             base: this.#serverUrl,
             credentials: 'include',
-            token: () => Promise.resolve('[redacted]'),
+            token: this.getLatestToken.bind(this),
         };
     }
     /**
-     * Configures a `@hey-api/openapi-ts` client for authenticated API calls.
-     * Sets baseUrl, credentials, auth header, and binds the default response
-     * interceptors (401 retry, error handling, notifications).
+     * Configures a `@hey-api/openapi-ts` generated client for authenticated API calls.
+     *
+     * Sets `baseUrl`, `credentials`, and the `auth` callback (cookie-based with
+     * automatic token refresh via {@link getLatestToken}), and binds the default
+     * response interceptors (401 retry, problem-details error notifications, etc.)
+     * to the client.
+     *
+     * The same auth context owns a single {@link UmbApiInterceptorController} for
+     * the lifetime of the host (`<umb-app>`), so it's safe to call this method for
+     * multiple clients (the core's {@link umbHttpClient} *and* an extension's own
+     * generated client) without registering duplicate auth-signaler contexts.
+     *
      * @example
      * ```js
      * const authContext = await this.getContext(UMB_AUTH_CONTEXT);
      * authContext.configureClient(myClient);
      * // Now myClient automatically includes auth headers and interceptors
      * ```
-     * @param client A `@hey-api/openapi-ts` client instance.
+     * @param client A `@hey-api/openapi-ts` client instance — either {@link umbHttpClient}
+     * or one regenerated by an extension package against its own OpenAPI document.
      */
     configureClient(client) {
         if (this.#configuredClients.has(client))
@@ -562,15 +581,16 @@ export class UmbAuthContext extends UmbContextBase {
         client.setConfig({
             baseUrl: this.#serverUrl,
             credentials: 'include',
-            auth: async () => {
-                await this.#ensureTokenReady();
-                return '[redacted]';
-            },
+            auth: this.getLatestToken.bind(this),
         });
-        // Controller self-registers on the host element via UmbControllerBase constructor,
-        // so the anonymous reference is intentional — lifecycle is managed by the host.
-        // Note: _host must be a proper UmbControllerHost (element host) for correct cleanup.
-        new UmbApiInterceptorController(this._host).bindDefaultInterceptors(client);
+        // Lazy single instance — see #interceptorController field comment. Controller
+        // self-registers on the host element via UmbControllerBase, so its lifecycle is
+        // managed by the host. `_host` must be a proper UmbControllerHost.
+        this.#interceptorController ??= new UmbApiInterceptorController(this._host);
+        // Each generated client is structurally identical but TypeScript treats them as
+        // distinct generic instantiations. Cast at the boundary; the controller's own
+        // signature stays strictly typed against `umbHttpClient`.
+        this.#interceptorController.bindDefaultInterceptors(client);
     }
     /**
      * Sets the auth context as initialized, which means that the auth context is ready to be used.
@@ -631,13 +651,16 @@ export class UmbAuthContext extends UmbContextBase {
         const request = new Request(this.#unlinkEndpoint, {
             method: 'POST',
             credentials: 'include',
-            headers: { 'Content-Type': 'application/json', Authorization: 'Bearer [redacted]' },
+            headers: { 'Content-Type': 'application/json', Authorization: `Bearer ${await this.getLatestToken()}` },
             body: JSON.stringify({ loginProvider, providerKey }),
         });
         const result = await fetch(request);
         if (!result.ok) {
-            const error = await result.json();
-            throw error;
+            // Wrap the parsed body in a real Error so consumers using `instanceof Error`
+            // or expecting a stack trace get sane behaviour. The original problem-details
+            // payload is exposed on `.cause` for callers that want the structured fields.
+            const detail = await result.json().catch(() => undefined);
+            throw new Error(`Failed to unlink login (${result.status} ${result.statusText})`, { cause: detail });
         }
         await this.signOut();
         return true;
@@ -708,10 +731,13 @@ export class UmbAuthContext extends UmbContextBase {
                 resolve(undefined);
                 return;
             }
+            // Short timeout: a real OAuth popup parent responds within milliseconds. Any
+            // longer is just a hang for the unrelated-opener case (e.g. an arbitrary
+            // `window.open(...)` target that incidentally landed on `oauth_complete`).
             const timeout = setTimeout(() => {
                 window.removeEventListener('message', handler);
                 resolve(undefined);
-            }, 5000);
+            }, 1500);
             const handler = (evt) => {
                 if (evt.origin !== window.location.origin)
                     return;
@@ -730,7 +756,7 @@ export class UmbAuthContext extends UmbContextBase {
         const request = await fetch(`${this.#linkKeyEndpoint}?provider=${provider}`, {
             credentials: 'include',
             headers: {
-                Authorization: 'Bearer [redacted]',
+                Authorization: `Bearer ${await this.getLatestToken()}`,
                 'Content-Type': 'application/json',
             },
         });

package/dist-cms/packages/core/auth/components/umb-auth-view.element.js

@@ -9,6 +9,18 @@ import { UmbTextStyles } from '../../style/index.js';
 import { css, customElement, html, property, state, when } from '../../../../external/lit/index.js';
 import { UMB_SERVER_CONTEXT } from '../../server/index.js';
 import { UmbLitElement } from '../../lit-element/index.js';
+import { UmbDeprecation } from '../../utils/index.js';
+const warnedLegacyKeys = new Set();
+const umbWarnLegacyGreetingKey = (legacyKey, canonicalKey) => {
+    if (warnedLegacyKeys.has(legacyKey))
+        return;
+    warnedLegacyKeys.add(legacyKey);
+    new UmbDeprecation({
+        deprecated: `Translation key "${legacyKey}"`,
+        removeInVersion: '20.0.0',
+        solution: `Use "${canonicalKey}" instead. See https://github.com/umbraco/Umbraco-CMS/issues/20082`,
+    }).warn();
+};
 /**
  * A reusable auth login view that renders the full login screen (background, logo, greeting, providers).
  * Can be used standalone as a page or composed inside a modal wrapper.
@@ -57,17 +69,21 @@ let UmbAuthViewElement = class UmbAuthViewElement extends UmbLitElement {
         };
     }
     get headline() {
-        return this.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()]);
+        if (this.userLoginState === 'timedOut') {
+            return this.localize.term('login_instruction');
+        }
+        const day = new Date().getDay();
+        const legacyKey = `auth_greeting${day}`;
+        const canonicalKey = `login_greeting${day}`;
+        // Honour translation packages still shipping the legacy `auth_greeting*` namespace,
+        // otherwise use the canonical `login_greeting*` key. See #20082.
+        // TODO (V20): remove the auth_greeting* fallback and the warning helper above; only
+        // login_greeting* remains.
+        if (this.localize.termOrDefault(legacyKey, null) !== null) {
+            umbWarnLegacyGreetingKey(legacyKey, canonicalKey);
+            return this.localize.term(legacyKey);
+        }
+        return this.localize.term(canonicalKey);
     }
     firstUpdated() {
         this.consumeContext(UMB_SERVER_CONTEXT, (context) => {

package/dist-cms/packages/core/backend-api/client/client.gen.js

@@ -34,125 +34,139 @@ export const createClient = (config = {}) => {
         if (opts.body === undefined || opts.serializedBody === '') {
             opts.headers.delete('Content-Type');
         }
-        const url = buildUrl(opts);
-        return { opts, url };
+        const resolvedOpts = opts;
+        const url = buildUrl(resolvedOpts);
+        return { opts: resolvedOpts, url };
     };
     const request = async (options) => {
-        // @ts-expect-error
-        const { opts, url } = await beforeRequest(options);
-        const requestInit = {
-            redirect: 'follow',
-            ...opts,
-            body: getValidRequestBody(opts),
-        };
-        let request = new Request(url, requestInit);
-        for (const fn of interceptors.request.fns) {
-            if (fn) {
-                request = await fn(request, opts);
+        const throwOnError = options.throwOnError ?? _config.throwOnError;
+        const responseStyle = options.responseStyle ?? _config.responseStyle;
+        let request;
+        let response;
+        try {
+            const { opts, url } = await beforeRequest(options);
+            const requestInit = {
+                redirect: 'follow',
+                ...opts,
+                body: getValidRequestBody(opts),
+            };
+            request = new Request(url, requestInit);
+            for (const fn of interceptors.request.fns) {
+                if (fn) {
+                    request = await fn(request, opts);
+                }
             }
-        }
-        // fetch must be assigned here, otherwise it would throw the error:
-        // TypeError: Failed to execute 'fetch' on 'Window': Illegal invocation
-        const _fetch = opts.fetch;
-        let response = await _fetch(request);
-        for (const fn of interceptors.response.fns) {
-            if (fn) {
-                response = await fn(response, request, opts);
+            // fetch must be assigned here, otherwise it would throw the error:
+            // TypeError: Failed to execute 'fetch' on 'Window': Illegal invocation
+            const _fetch = opts.fetch;
+            response = await _fetch(request);
+            for (const fn of interceptors.response.fns) {
+                if (fn) {
+                    response = await fn(response, request, opts);
+                }
             }
-        }
-        const result = {
-            request,
-            response,
-        };
-        if (response.ok) {
-            const parseAs = (opts.parseAs === 'auto'
-                ? getParseAs(response.headers.get('Content-Type'))
-                : opts.parseAs) ?? 'json';
-            if (response.status === 204 ||
-                response.headers.get('Content-Length') === '0') {
-                let emptyData;
+            const result = {
+                request,
+                response,
+            };
+            if (response.ok) {
+                const parseAs = (opts.parseAs === 'auto'
+                    ? getParseAs(response.headers.get('Content-Type'))
+                    : opts.parseAs) ?? 'json';
+                if (response.status === 204 || response.headers.get('Content-Length') === '0') {
+                    let emptyData;
+                    switch (parseAs) {
+                        case 'arrayBuffer':
+                        case 'blob':
+                        case 'text':
+                            emptyData = await response[parseAs]();
+                            break;
+                        case 'formData':
+                            emptyData = new FormData();
+                            break;
+                        case 'stream':
+                            emptyData = response.body;
+                            break;
+                        case 'json':
+                        default:
+                            emptyData = {};
+                            break;
+                    }
+                    return opts.responseStyle === 'data'
+                        ? emptyData
+                        : {
+                            data: emptyData,
+                            ...result,
+                        };
+                }
+                let data;
                 switch (parseAs) {
                     case 'arrayBuffer':
                     case 'blob':
+                    case 'formData':
                     case 'text':
-                        emptyData = await response[parseAs]();
+                        data = await response[parseAs]();
                         break;
-                    case 'formData':
-                        emptyData = new FormData();
+                    case 'json': {
+                        // Some servers return 200 with no Content-Length and empty body.
+                        // response.json() would throw; read as text and parse if non-empty.
+                        const text = await response.text();
+                        data = text ? JSON.parse(text) : {};
                         break;
+                    }
                     case 'stream':
-                        emptyData = response.body;
-                        break;
-                    case 'json':
-                    default:
-                        emptyData = {};
-                        break;
+                        return opts.responseStyle === 'data'
+                            ? response.body
+                            : {
+                                data: response.body,
+                                ...result,
+                            };
+                }
+                if (parseAs === 'json') {
+                    if (opts.responseValidator) {
+                        await opts.responseValidator(data);
+                    }
+                    if (opts.responseTransformer) {
+                        data = await opts.responseTransformer(data);
+                    }
                 }
                 return opts.responseStyle === 'data'
-                    ? emptyData
+                    ? data
                     : {
-                        data: emptyData,
+                        data,
                         ...result,
                     };
             }
-            let data;
-            switch (parseAs) {
-                case 'arrayBuffer':
-                case 'blob':
-                case 'formData':
-                case 'json':
-                case 'text':
-                    data = await response[parseAs]();
-                    break;
-                case 'stream':
-                    return opts.responseStyle === 'data'
-                        ? response.body
-                        : {
-                            data: response.body,
-                            ...result,
-                        };
+            const textError = await response.text();
+            let jsonError;
+            try {
+                jsonError = JSON.parse(textError);
             }
-            if (parseAs === 'json') {
-                if (opts.responseValidator) {
-                    await opts.responseValidator(data);
-                }
-                if (opts.responseTransformer) {
-                    data = await opts.responseTransformer(data);
+            catch {
+                // noop
+            }
+            throw jsonError ?? textError;
+        }
+        catch (error) {
+            let finalError = error;
+            for (const fn of interceptors.error.fns) {
+                if (fn) {
+                    finalError = await fn(finalError, response, request, options);
                 }
             }
-            return opts.responseStyle === 'data'
-                ? data
+            finalError = finalError || {};
+            if (throwOnError) {
+                throw finalError;
+            }
+            // TODO: we probably want to return error and improve types
+            return responseStyle === 'data'
+                ? undefined
                 : {
-                    data,
-                    ...result,
+                    error: finalError,
+                    request,
+                    response,
                 };
         }
-        const textError = await response.text();
-        let jsonError;
-        try {
-            jsonError = JSON.parse(textError);
-        }
-        catch {
-            // noop
-        }
-        const error = jsonError ?? textError;
-        let finalError = error;
-        for (const fn of interceptors.error.fns) {
-            if (fn) {
-                finalError = (await fn(error, response, request, opts));
-            }
-        }
-        finalError = finalError || {};
-        if (opts.throwOnError) {
-            throw finalError;
-        }
-        // TODO: we probably want to return error and improve types
-        return opts.responseStyle === 'data'
-            ? undefined
-            : {
-                error: finalError,
-                ...result,
-            };
     };
     const makeMethodFn = (method) => (options) => request({ ...options, method });
     const makeSseFn = (method) => async (options) => {
@@ -160,7 +174,6 @@ export const createClient = (config = {}) => {
         return createSseClient({
             ...opts,
             body: opts.body,
-            headers: opts.headers,
             method,
             onRequest: async (url, init) => {
                 let request = new Request(url, init);
@@ -171,11 +184,13 @@ export const createClient = (config = {}) => {
                 }
                 return request;
             },
+            serializedBody: getValidRequestBody(opts),
             url,
         });
     };
+    const _buildUrl = (options) => buildUrl({ ..._config, ...options });
     return {
-        buildUrl,
+        buildUrl: _buildUrl,
         connect: makeMethodFn('CONNECT'),
         delete: makeMethodFn('DELETE'),
         get: makeMethodFn('GET'),

package/dist-cms/packages/core/backend-api/client/index.d.ts

@@ -4,5 +4,5 @@ export { formDataBodySerializer, jsonBodySerializer, urlSearchParamsBodySerializ
 export { buildClientParams } from '../core/params.gen.js';
 export { serializeQueryKeyValue } from '../core/queryKeySerializer.gen.js';
 export { createClient } from './client.gen.js';
-export type { Client, ClientOptions, Config, CreateClientConfig, Options, OptionsLegacyParser, RequestOptions, RequestResult, ResolvedRequestOptions, ResponseStyle, TDataShape, } from './types.gen.js';
+export type { Client, ClientOptions, Config, CreateClientConfig, Options, RequestOptions, RequestResult, ResolvedRequestOptions, ResponseStyle, TDataShape, } from './types.gen.js';
 export { createConfig, mergeHeaders } from './utils.gen.js';