@xh/hoist 71.0.0-SNAPSHOT.1734633945544 → 71.0.0-SNAPSHOT.1735061018823

package/CHANGELOG.md

@@ -12,6 +12,8 @@
   * Support for "global" views.
 * New `SessionStorageService` and associated persistence provider provides support for saving
   tab local data across reloads.
+* Added support for `AuthZeroClientConfig.audience` to support improved configuration of Auth0 OAuth
+  clients requesting access tokens, covering cases when third-party cookies are blocked.
 
 ### ⚙️ Technical
 

package/build/types/data/filter/CompoundFilter.d.ts

@@ -16,10 +16,7 @@ export declare class CompoundFilter extends Filter {
      * @internal
      */
     constructor({ filters, op }: CompoundFilterSpec);
-    toJSON(): {
-        filters: any[];
-        op: CompoundFilterOperator;
-    };
     getTestFn(store?: Store): FilterTestFn;
     equals(other: Filter): boolean;
+    toJSON(): CompoundFilterSpec;
 }

package/build/types/data/filter/FieldFilter.d.ts

@@ -1,4 +1,3 @@
-import { FieldType } from '../Field';
 import { Store } from '../Store';
 import { Filter } from './Filter';
 import { FieldFilterOperator, FieldFilterSpec, FilterTestFn } from './Types';
@@ -23,13 +22,8 @@ export declare class FieldFilter extends Filter {
      * @internal
      */
     constructor({ field, op, value, valueType }: FieldFilterSpec);
-    toJSON(): {
-        valueType?: FieldType;
-        field: string;
-        op: FieldFilterOperator;
-        value: any;
-    };
     getTestFn(store?: Store): FilterTestFn;
     equals(other: Filter): boolean;
+    toJSON(): FieldFilterSpec;
     private get serializedValueType();
 }

package/build/types/data/filter/Filter.d.ts

@@ -1,5 +1,5 @@
 import { Store } from '../Store';
-import { FilterTestFn } from './Types';
+import { FilterSpec, FilterTestFn } from './Types';
 /**
  * Base class for Hoist data package Filters.
  *
@@ -21,4 +21,6 @@ export declare abstract class Filter {
     abstract getTestFn(store?: Store): FilterTestFn;
     /** @returns true if the provided other Filter is equivalent to this instance.*/
     abstract equals(other: Filter): boolean;
+    /** @returns a JSON serializable spec that can be used to persist and recreate this filter.*/
+    abstract toJSON(): FilterSpec;
 }

package/build/types/data/filter/FunctionFilter.d.ts

@@ -18,4 +18,5 @@ export declare class FunctionFilter extends Filter {
     constructor({ key, testFn }: FunctionFilterSpec);
     getTestFn(store?: Store): FilterTestFn;
     equals(other: Filter): boolean;
+    toJSON(): FunctionFilterSpec;
 }

package/build/types/data/filter/Types.d.ts

@@ -30,4 +30,5 @@ export interface FunctionFilterSpec {
  * @returns  true if the candidate passes and should be included in filtered results.
  */
 export type FilterTestFn = (candidate: PlainObject | StoreRecord) => boolean;
-export type FilterLike = Filter | CompoundFilterSpec | FieldFilterSpec | FunctionFilterSpec | FilterTestFn | FilterLike[];
+export type FilterSpec = FieldFilterSpec | FunctionFilterSpec | CompoundFilterSpec;
+export type FilterLike = Filter | FilterSpec | FilterTestFn | FilterLike[];

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

@@ -1,9 +1,22 @@
-import { Auth0ClientOptions } from '@auth0/auth0-spa-js';
+import type { Auth0ClientOptions } from '@auth0/auth0-spa-js';
 import { Token, TokenMap } from '@xh/hoist/security/Token';
 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
@@ -16,9 +29,7 @@ export interface AuthZeroTokenSpec {
     scopes: string[];
     /**
      * 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;
 }

package/data/filter/CompoundFilter.ts

@@ -46,13 +46,6 @@ export class CompoundFilter extends Filter {
         Object.freeze(this);
     }
 
-    toJSON() {
-        return {
-            filters: this.filters.map((f: any) => f.toJSON()),
-            op: this.op
-        };
-    }
-
     //-----------------
     // Overrides
     //-----------------
@@ -74,4 +67,11 @@ export class CompoundFilter extends Filter {
             )
         );
     }
+
+    override toJSON(): CompoundFilterSpec {
+        return {
+            filters: this.filters.map(f => f.toJSON()),
+            op: this.op
+        };
+    }
 }

package/data/filter/FieldFilter.ts

@@ -98,11 +98,6 @@ export class FieldFilter extends Filter {
         Object.freeze(this);
     }
 
-    toJSON() {
-        const {field, op, value, serializedValueType} = this;
-        return {field, op, value, ...(serializedValueType ? {valueType: serializedValueType} : {})};
-    }
-
     //-----------------
     // Overrides
     //-----------------
@@ -204,6 +199,11 @@ export class FieldFilter extends Filter {
         );
     }
 
+    override toJSON(): FieldFilterSpec {
+        const {field, op, value, serializedValueType} = this;
+        return {field, op, value, ...(serializedValueType ? {valueType: serializedValueType} : {})};
+    }
+
     //-----------------
     // Implementation
     //-----------------

package/data/filter/Filter.ts

@@ -6,7 +6,7 @@
  */
 
 import {Store} from '../Store';
-import {FilterTestFn} from './Types';
+import {FilterSpec, FilterTestFn} from './Types';
 
 /**
  * Base class for Hoist data package Filters.
@@ -33,4 +33,7 @@ export abstract class Filter {
 
     /** @returns true if the provided other Filter is equivalent to this instance.*/
     abstract equals(other: Filter): boolean;
+
+    /** @returns a JSON serializable spec that can be used to persist and recreate this filter.*/
+    abstract toJSON(): FilterSpec;
 }

package/data/filter/FunctionFilter.ts

@@ -5,6 +5,7 @@
  * Copyright © 2024 Extremely Heavy Industries Inc.
  */
 
+import {XH} from '@xh/hoist/core';
 import {throwIf} from '@xh/hoist/utils/js';
 import {isFunction} from 'lodash';
 import {Store} from '../Store';
@@ -51,4 +52,8 @@ export class FunctionFilter extends Filter {
         if (other === this) return true;
         return other instanceof FunctionFilter && this.testFn === other.testFn;
     }
+
+    override toJSON(): FunctionFilterSpec {
+        throw XH.exception('FunctionFilter.toJSON() not supported.');
+    }
 }

package/data/filter/Types.ts

@@ -59,10 +59,6 @@ export interface FunctionFilterSpec {
  */
 export type FilterTestFn = (candidate: PlainObject | StoreRecord) => boolean;
 
-export type FilterLike =
-    | Filter
-    | CompoundFilterSpec
-    | FieldFilterSpec
-    | FunctionFilterSpec
-    | FilterTestFn
-    | FilterLike[];
+export type FilterSpec = FieldFilterSpec | FunctionFilterSpec | CompoundFilterSpec;
+
+export type FilterLike = Filter | FilterSpec | FilterTestFn | FilterLike[];

package/desktop/cmp/grid/impl/filter/GridFilterDialog.ts

@@ -8,13 +8,7 @@ import {form, FormModel} from '@xh/hoist/cmp/form';
 import {GridFilterModel} from '@xh/hoist/cmp/grid';
 import {filler} from '@xh/hoist/cmp/layout';
 import {hoistCmp, HoistModel, lookup, managed, useLocalModel, uses} from '@xh/hoist/core';
-import {
-    CompoundFilter,
-    FieldFilter,
-    parseFilter,
-    required,
-    withFilterByTypes
-} from '@xh/hoist/data';
+import {parseFilter, required, withFilterByTypes} from '@xh/hoist/data';
 import {button} from '@xh/hoist/desktop/cmp/button';
 import {formField} from '@xh/hoist/desktop/cmp/form';
 import {jsonInput} from '@xh/hoist/desktop/cmp/input';
@@ -151,9 +145,7 @@ class GridFilterDialogLocalModel extends HoistModel {
     }
 
     loadForm() {
-        const filter = withFilterByTypes(this.model.filter, null, 'FunctionFilter') as
-            | CompoundFilter
-            | FieldFilter;
+        const filter = withFilterByTypes(this.model.filter, null, 'FunctionFilter');
         this.formModel.init({
             filter: JSON.stringify(filter?.toJSON() ?? null, undefined, 2)
         });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xh/hoist",
-  "version": "71.0.0-SNAPSHOT.1734633945544",
+  "version": "71.0.0-SNAPSHOT.1735061018823",
   "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 {