@xh/hoist 71.0.0-SNAPSHOT.1735047359409 → 71.0.0-SNAPSHOT.1735061320692

package/{desktop/cmp → cmp}/treemap/SplitTreeMap.ts

@@ -7,13 +7,10 @@
 import {AgGrid} from '@xh/hoist/cmp/ag-grid';
 import {box, div, fragment, hbox, hframe, p, placeholder, vbox, vframe} from '@xh/hoist/cmp/layout';
 import {BoxProps, hoistCmp, HoistProps, uses, XH} from '@xh/hoist/core';
-import {errorMessage} from '@xh/hoist/desktop/cmp/error';
-import {mask} from '@xh/hoist/desktop/cmp/mask';
-import '@xh/hoist/desktop/register';
+import {errorMessage} from '@xh/hoist/cmp/error';
+import {mask} from '@xh/hoist/cmp/mask';
 import classNames from 'classnames';
 import {compact, uniq} from 'lodash';
-import {splitter} from './impl/Splitter';
-
 import './SplitTreeMap.scss';
 import {SplitTreeMapModel} from './SplitTreeMapModel';
 import {treeMap} from './TreeMap';
@@ -110,7 +107,8 @@ const mapTitle = hoistCmp.factory<SplitTreeMapModel>(({model, isPrimary}) => {
 
     const container = titleOrientation === 'horizontal' ? hbox : vbox,
         dim = titleOrientation === 'horizontal' ? 'height' : 'width',
-        size = (AgGrid as any).getHeaderHeightForSizingMode(XH.sizingMode);
+        sizingMode = XH.isMobileApp ? 'tiny' : XH.sizingMode,
+        size = (AgGrid as any).getHeaderHeightForSizingMode(sizingMode);
 
     return container({
         style: {[dim]: `${size}px`},
@@ -125,6 +123,16 @@ const mapTitle = hoistCmp.factory<SplitTreeMapModel>(({model, isPrimary}) => {
     });
 });
 
+const splitter = hoistCmp.factory<SplitTreeMapModel>(({model}) => {
+    const {orientation} = model,
+        vertical = orientation === 'vertical',
+        cmp = vertical ? hbox : vbox;
+
+    return cmp({
+        className: `xh-split-treemap__splitter xh-split-treemap__splitter--${vertical ? 'vertical' : 'horizontal'}`
+    });
+});
+
 const errorPanel = hoistCmp.factory(({errors}) =>
     errorMessage({error: errors.join(' '), message: fragment(errors.map(e => p(e)))})
 );

package/{desktop/cmp → cmp}/treemap/SplitTreeMapModel.ts

@@ -5,7 +5,6 @@
  * Copyright © 2024 Extremely Heavy Industries Inc.
  */
 import {HoistModel, managed, PlainObject, Theme} from '@xh/hoist/core';
-import '@xh/hoist/desktop/register';
 import {action, observable, computed, makeObservable} from '@xh/hoist/mobx';
 import {throwIf, withDefault} from '@xh/hoist/utils/js';
 import {StoreRecord, StoreRecordId} from '@xh/hoist/data';

package/{desktop/cmp → cmp}/treemap/TreeMap.ts

@@ -17,9 +17,8 @@ import {
     uses,
     XH
 } from '@xh/hoist/core';
-import {errorMessage} from '@xh/hoist/desktop/cmp/error';
-import {mask} from '@xh/hoist/desktop/cmp/mask';
-import '@xh/hoist/desktop/register';
+import {errorMessage} from '@xh/hoist/cmp/error';
+import {mask} from '@xh/hoist/cmp/mask';
 import {Highcharts} from '@xh/hoist/kit/highcharts';
 import {wait} from '@xh/hoist/promise';
 import {logError, logWithDebug} from '@xh/hoist/utils/js';

package/{desktop/cmp → cmp}/treemap/TreeMapModel.ts

@@ -8,7 +8,6 @@ import {HoistModel, PlainObject, Theme} from '@xh/hoist/core';
 import {Store, StoreRecord, StoreRecordId} from '@xh/hoist/data';
 import {GridModel} from '@xh/hoist/cmp/grid';
 import {FilterLike} from '@xh/hoist/data/filter/Types';
-import '@xh/hoist/desktop/register';
 import {numberRenderer} from '@xh/hoist/format';
 import {action, bindable, computed, makeObservable, observable} from '@xh/hoist/mobx';
 import {throwIf, withDefault} from '@xh/hoist/utils/js';

package/desktop/appcontainer/AppContainer.ts

@@ -17,7 +17,7 @@ import {zoneMapperDialog as zoneMapper} from '@xh/hoist/desktop/cmp/zoneGrid/imp
 import {columnHeaderFilter} from '@xh/hoist/desktop/cmp/grid/impl/filter/ColumnHeaderFilter';
 import {ColumnHeaderFilterModel} from '@xh/hoist/desktop/cmp/grid/impl/filter/ColumnHeaderFilterModel';
 import {gridFilterDialog} from '@xh/hoist/desktop/cmp/grid/impl/filter/GridFilterDialog';
-import {mask} from '@xh/hoist/desktop/cmp/mask';
+import {mask} from '@xh/hoist/cmp/mask';
 import {ModalSupportModel} from '@xh/hoist/desktop/cmp/modalsupport';
 import {pinPadImpl} from '@xh/hoist/desktop/cmp/pinpad/impl/PinPad';
 import {storeFilterFieldImpl} from '@xh/hoist/desktop/cmp/store/impl/StoreFilterField';
@@ -26,6 +26,8 @@ import {useContextMenu, useHotkeys} from '@xh/hoist/desktop/hooks';
 import {installDesktopImpls} from '@xh/hoist/dynamics/desktop';
 import {inspectorPanel} from '@xh/hoist/inspector/InspectorPanel';
 import {blueprintProvider} from '@xh/hoist/kit/blueprint';
+import {errorMessageImpl} from '@xh/hoist/desktop/cmp/error/impl/ErrorMessage';
+import {maskImpl} from '@xh/hoist/desktop/cmp/mask/impl/Mask';
 import {elementFromContent, useOnMount} from '@xh/hoist/utils/react';
 import {isEmpty} from 'lodash';
 import {aboutDialog} from './AboutDialog';
@@ -41,7 +43,6 @@ import {optionsDialog} from './OptionsDialog';
 import {toastSource} from './ToastSource';
 import {versionBar} from './VersionBar';
 import {ReactElement} from 'react';
-import {errorMessage} from '../cmp/error/ErrorMessage';
 
 installDesktopImpls({
     tabContainerImpl,
@@ -56,7 +57,8 @@ installDesktopImpls({
     ColumnHeaderFilterModel,
     useContextMenu,
     ModalSupportModel,
-    errorMessage
+    errorMessageImpl,
+    maskImpl
 });
 /**
  * Top-level wrapper for Desktop applications.

package/desktop/cmp/dash/container/DashContainer.ts

@@ -14,7 +14,7 @@ import {
     TestSupportProps,
     uses
 } from '@xh/hoist/core';
-import {mask} from '@xh/hoist/desktop/cmp/mask';
+import {mask} from '@xh/hoist/cmp/mask';
 import {Classes, overlay} from '@xh/hoist/kit/blueprint';
 import {useOnMount, useOnResize} from '@xh/hoist/utils/react';
 import {useContext} from 'react';

package/desktop/cmp/error/impl/ErrorMessage.ts

@@ -0,0 +1,65 @@
+/*
+ * This file belongs to Hoist, an application development toolkit
+ * developed by Extremely Heavy Industries (www.xh.io | info@xh.io)
+ *
+ * Copyright © 2024 Extremely Heavy Industries Inc.
+ */
+import {hoistCmp} from '@xh/hoist/core';
+import {div, filler, hbox, p} from '@xh/hoist/cmp/layout';
+import {ErrorMessageProps} from '@xh/hoist/cmp/error';
+import {button, ButtonProps} from '@xh/hoist/desktop/cmp/button';
+import {Icon} from '@xh/hoist/icon';
+import {isString} from 'lodash';
+import {isValidElement} from 'react';
+import '@xh/hoist/desktop/register';
+
+/**
+ * Desktop implementation of ErrorMessage.
+ * @internal
+ */
+export const errorMessageImpl = hoistCmp.factory<ErrorMessageProps>({
+    render({error, message, title, actionButtonProps, detailsButtonProps}) {
+        let buttons = [],
+            buttonBar = null;
+        if (detailsButtonProps) buttons.push(detailsButton(detailsButtonProps as ButtonProps));
+        if (actionButtonProps) buttons.push(actionButton(actionButtonProps as ButtonProps));
+        if (buttons.length == 1) {
+            buttonBar = buttons[0];
+        } else if (buttons.length == 2) {
+            buttonBar = hbox(buttons[0], filler(), buttons[1]);
+        }
+
+        return div({
+            className: 'xh-error-message__inner',
+            items: [titleCmp({title}), messageCmp({message, error}), buttonBar]
+        });
+    }
+});
+
+const titleCmp = hoistCmp.factory(({title}) => {
+    if (isValidElement(title)) return title;
+    if (isString(title)) return div({className: 'xh-error-message__title', item: title});
+    return null;
+});
+
+const messageCmp = hoistCmp.factory(({message}) => {
+    if (isValidElement(message)) return message;
+    if (isString(message)) return p(message);
+    return null;
+});
+
+const actionButton = hoistCmp.factory<ButtonProps>(props => {
+    return button({
+        text: 'Retry',
+        icon: Icon.refresh(),
+        ...props
+    });
+});
+
+const detailsButton = hoistCmp.factory<ButtonProps>(props => {
+    return button({
+        text: 'Details',
+        icon: Icon.detail(),
+        ...props
+    });
+});

package/desktop/cmp/mask/impl/Mask.ts

@@ -0,0 +1,40 @@
+/*
+ * This file belongs to Hoist, an application development toolkit
+ * developed by Extremely Heavy Industries (www.xh.io | info@xh.io)
+ *
+ * Copyright © 2024 Extremely Heavy Industries Inc.
+ */
+import {hoistCmp} from '@xh/hoist/core';
+import {box, vbox, vspacer} from '@xh/hoist/cmp/layout';
+import {MaskProps} from '@xh/hoist/cmp/mask';
+import {spinner as spinnerCmp} from '@xh/hoist/cmp/spinner';
+import {Classes, overlay} from '@xh/hoist/kit/blueprint';
+import classNames from 'classnames';
+import '@xh/hoist/desktop/register';
+import './Mask.scss';
+
+/**
+ * Desktop implementation of Mask.
+ * @internal
+ */
+export const maskImpl = hoistCmp.factory<MaskProps>({
+    render({message, onClick, inline = true, spinner = false, className}) {
+        return overlay({
+            className: classNames(className, Classes.OVERLAY_SCROLL_CONTAINER),
+            autoFocus: false,
+            isOpen: true,
+            canEscapeKeyClose: false,
+            usePortal: !inline,
+            enforceFocus: !inline,
+            item: vbox({
+                onClick,
+                className: 'xh-mask-body',
+                items: [
+                    spinner ? spinnerCmp() : null,
+                    spinner ? vspacer(10) : null,
+                    message ? box({className: 'xh-mask-text', item: message}) : null
+                ]
+            })
+        });
+    }
+});

package/desktop/cmp/panel/Panel.ts

@@ -17,8 +17,8 @@ import {
     useContextModel,
     uses
 } from '@xh/hoist/core';
-import {loadingIndicator} from '@xh/hoist/desktop/cmp/loadingindicator';
-import {mask} from '@xh/hoist/desktop/cmp/mask';
+import {loadingIndicator} from '@xh/hoist/cmp/loadingindicator';
+import {mask} from '@xh/hoist/cmp/mask';
 import {toolbar} from '@xh/hoist/desktop/cmp/toolbar';
 import {useContextMenu, useHotkeys} from '@xh/hoist/desktop/hooks';
 import '@xh/hoist/desktop/register';

package/desktop/cmp/rest/RestGrid.ts

@@ -8,7 +8,7 @@
 import {grid} from '@xh/hoist/cmp/grid';
 import {fragment} from '@xh/hoist/cmp/layout';
 import {hoistCmp, HoistProps, PlainObject, Some, uses} from '@xh/hoist/core';
-import {MaskProps} from '@xh/hoist/desktop/cmp/mask';
+import {MaskProps} from '@xh/hoist/cmp/mask';
 import {panel, PanelProps} from '@xh/hoist/desktop/cmp/panel';
 import '@xh/hoist/desktop/register';
 import {getTestId} from '@xh/hoist/utils/js';

package/dynamics/desktop.ts

@@ -22,12 +22,13 @@ export let colChooser = null;
 export let zoneMapper = null;
 export let columnHeaderFilter = null;
 export let dockContainerImpl = null;
-export let errorMessage = null;
 export let gridFilterDialog = null;
 export let pinPadImpl = null;
 export let storeFilterFieldImpl = null;
 export let tabContainerImpl = null;
 export let useContextMenu = null;
+export let errorMessageImpl = null;
+export let maskImpl = null;
 
 /**
  * Provide implementations of functions and classes exported in this file.
@@ -42,10 +43,11 @@ export function installDesktopImpls(impls) {
     zoneMapper = impls.zoneMapper;
     columnHeaderFilter = impls.columnHeaderFilter;
     dockContainerImpl = impls.dockContainerImpl;
-    errorMessage = impls.errorMessage;
     gridFilterDialog = impls.gridFilterDialog;
     pinPadImpl = impls.pinPadImpl;
     storeFilterFieldImpl = impls.storeFilterFieldImpl;
     tabContainerImpl = impls.tabContainerImpl;
     useContextMenu = impls.useContextMenu;
+    errorMessageImpl = impls.errorMessageImpl;
+    maskImpl = impls.maskImpl;
 }

package/dynamics/mobile.ts

@@ -18,10 +18,11 @@
 export let ColChooserModel = null;
 export let colChooser = null;
 export let zoneMapper = null;
-export let errorMessage = null;
 export let pinPadImpl = null;
 export let storeFilterFieldImpl = null;
 export let tabContainerImpl = null;
+export let errorMessageImpl = null;
+export let maskImpl = null;
 
 /**
  * Provide implementations of functions and classes exported in this file.
@@ -32,8 +33,9 @@ export function installMobileImpls(impls) {
     ColChooserModel = impls.ColChooserModel;
     colChooser = impls.colChooser;
     zoneMapper = impls.zoneMapper;
-    errorMessage = impls.errorMessage;
     pinPadImpl = impls.pinPadImpl;
     storeFilterFieldImpl = impls.storeFilterFieldImpl;
     tabContainerImpl = impls.tabContainerImpl;
+    errorMessageImpl = impls.errorMessageImpl;
+    maskImpl = impls.maskImpl;
 }

package/mobile/appcontainer/AppContainer.ts

@@ -8,17 +8,18 @@ import {AppContainerModel} from '@xh/hoist/appcontainer/AppContainerModel';
 import {errorBoundary} from '@xh/hoist/cmp/error/ErrorBoundary';
 import {fragment, frame, vframe, viewport} from '@xh/hoist/cmp/layout';
 import {createElement, hoistCmp, refreshContextView, uses, XH} from '@xh/hoist/core';
+import {errorMessageImpl} from '@xh/hoist/mobile/cmp/error/impl/ErrorMessage';
+import {maskImpl} from '@xh/hoist/mobile/cmp/mask/impl/Mask';
 import {installMobileImpls} from '@xh/hoist/dynamics/mobile';
 import {colChooser} from '@xh/hoist/mobile/cmp/grid/impl/ColChooser';
 import {ColChooserModel} from '@xh/hoist/mobile/cmp/grid/impl/ColChooserModel';
-import {mask} from '@xh/hoist/mobile/cmp/mask';
+import {mask} from '@xh/hoist/cmp/mask';
 import {pinPadImpl} from '@xh/hoist/mobile/cmp/pinpad/impl/PinPad';
 import {storeFilterFieldImpl} from '@xh/hoist/mobile/cmp/store/impl/StoreFilterField';
 import {tabContainerImpl} from '@xh/hoist/mobile/cmp/tab/impl/TabContainer';
 import {zoneMapper} from '@xh/hoist/mobile/cmp/zoneGrid/impl/ZoneMapper';
 import {elementFromContent, useOnMount} from '@xh/hoist/utils/react';
 import {isEmpty} from 'lodash';
-import {errorMessage} from '../cmp/error/ErrorMessage';
 import {aboutDialog} from './AboutDialog';
 import {banner} from './Banner';
 import {exceptionDialog} from './ExceptionDialog';
@@ -40,7 +41,8 @@ installMobileImpls({
     colChooser,
     ColChooserModel,
     zoneMapper,
-    errorMessage
+    errorMessageImpl,
+    maskImpl
 });
 
 /**

package/mobile/appcontainer/OptionsDialog.ts

@@ -11,7 +11,7 @@ import {hoistCmp, uses, XH} from '@xh/hoist/core';
 import {Icon} from '@xh/hoist/icon';
 import {button, restoreDefaultsButton} from '@xh/hoist/mobile/cmp/button';
 import {formField} from '@xh/hoist/mobile/cmp/form';
-import {mask} from '@xh/hoist/mobile/cmp/mask';
+import {mask} from '@xh/hoist/cmp/mask';
 import './OptionsDialog.scss';
 import {dialogPanel} from '@xh/hoist/mobile/cmp/panel';
 

package/mobile/cmp/error/impl/ErrorMessage.ts

@@ -0,0 +1,65 @@
+/*
+ * This file belongs to Hoist, an application development toolkit
+ * developed by Extremely Heavy Industries (www.xh.io | info@xh.io)
+ *
+ * Copyright © 2024 Extremely Heavy Industries Inc.
+ */
+import {hoistCmp} from '@xh/hoist/core';
+import {div, filler, hbox, p} from '@xh/hoist/cmp/layout';
+import {ErrorMessageProps} from '@xh/hoist/cmp/error';
+import {button, ButtonProps} from '@xh/hoist/mobile/cmp/button';
+import {Icon} from '@xh/hoist/icon';
+import {isString} from 'lodash';
+import {isValidElement} from 'react';
+import '@xh/hoist/mobile/register';
+
+/**
+ * Mobile implementation of ErrorMessage.
+ * @internal
+ */
+export const errorMessageImpl = hoistCmp.factory<ErrorMessageProps>({
+    render({error, message, title, actionButtonProps, detailsButtonProps}) {
+        let buttons = [],
+            buttonBar = null;
+        if (detailsButtonProps) buttons.push(detailsButton(detailsButtonProps as ButtonProps));
+        if (actionButtonProps) buttons.push(actionButton(actionButtonProps as ButtonProps));
+        if (buttons.length == 1) {
+            buttonBar = buttons[0];
+        } else if (buttons.length == 2) {
+            buttonBar = hbox(buttons[0], filler(), buttons[1]);
+        }
+
+        return div({
+            className: 'xh-error-message__inner',
+            items: [titleCmp({title}), messageCmp({message, error}), buttonBar]
+        });
+    }
+});
+
+const titleCmp = hoistCmp.factory(({title}) => {
+    if (isValidElement(title)) return title;
+    if (isString(title)) return div({className: 'xh-error-message__title', item: title});
+    return null;
+});
+
+const messageCmp = hoistCmp.factory(({message}) => {
+    if (isValidElement(message)) return message;
+    if (isString(message)) return p(message);
+    return null;
+});
+
+const actionButton = hoistCmp.factory<ButtonProps>(props => {
+    return button({
+        text: 'Retry',
+        icon: Icon.refresh(),
+        ...props
+    });
+});
+
+const detailsButton = hoistCmp.factory<ButtonProps>(props => {
+    return button({
+        text: 'Show Details',
+        icon: Icon.detail(),
+        ...props
+    });
+});

package/mobile/cmp/mask/impl/Mask.ts

@@ -0,0 +1,34 @@
+/*
+ * This file belongs to Hoist, an application development toolkit
+ * developed by Extremely Heavy Industries (www.xh.io | info@xh.io)
+ *
+ * Copyright © 2024 Extremely Heavy Industries Inc.
+ */
+import {hoistCmp} from '@xh/hoist/core';
+import {box, div, vbox, vspacer} from '@xh/hoist/cmp/layout';
+import {MaskProps} from '@xh/hoist/cmp/mask';
+import {spinner as spinnerCmp} from '@xh/hoist/cmp/spinner';
+import '@xh/hoist/mobile/register';
+import './Mask.scss';
+
+/**
+ * Mobile implementation of Mask.
+ * @internal
+ */
+export const maskImpl = hoistCmp.factory<MaskProps>({
+    render({message, onClick, spinner = false, className}, ref) {
+        return div({
+            ref,
+            onClick,
+            className,
+            item: vbox({
+                className: 'xh-mask-body',
+                items: [
+                    spinner ? spinnerCmp() : null,
+                    spinner ? vspacer(10) : null,
+                    message ? box({className: 'xh-mask-text', item: message}) : null
+                ]
+            })
+        });
+    }
+});

package/mobile/cmp/panel/Panel.ts

@@ -15,8 +15,8 @@ import {
     hoistCmp,
     HoistModel
 } from '@xh/hoist/core';
-import {loadingIndicator} from '@xh/hoist/mobile/cmp/loadingindicator';
-import {mask} from '@xh/hoist/mobile/cmp/mask';
+import {loadingIndicator} from '@xh/hoist/cmp/loadingindicator';
+import {mask} from '@xh/hoist/cmp/mask';
 import {toolbar} from '@xh/hoist/mobile/cmp/toolbar';
 import '@xh/hoist/mobile/register';
 import {splitLayoutProps} from '@xh/hoist/utils/react';

package/package.json

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

package/security/authzero/AuthZeroClient.ts

@@ -4,7 +4,8 @@
  *
  * Copyright © 2024 Extremely Heavy Industries Inc.
  */
-import {Auth0Client, Auth0ClientOptions} from '@auth0/auth0-spa-js';
+import type {Auth0ClientOptions} from '@auth0/auth0-spa-js';
+import {Auth0Client} from '@auth0/auth0-spa-js';
 import {XH} from '@xh/hoist/core';
 import {never, wait} from '@xh/hoist/promise';
 import {Token, TokenMap} from '@xh/hoist/security/Token';
@@ -14,9 +15,23 @@ import {flatMap, union} from 'lodash';
 import {BaseOAuthClient, BaseOAuthClientConfig} from '../BaseOAuthClient';
 
 export interface AuthZeroClientConfig extends BaseOAuthClientConfig<AuthZeroTokenSpec> {
-    /** Domain of your app registered with Auth0 */
+    /** Domain of your app registered with Auth0.  */
     domain: string;
 
+    /**
+     * Audience to pass to interactive login and ID token requests.
+     *
+     * If you are also requesting an *access* token for a single audience, pass that value here to
+     * ensure that the initial login/token request returns a ready-to-use access token (and refresh
+     * token) with a single request to the Auth0 API, instead of requiring two.
+     *
+     * This also avoids issues with browsers that block third party cookies when running on
+     * localhost or with an Auth0 domain that does not match the app's own domain. In those cases,
+     * Auth0 must use refresh tokens to obtain access tokens, and a single audience allows that
+     * exchange to work without extra user interaction that this class does not currently support.
+     */
+    audience?: string;
+
     /**
      * Additional options for the Auth0Client ctor. Will be deep merged with defaults, with options
      * supplied here taking precedence. Use with care, as overriding defaults may have unintended
@@ -31,9 +46,7 @@ export interface AuthZeroTokenSpec {
 
     /**
      * Audience (i.e. API) identifier for AccessToken.  Must be registered with Auth0.
-     *
-     * Note that this is required to ensure that issued token is a JWT and not
-     * an opaque string.
+     * Note that this is required to ensure that issued token is a JWT and not an opaque string.
      */
     audience: string;
 }
@@ -95,7 +108,9 @@ export class AuthZeroClient extends BaseOAuthClient<AuthZeroClientConfig, AuthZe
 
     protected override async doLoginPopupAsync(): Promise<void> {
         try {
-            await this.client.loginWithPopup({authorizationParams: {scope: this.loginScope}});
+            await this.client.loginWithPopup({
+                authorizationParams: {scope: this.loginScope}
+            });
             await this.noteUserAuthenticatedAsync();
         } catch (e) {
             const msg = e.message?.toLowerCase();
@@ -167,25 +182,27 @@ export class AuthZeroClient extends BaseOAuthClient<AuthZeroClientConfig, AuthZe
     // Private implementation
     //------------------------
     private createClient(): Auth0Client {
-        const {clientId, domain, authZeroClientOptions} = this.config;
+        const {clientId, domain, audience, authZeroClientOptions} = this.config;
         throwIf(!domain, 'Missing Auth0 "domain". Please review your config.');
 
-        return new Auth0Client(
-            mergeDeep(
-                {
-                    clientId,
-                    domain,
-                    useRefreshTokens: true,
-                    useRefreshTokensFallback: true,
-                    authorizationParams: {
-                        scope: this.loginScope,
-                        redirect_uri: this.redirectUrl
-                    },
-                    cacheLocation: 'localstorage'
+        const mergedConfig = mergeDeep(
+            {
+                clientId,
+                domain,
+                useRefreshTokens: true,
+                useRefreshTokensFallback: true,
+                authorizationParams: {
+                    scope: this.loginScope,
+                    redirect_uri: this.redirectUrl,
+                    audience
                 },
-                authZeroClientOptions
-            )
+                cacheLocation: 'localstorage'
+            },
+            authZeroClientOptions
         );
+
+        this.logDebug(`Creating Auth0Client with merged config`, mergedConfig);
+        return new Auth0Client(mergedConfig);
     }
 
     private get loginScope(): string {