@xh/hoist 73.0.0-SNAPSHOT.1746837312368 → 73.0.0-SNAPSHOT.1747058765265

package/CHANGELOG.md

@@ -31,6 +31,10 @@
   expand vertically when used in a `Toolbar` or other space-constrained, single-line layout.
 * Updated `FormModel` to support `persistWith` for storing and recalling its values, including
   developer options to persist all or a provided subset of fields.
+* `BaseOAuthClientConfig` now supports a new `reloginEnabled` property. Use this property to
+   allow the client to do a potentially interactive popup login during the session to re-establish
+   the login.  This is especially useful to allow recovery from expired or invalidated refresh
+   tokens.
 
 ### 🐞 Bug Fixes
 

package/appcontainer/AppContainerModel.ts

@@ -106,6 +106,16 @@ export class AppContainerModel extends HoistModel {
      */
     @bindable initializingLoadMaskMessage: ReactNode;
 
+    /**
+     * The last interactive login in the app. Hoist's security package will mark the last
+     * time spent during user interactive login.
+     *
+     * Used by `Promise.track`, to ensure this time is not counted in any elapsed time tracking
+     * for the app.
+     * @internal
+     */
+    lastRelogin: {started: number; completed: number} = null;
+
     /**
      * Main entry point. Initialize and render application code.
      */

package/build/types/appcontainer/AppContainerModel.d.ts

@@ -46,6 +46,18 @@ export declare class AppContainerModel extends HoistModel {
      * Update within `AppModel.initAsync()` to relay app-specific initialization status.
      */
     initializingLoadMaskMessage: ReactNode;
+    /**
+     * The last interactive login in the app. Hoist's security package will mark the last
+     * time spent during user interactive login.
+     *
+     * Used by `Promise.track`, to ensure this time is not counted in any elapsed time tracking
+     * for the app.
+     * @internal
+     */
+    lastRelogin: {
+        started: number;
+        completed: number;
+    };
     /**
      * Main entry point. Initialize and render application code.
      */

package/build/types/core/types/AppState.d.ts

@@ -15,5 +15,5 @@ export declare const AppState: Readonly<{
 export type AppState = (typeof AppState)[keyof typeof AppState];
 export interface AppSuspendData {
     message?: string;
-    reason: 'IDLE' | 'SERVER_FORCE' | 'APP_UPDATE';
+    reason: 'IDLE' | 'SERVER_FORCE' | 'APP_UPDATE' | 'AUTH_EXPIRED';
 }

package/build/types/mobile/cmp/navigator/NavigatorModel.d.ts

@@ -27,10 +27,6 @@ export interface NavigatorConfig {
      * See enum for description of supported modes.
      */
     refreshMode?: RefreshMode;
-    /**
-     * Base route name for this navigator, with the route for each page being "[route]/[page.id]".
-     */
-    route?: string;
 }
 /**
  * Model for handling stack-based navigation between pages.
@@ -38,8 +34,6 @@ export interface NavigatorConfig {
  */
 export declare class NavigatorModel extends HoistModel {
     disableAppRefreshButton: boolean;
-    readonly route: string;
-    readonly routePrefix: string;
     stack: PageModel[];
     pages: PageConfig[];
     track: boolean;
@@ -55,7 +49,7 @@ export declare class NavigatorModel extends HoistModel {
     get activePageIdx(): number;
     get allowSlideNext(): boolean;
     get allowSlidePrev(): boolean;
-    constructor({ pages, route, track, pullDownToRefresh, transitionMs, renderMode, refreshMode }: NavigatorConfig);
+    constructor({ pages, track, pullDownToRefresh, transitionMs, renderMode, refreshMode }: NavigatorConfig);
     /**
      * @param callback - function to execute (once) after the next page transition.
      */

package/build/types/security/BaseOAuthClient.d.ts

@@ -49,6 +49,22 @@ export interface BaseOAuthClientConfig<S extends AccessTokenSpec> {
      * other metadata required by the underlying provider.
      */
     accessTokens?: Record<string, S>;
+    /**
+     * True to allow this client to try to re-login interactively (via pop-up) if tokens begin
+     * failing to load due to specific provider exceptions indicating user interaction is required.
+     * This can happen, for example, if a token expires and the refresh token is expired or
+     * invalidated during the lifetime of the client.  Default is false and retry will not be
+     * attempted.
+     */
+    reloginEnabled?: boolean;
+    /**
+     * Maximum time for (interactive) re-login.
+     *
+     * Set to a reasonably fixed amount of time, to allow user to type in password and complete
+     * MFA, but not so long as to allow a problematic build-up of application requests.
+     * Default 60 seconds;
+     */
+    reloginTimeoutSecs?: number;
 }
 /**
  * Implementations of this class coordinate OAuth-based login and token provision. Apps can use a
@@ -70,6 +86,8 @@ export declare abstract class BaseOAuthClient<C extends BaseOAuthClientConfig<S>
     private timer;
     private lastRefreshAttempt;
     private TIMER_INTERVAL;
+    private pendingRelogin;
+    private lastRelogin;
     constructor(config: C);
     /**
      * Main entry point for this object.
@@ -116,6 +134,7 @@ export declare abstract class BaseOAuthClient<C extends BaseOAuthClientConfig<S>
     protected abstract fetchIdTokenAsync(useCache: boolean): Promise<Token>;
     protected abstract fetchAccessTokenAsync(spec: S, useCache: boolean): Promise<Token>;
     protected abstract doLogoutAsync(): Promise<void>;
+    protected abstract interactiveLoginNeeded(exception: unknown): boolean;
     protected get redirectUrl(): string;
     protected get postLogoutRedirectUrl(): string;
     protected get loginMethod(): LoginMethod;
@@ -145,6 +164,9 @@ export declare abstract class BaseOAuthClient<C extends BaseOAuthClientConfig<S>
     protected getLocalStorage(key: string, defaultValue?: any): any;
     protected setLocalStorage(key: string, value: any): void;
     private fetchIdTokenSafeAsync;
+    private getWithRetry;
+    private rethrowWrapped;
+    private getLoginTask;
     private onTimerAsync;
     private logTokensDebug;
 }

package/build/types/security/authzero/AuthZeroClient.d.ts

@@ -49,6 +49,7 @@ export declare class AuthZeroClient extends BaseOAuthClient<AuthZeroClientConfig
     protected fetchIdTokenAsync(useCache?: boolean): Promise<Token>;
     protected fetchAccessTokenAsync(spec: AuthZeroTokenSpec, useCache?: boolean): Promise<Token>;
     protected doLogoutAsync(): Promise<void>;
+    protected interactiveLoginNeeded(exception: unknown): boolean;
     private createClient;
     private get loginScope();
     private returningFromRedirect;

package/build/types/security/msal/MsalClient.d.ts

@@ -77,10 +77,9 @@ export interface MsalTokenSpec extends AccessTokenSpec {
  * Also see this doc re. use of blankUrl as redirectUri for all "silent" token requests:
  * https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/lib/msal-browser/docs/errors.md#issues-caused-by-the-redirecturi-page
  *
- * TODO: The handling of `ssoSilent` and `initRefreshTokenExpirationOffsetSecs` in this library
- *   require 3rd party cookies to be enabled in the browser so that MSAL can load contact in a
- *   hidden iFrame  If its *not* enabled, we may be doing extra work.  Consider checking 3rd party
- *   cookie support and adding conditional behavior?
+ * Important note: The handling of `ssoSilent` and `initRefreshTokenExpirationOffsetSecs` in this
+ *    library require 3rd party cookies to be enabled in the browser so that MSAL can load contact
+ *    in a hidden iFrame.
  */
 export declare class MsalClient extends BaseOAuthClient<MsalClientConfig, MsalTokenSpec> {
     private client;
@@ -96,6 +95,7 @@ export declare class MsalClient extends BaseOAuthClient<MsalClientConfig, MsalTo
     protected fetchIdTokenAsync(useCache?: boolean): Promise<Token>;
     protected fetchAccessTokenAsync(spec: MsalTokenSpec, useCache?: boolean): Promise<Token>;
     protected doLogoutAsync(): Promise<void>;
+    protected interactiveLoginNeeded(exception: unknown): boolean;
     getFormattedTelemetry(): PlainObject;
     enableTelemetry(): void;
     disableTelemetry(): void;

package/cmp/tab/TabContainerModel.ts

@@ -144,10 +144,10 @@ export class TabContainerModel extends HoistModel implements Persistable<{active
         this.refreshContextModel.xhImpl = xhImpl;
 
         if (route) {
-            // if (XH.isMobileApp) {
-            //     this.logWarn('TabContainer routing is not supported for mobile applications.');
-            //     return;
-            // }
+            if (XH.isMobileApp) {
+                this.logWarn('TabContainer routing is not supported for mobile applications.');
+                return;
+            }
 
             this.addReaction({
                 track: () => XH.routerState,

package/core/types/AppState.ts

@@ -28,5 +28,5 @@ export type AppState = (typeof AppState)[keyof typeof AppState];
 
 export interface AppSuspendData {
     message?: string;
-    reason: 'IDLE' | 'SERVER_FORCE' | 'APP_UPDATE';
+    reason: 'IDLE'|'SERVER_FORCE'|'APP_UPDATE'|'AUTH_EXPIRED';
 }

package/mobile/cmp/navigator/NavigatorModel.ts

@@ -44,11 +44,6 @@ export interface NavigatorConfig {
      * See enum for description of supported modes.
      */
     refreshMode?: RefreshMode;
-
-    /**
-     * Base route name for this navigator, with the route for each page being "[route]/[page.id]".
-     */
-    route?: string;
 }
 
 /**
@@ -58,9 +53,6 @@ export interface NavigatorConfig {
 export class NavigatorModel extends HoistModel {
     @bindable disableAppRefreshButton: boolean;
 
-    readonly route: string;
-    readonly routePrefix: string;
-
     @bindable.ref
     stack: PageModel[] = [];
 
@@ -97,7 +89,6 @@ export class NavigatorModel extends HoistModel {
 
     constructor({
         pages,
-        route,
         track = false,
         pullDownToRefresh = true,
         transitionMs = 500,
@@ -110,9 +101,6 @@ export class NavigatorModel extends HoistModel {
         ensureNotEmpty(pages, 'NavigatorModel needs at least one page.');
         ensureUniqueBy(pages, 'id', 'Multiple NavigatorModel PageModels have the same id.');
 
-        this.route = route ?? '';
-        this.routePrefix = route ? route.substring(0, route.lastIndexOf('.') + 1) : '';
-
         this.pages = pages;
         this.track = track;
         this.pullDownToRefresh = pullDownToRefresh;
@@ -221,7 +209,7 @@ export class NavigatorModel extends HoistModel {
         this.stack = this.stack.slice(0, this._swiper.activeIndex + 1);
 
         // 2) Sync route to match the current page stack
-        const newRouteName = this.routePrefix + this.stack.map(it => it.id).join('.'),
+        const newRouteName = this.stack.map(it => it.id).join('.'),
             newRouteParams = mergeDeep({}, ...this.stack.map(it => it.props));
 
         XH.navigate(newRouteName, newRouteParams);
@@ -238,17 +226,16 @@ export class NavigatorModel extends HoistModel {
     };
 
     private onRouteChange(init: boolean = false) {
-        const {route: myRoute, routePrefix: myRoutePrefix, _swiper} = this;
-        if (!XH.routerState || (myRoute && !XH.router.isActive(myRoute)) || !_swiper) return;
+        if (!this._swiper || !XH.routerState) return;
 
-        // Break the current route name into parts, only looking at our part of it (myRoute and below).
-        // Collect any params for each part. Use meta.params to determine which params are associated
-        // with each route part. Save these params to use as props for the page.
+        // Break the current route name into parts, and collect any params for each part.
+        // Use meta.params to determine which params are associated with each route part.
+        // Save these params to use as props for the page.
         const {meta, name, params} = XH.routerState,
-            parts = name.replace(myRoutePrefix, '').split('.');
+            parts = name.split('.');
 
         const routeParts = parts.map((id, idx) => {
-            const metaKey = myRoutePrefix + parts.slice(0, idx + 1).join('.'),
+            const metaKey = parts.slice(0, idx + 1).join('.'),
                 props = {};
 
             // Extract props for this part
@@ -275,7 +262,7 @@ export class NavigatorModel extends HoistModel {
             // we drop the rest of the route and redirect to the route so far
             if (init && pageModelCfg.disableDirectLink) {
                 const completedRouteParts = routeParts.slice(0, i),
-                    newRouteName = myRoutePrefix + completedRouteParts.map(it => it.id).join('.'),
+                    newRouteName = completedRouteParts.map(it => it.id).join('.'),
                     newRouteParams = mergeDeep({}, ...completedRouteParts.map(it => it.props));
 
                 XH.navigate(newRouteName, newRouteParams, {replace: true});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xh/hoist",
-  "version": "73.0.0-SNAPSHOT.1746837312368",
+  "version": "73.0.0-SNAPSHOT.1747058765265",
   "description": "Hoist add-on for building and deploying React Applications.",
   "repository": "github:xh/hoist-react",
   "homepage": "https://xh.io",

package/promise/Promise.ts

@@ -203,12 +203,23 @@ const enhancePromise = promisePrototype => {
 
             const startTime = Date.now(),
                 doTrack = (isError: boolean) => {
-                    const opts: TrackOptions = isString(options)
-                        ? {message: options}
-                        : {...options};
-
+                    const endTime = Date.now(),
+                        opts: TrackOptions = isString(options) ? {message: options} : {...options};
                     opts.timestamp = startTime;
-                    opts.elapsed = Date.now() - startTime;
+                    opts.elapsed = endTime - startTime;
+
+                    // Null out any time spent during "interactive" login, if it took longer than
+                    // 2 seconds (e.g. user input required).  This avoids stats being blown out.
+                    // Could also try to correct, but this seems safer.
+                    const login = XH.appContainerModel.lastRelogin;
+                    if (
+                        login &&
+                        startTime <= login.completed &&
+                        endTime >= login.completed &&
+                        login.completed - login.started > 2 * SECONDS
+                    ) {
+                        opts.elapsed = null;
+                    }
                     if (isError) opts.severity = 'ERROR';
 
                     XH.track(opts);

package/security/BaseOAuthClient.ts

@@ -13,7 +13,7 @@ import {Token} from '@xh/hoist/security/Token';
 import {AccessTokenSpec, TokenMap} from './Types';
 import {Timer} from '@xh/hoist/utils/async';
 import {MINUTES, olderThan, ONE_MINUTE, SECONDS} from '@xh/hoist/utils/datetime';
-import {isJSON, throwIf} from '@xh/hoist/utils/js';
+import {isJSON, logError, throwIf} from '@xh/hoist/utils/js';
 import {find, forEach, isEmpty, isObject, keys, map, pickBy, union} from 'lodash';
 import ShortUniqueId from 'short-unique-id';
 
@@ -73,6 +73,24 @@ export interface BaseOAuthClientConfig<S extends AccessTokenSpec> {
      * other metadata required by the underlying provider.
      */
     accessTokens?: Record<string, S>;
+
+    /**
+     * True to allow this client to try to re-login interactively (via pop-up) if tokens begin
+     * failing to load due to specific provider exceptions indicating user interaction is required.
+     * This can happen, for example, if a token expires and the refresh token is expired or
+     * invalidated during the lifetime of the client.  Default is false and retry will not be
+     * attempted.
+     */
+    reloginEnabled?: boolean;
+
+    /**
+     * Maximum time for (interactive) re-login.
+     *
+     * Set to a reasonably fixed amount of time, to allow user to type in password and complete
+     * MFA, but not so long as to allow a problematic build-up of application requests.
+     * Default 60 seconds;
+     */
+    reloginTimeoutSecs?: number;
 }
 
 /**
@@ -101,6 +119,8 @@ export abstract class BaseOAuthClient<
     @managed private timer: Timer;
     private lastRefreshAttempt: number;
     private TIMER_INTERVAL = 2 * SECONDS;
+    private pendingRelogin: Promise<void> = null;
+    private lastRelogin: {started: number; completed: number};
 
     //------------------------
     // Public API
@@ -114,6 +134,8 @@ export abstract class BaseOAuthClient<
             redirectUrl: 'APP_BASE_URL',
             postLogoutRedirectUrl: 'APP_BASE_URL',
             autoRefreshSecs: -1,
+            reloginEnabled: false,
+            reloginTimeoutSecs: 60,
             ...config
         };
         throwIf(!config.clientId, 'Missing OAuth clientId. Please review your configuration.');
@@ -156,7 +178,7 @@ export abstract class BaseOAuthClient<
      * Get an ID token.
      */
     async getIdTokenAsync(): Promise<Token> {
-        return this.fetchIdTokenSafeAsync(true);
+        return this.getWithRetry(() => this.fetchIdTokenSafeAsync(true));
     }
 
     /**
@@ -166,14 +188,14 @@ export abstract class BaseOAuthClient<
         const spec = this.accessSpecs[key];
         if (!spec) throw XH.exception(`No access token spec configured for key "${key}"`);
 
-        return this.fetchAccessTokenAsync(spec, true);
+        return this.getWithRetry(() => this.fetchAccessTokenAsync(spec, true));
     }
 
     /**
      * Get all configured tokens.
      */
     async getAllTokensAsync(opts?: {eagerOnly?: boolean; useCache?: boolean}): Promise<TokenMap> {
-        return this.fetchAllTokensAsync(opts);
+        return this.getWithRetry(() => this.fetchAllTokensAsync(opts));
     }
 
     /**
@@ -209,6 +231,8 @@ export abstract class BaseOAuthClient<
 
     protected abstract doLogoutAsync(): Promise<void>;
 
+    protected abstract interactiveLoginNeeded(exception: unknown): boolean;
+
     //---------------------------------------
     // Implementation
     //---------------------------------------
@@ -357,7 +381,7 @@ export abstract class BaseOAuthClient<
         // https://github.com/AzureAD/microsoft-authentication-library-for-js/issues/4206
         // Protect ourselves from this, without losing benefits of local cache.
         let ret = await this.fetchIdTokenAsync(useCache);
-        if (useCache && ret.expiresWithin(ONE_MINUTE)) {
+        if (useCache && ret.expiresWithin(1 * MINUTES)) {
             this.logDebug('Stale ID Token loaded from the cache, reloading without cache.');
             ret = await this.fetchIdTokenAsync(false);
         }
@@ -367,6 +391,62 @@ export abstract class BaseOAuthClient<
         return ret;
     }
 
+    private async getWithRetry<V>(fn: () => Promise<V>): Promise<V> {
+        const {reloginEnabled} = this.config,
+            {lastRelogin, pendingRelogin} = this;
+
+        // 0) Simple case: either no relogin possible, OR we are already working on a relogin,
+        // and will take just a single shot when it completes.
+        if (!reloginEnabled || !olderThan(lastRelogin?.completed, 1 * MINUTES) || pendingRelogin) {
+            await pendingRelogin;
+            return fn().catch(e => this.rethrowWrapped(e));
+        }
+
+        // 1) Complex case:  Take potentially two tries.
+        try {
+            return await fn();
+        } catch (e) {
+            if (!this.interactiveLoginNeeded(e)) throw e;
+            // Be sure to create and join on just a single shared loginTask.
+            this.pendingRelogin ??= this.getLoginTask().finally(() => (this.pendingRelogin = null));
+            await this.pendingRelogin;
+            return fn().catch(e => this.rethrowWrapped(e));
+        }
+    }
+
+    private rethrowWrapped(e: unknown): never {
+        if (!this.interactiveLoginNeeded(e)) throw e;
+
+        throw XH.exception({
+            name: 'Auth Expired',
+            message: 'Your authentication has expired. Please reload the app to login again.',
+            cause: e
+        });
+    }
+
+    // Return a highly managed task that will attempt to relogin the user, and never throw.
+    private getLoginTask(): Promise<void> {
+        let started: number = Date.now(),
+            completed: number;
+        return this.doLoginPopupAsync()
+            .timeout(this.config.reloginTimeoutSecs * SECONDS)
+            .finally(() => {
+                completed = Date.now();
+                this.lastRelogin = XH.appContainerModel.lastRelogin = {started, completed};
+            })
+            .then(() => {
+                XH.track({
+                    category: 'App',
+                    message: 'Interactive reauthentication succeeded',
+                    elapsed: completed - started
+                });
+            })
+            .catch(e => {
+                // Should there be a non-auth requiring way to communicate this to server?
+                logError('Failed to reauthenticate', e);
+            });
+    }
+
     @action
     private async onTimerAsync(): Promise<void> {
         const {config, lastRefreshAttempt} = this,

package/security/authzero/AuthZeroClient.ts

@@ -178,6 +178,12 @@ export class AuthZeroClient extends BaseOAuthClient<AuthZeroClientConfig, AuthZe
         await wait(10 * SECONDS);
     }
 
+    protected override interactiveLoginNeeded(exception: unknown): boolean {
+        return ['login_required', 'interaction_required', 'consent_required'].includes(
+            exception['error']
+        );
+    }
+
     //------------------------
     // Private implementation
     //------------------------

package/security/msal/MsalClient.ts

@@ -9,6 +9,7 @@ import {
     AccountInfo,
     BrowserPerformanceClient,
     Configuration,
+    InteractionRequiredAuthError,
     IPublicClientApplication,
     LogLevel,
     PopupRequest,
@@ -103,10 +104,9 @@ export interface MsalTokenSpec extends AccessTokenSpec {
  * Also see this doc re. use of blankUrl as redirectUri for all "silent" token requests:
  * https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/lib/msal-browser/docs/errors.md#issues-caused-by-the-redirecturi-page
  *
- * TODO: The handling of `ssoSilent` and `initRefreshTokenExpirationOffsetSecs` in this library
- *   require 3rd party cookies to be enabled in the browser so that MSAL can load contact in a
- *   hidden iFrame  If its *not* enabled, we may be doing extra work.  Consider checking 3rd party
- *   cookie support and adding conditional behavior?
+ * Important note: The handling of `ssoSilent` and `initRefreshTokenExpirationOffsetSecs` in this
+ *    library require 3rd party cookies to be enabled in the browser so that MSAL can load contact
+ *    in a hidden iFrame.
  */
 export class MsalClient extends BaseOAuthClient<MsalClientConfig, MsalTokenSpec> {
     private client: IPublicClientApplication;
@@ -263,6 +263,10 @@ export class MsalClient extends BaseOAuthClient<MsalClientConfig, MsalTokenSpec>
             : await client.logoutPopup(opts);
     }
 
+    protected override interactiveLoginNeeded(exception: unknown): boolean {
+        return exception instanceof InteractionRequiredAuthError;
+    }
+
     //------------------------
     // Telemetry
     //------------------------