@salesforce/templates 66.5.5 → 66.6.0

package/lib/templates/project/reactexternalapp/_p_/_m_/_w_/_a_/src/_f_/_os_/utils/filterUtils.ts

@@ -0,0 +1,372 @@
+/**
+ * filterUtils.ts
+ *
+ * Centralizes all filter-related transformations for the object search feature.
+ * This module handles two distinct concerns:
+ *
+ * 1. **URL serialization** — Converting filter/sort state to and from
+ *    URLSearchParams so that search criteria can be bookmarked, shared, and
+ *    restored on page load.
+ *
+ * 2. **GraphQL query building** — Converting the same filter state into the
+ *    `where` clause shape expected by the GraphQL API.
+ *
+ * Both concerns operate on the shared {@link ActiveFilterValue} type, which
+ * represents a single active filter with a field name, filter type, and one or
+ * more values (value, min, max).
+ */
+
+import type { SortState } from "./sortUtils";
+
+export type FilterFieldType =
+	| "text"
+	| "picklist"
+	| "numeric"
+	| "boolean"
+	| "date"
+	| "daterange"
+	| "multipicklist"
+	| "search";
+
+export type FilterFieldConfig<TFieldName extends string = string> = {
+	field: TFieldName;
+	label: string;
+	type: FilterFieldType;
+	placeholder?: string;
+	/** Required for picklist type. */
+	options?: Array<{ value: string; label: string }>;
+	helpText?: string;
+	/** Required for search type — the fields to match against with `or`. */
+	searchFields?: string[];
+};
+
+export type ActiveFilterValue<TFieldName extends string = string> = {
+	field: TFieldName;
+	label: string;
+	type: FilterFieldType;
+	value?: string;
+	min?: string;
+	max?: string;
+};
+
+// ---------------------------------------------------------------------------
+// URL Serialization
+// ---------------------------------------------------------------------------
+
+/**
+ * Prefix applied to all filter-related URL search params.
+ * This namespaces filter params so they don't collide with other query params
+ * (e.g. pagination, feature flags).
+ *
+ * @example "f.Industry=Technology" or "f.AnnualRevenue.min=1000000"
+ */
+const FILTER_PREFIX = "f.";
+
+/** URL param key for the multi-field search term. */
+const SEARCH_KEY = "q";
+
+/** URL param key for the currently sorted field name. */
+const SORT_KEY = "sort";
+
+/** URL param key for the sort direction (ASC or DESC). */
+const DIR_KEY = "dir";
+
+/** URL param key for the page size preference. */
+const PAGE_SIZE_KEY = "ps";
+const PAGE_KEY = "page";
+
+/**
+ * Serializes filter and sort state into URLSearchParams.
+ *
+ * Encoding scheme:
+ *   - Simple values (text, picklist, boolean, multipicklist):
+ *       `f.<field>=<value>`
+ *   - Range values (numeric, date, daterange):
+ *       `f.<field>.min=<min>` and/or `f.<field>.max=<max>`
+ *   - Sort: `sort=<field>&dir=ASC|DESC`
+ *
+ * @param filters - The currently active filters to serialize.
+ * @param sort    - The current sort state, or null if no sort is applied.
+ * @returns A URLSearchParams instance representing the full search state.
+ *
+ * @example
+ * ```ts
+ * const params = filtersToSearchParams(
+ *   [{ field: "Industry", type: "picklist", value: "Technology" }],
+ *   { field: "Name", direction: "ASC" },
+ * );
+ * // params.toString() => "f.Industry=Technology&sort=Name&dir=ASC"
+ * ```
+ */
+export function filtersToSearchParams(
+	filters: ActiveFilterValue[],
+	sort: SortState | null,
+	pageSize?: number,
+	pageIndex?: number,
+): URLSearchParams {
+	const params = new URLSearchParams();
+
+	for (const filter of filters) {
+		if (filter.type === "search") {
+			if (filter.value) params.set(SEARCH_KEY, filter.value);
+			continue;
+		}
+		if (filter.value !== undefined && filter.value !== "") {
+			params.set(`${FILTER_PREFIX}${filter.field}`, filter.value);
+		}
+		if (filter.min !== undefined && filter.min !== "") {
+			params.set(`${FILTER_PREFIX}${filter.field}.min`, filter.min);
+		}
+		if (filter.max !== undefined && filter.max !== "") {
+			params.set(`${FILTER_PREFIX}${filter.field}.max`, filter.max);
+		}
+	}
+
+	if (sort) {
+		params.set(SORT_KEY, sort.field);
+		params.set(DIR_KEY, sort.direction);
+	}
+
+	if (pageSize !== undefined) {
+		params.set(PAGE_SIZE_KEY, String(pageSize));
+	}
+
+	if (pageIndex !== undefined && pageIndex > 0) {
+		params.set(PAGE_KEY, String(pageIndex + 1));
+	}
+
+	return params;
+}
+
+/**
+ * Deserializes URLSearchParams back into filter and sort state.
+ *
+ * Requires the full list of filter configs so it knows which URL params to look
+ * for and what type each filter is. Params that don't match a known config are
+ * silently ignored, making this safe against stale or hand-edited URLs.
+ *
+ * @param params  - The URLSearchParams to parse (typically from the browser URL).
+ * @param configs - The filter field configurations defining available filters.
+ * @returns An object containing the deserialized `filters` array and `sort` state.
+ *
+ * @example
+ * ```ts
+ * const url = new URLSearchParams("f.Industry=Technology&sort=Name&dir=ASC");
+ * const { filters, sort } = searchParamsToFilters(url, filterConfigs);
+ * // filters => [{ field: "Industry", type: "picklist", value: "Technology" }]
+ * // sort    => { field: "Name", direction: "ASC" }
+ * ```
+ */
+export function searchParamsToFilters(
+	params: URLSearchParams,
+	configs: FilterFieldConfig[],
+): {
+	filters: ActiveFilterValue[];
+	sort: SortState | null;
+	pageSize: number | undefined;
+	pageIndex: number;
+} {
+	const filters: ActiveFilterValue[] = [];
+
+	for (const config of configs) {
+		const { field, label, type } = config;
+
+		if (type === "search") {
+			const q = params.get(SEARCH_KEY);
+			if (q) {
+				filters.push({ field, label, type: "search", value: q });
+			}
+			continue;
+		}
+
+		const value = params.get(`${FILTER_PREFIX}${field}`) ?? undefined;
+		const min = params.get(`${FILTER_PREFIX}${field}.min`) ?? undefined;
+		const max = params.get(`${FILTER_PREFIX}${field}.max`) ?? undefined;
+
+		const hasValue = value !== undefined && value !== "";
+		const hasRange = (min !== undefined && min !== "") || (max !== undefined && max !== "");
+
+		if (hasValue || hasRange) {
+			filters.push({ field, label, type, value, min, max });
+		}
+	}
+
+	let sort: SortState | null = null;
+	const sortField = params.get(SORT_KEY);
+	const sortDir = params.get(DIR_KEY);
+	if (sortField) {
+		sort = {
+			field: sortField,
+			direction: sortDir === "DESC" ? "DESC" : "ASC",
+		};
+	}
+
+	const pageSizeRaw = params.get(PAGE_SIZE_KEY);
+	const pageSize = pageSizeRaw ? parseInt(pageSizeRaw, 10) : undefined;
+
+	const pageRaw = params.get(PAGE_KEY);
+	const page = pageRaw ? parseInt(pageRaw, 10) : 1;
+	const pageIndex = !isNaN(page) && page > 1 ? page - 1 : 0;
+
+	return {
+		filters,
+		sort,
+		pageSize: pageSize && !isNaN(pageSize) ? pageSize : undefined,
+		pageIndex,
+	};
+}
+
+// ---------------------------------------------------------------------------
+// GraphQL Filter Building
+// ---------------------------------------------------------------------------
+
+/**
+ * Converts an array of active filter values into a GraphQL `where` clause.
+ *
+ * Each filter is individually converted to a clause via {@link buildSingleFilter},
+ * then multiple clauses are combined with a top-level `and` operator. This ensures
+ * all active filters are applied simultaneously (intersection semantics).
+ *
+ * @typeParam TFilter - The GraphQL filter input type (e.g. `AccountFilterInput`).
+ * @param filters - The active filters to convert.
+ * @returns A filter object for the GraphQL `where` variable, or `undefined` if
+ *          no filters are active (which tells the API to return unfiltered results).
+ *
+ * @example
+ * ```ts
+ * const where = buildFilter<AccountFilterInput>([
+ *   { field: "Industry", type: "picklist", value: "Technology" },
+ *   { field: "AnnualRevenue", type: "numeric", min: "1000000" },
+ * ]);
+ * // where => { and: [
+ * //   { Industry: { eq: "Technology" } },
+ * //   { AnnualRevenue: { gte: 1000000 } },
+ * // ]}
+ * ```
+ */
+export function buildFilter<TFilter>(
+	filters: ActiveFilterValue[],
+	configs: FilterFieldConfig[],
+): TFilter | undefined {
+	const configMap = new Map(configs.map((c) => [c.field, c]));
+	const clauses: TFilter[] = [];
+
+	for (const filter of filters) {
+		const clause = buildSingleFilter<TFilter>(filter, configMap.get(filter.field));
+		if (clause) clauses.push(clause);
+	}
+
+	if (clauses.length === 0) return undefined;
+	if (clauses.length === 1) return clauses[0];
+	return { and: clauses } as TFilter;
+}
+
+/**
+ * Converts a YYYY-MM-DD date string to a full ISO-8601 datetime at midnight UTC.
+ * Used as the inclusive lower bound for date range queries.
+ */
+function toStartOfDay(dateStr: string): string {
+	return `${dateStr}T00:00:00.000Z`;
+}
+
+/**
+ * Converts a YYYY-MM-DD date string to a full ISO-8601 datetime at the last
+ * millisecond of the day in UTC. Used as the inclusive upper bound for date
+ * range queries.
+ */
+function toEndOfDay(dateStr: string): string {
+	return `${dateStr}T23:59:59.999Z`;
+}
+
+/**
+ * Converts a single active filter value into a GraphQL filter clause.
+ *
+ * Supported filter types and their GraphQL mappings:
+ *
+ * | Type            | GraphQL operator(s) | Example output                                           |
+ * |-----------------|---------------------|----------------------------------------------------------|
+ * | `text`          | `like`              | `{ Name: { like: "%Acme%" } }`                           |
+ * | `picklist`      | `eq`                | `{ Industry: { eq: "Technology" } }`                      |
+ * | `multipicklist` | `eq` or `in`        | `{ Type: { in: ["A", "B"] } }`                            |
+ * | `numeric`       | `gte` / `lte`       | `{ Revenue: { gte: 1000, lte: 5000 } }`                   |
+ * | `boolean`       | `eq`                | `{ IsActive: { eq: true } }`                              |
+ * | `date`          | dynamic operator    | `{ CreatedDate: { gte: { value: "..." } } }`              |
+ * | `daterange`     | `gte` + `lte`       | Combined with `and` if both bounds set                    |
+ * | `search`        | `like` + `or`       | `{ or: [{ Name: { like: "%x%" } }, { Phone: { like: "%x%" } }] }` |
+ *
+ * The `search` type uses `config.searchFields` to build an `or` clause that
+ * matches the search term across multiple fields simultaneously (union semantics).
+ *
+ * @param filter - The active filter value to convert.
+ * @param config - The corresponding field config. Required for `search` type
+ *                 (provides `searchFields`); optional for all other types.
+ * @returns A single filter clause, or `null` if the filter has no meaningful value.
+ */
+function buildSingleFilter<TFilter>(
+	filter: ActiveFilterValue,
+	config?: FilterFieldConfig,
+): TFilter | null {
+	const { field, type, value, min, max } = filter;
+
+	switch (type) {
+		case "text": {
+			if (!value) return null;
+			return { [field]: { like: `%${value}%` } } as TFilter;
+		}
+		case "picklist": {
+			if (!value) return null;
+			return { [field]: { eq: value } } as TFilter;
+		}
+		case "numeric": {
+			if (!min && !max) return null;
+			const ops: Record<string, number> = {};
+			if (min) ops.gte = Number(min);
+			if (max) ops.lte = Number(max);
+			return { [field]: ops } as TFilter;
+		}
+		case "boolean": {
+			if (value === undefined || value === "") return null;
+			return { [field]: { eq: value === "true" } } as TFilter;
+		}
+		case "multipicklist": {
+			if (!value) return null;
+			const values = value.split(",");
+			if (values.length === 1) {
+				return { [field]: { eq: values[0] } } as TFilter;
+			}
+			return { [field]: { in: values } } as TFilter;
+		}
+		case "date": {
+			if (!min && !max) return null;
+			const op = value ?? (min ? "gte" : "lte");
+			const dateStr = min ?? max;
+			const isoStr = op === "gte" || op === "gt" ? toStartOfDay(dateStr!) : toEndOfDay(dateStr!);
+			return { [field]: { [op]: { value: isoStr } } } as TFilter;
+		}
+		case "daterange": {
+			if (!min && !max) return null;
+			const clauses: TFilter[] = [];
+			if (min) {
+				clauses.push({
+					[field]: { gte: { value: toStartOfDay(min) } },
+				} as TFilter);
+			}
+			if (max) {
+				clauses.push({
+					[field]: { lte: { value: toEndOfDay(max) } },
+				} as TFilter);
+			}
+			return clauses.length === 1 ? clauses[0] : ({ and: clauses } as TFilter);
+		}
+		case "search": {
+			if (!value) return null;
+			const searchFields = config?.searchFields ?? [];
+			if (searchFields.length === 0) return null;
+			const clauses = searchFields.map((f) => ({ [f]: { like: `%${value}%` } }) as TFilter);
+			if (clauses.length === 1) return clauses[0];
+			return { or: clauses } as TFilter;
+		}
+		default:
+			return null;
+	}
+}

package/lib/templates/project/reactexternalapp/_p_/_m_/_w_/_a_/src/_f_/_os_/utils/sortUtils.ts

@@ -0,0 +1,38 @@
+import { ResultOrder, NullOrder } from "../../../api/graphql-operations-types";
+
+export type SortFieldConfig<TFieldName extends string = string> = {
+	field: TFieldName;
+	label: string;
+};
+
+export type SortState<TFieldName extends string = string> = {
+	field: TFieldName;
+	direction: "ASC" | "DESC";
+};
+
+/**
+ * Converts a {@link SortState} into a GraphQL order-by object.
+ *
+ * @typeParam TOrderBy - The GraphQL order-by input type (e.g. `AccountOrderByInput`).
+ * @param sort - The current sort state from the UI, or `null` if no sort is applied.
+ * @returns An order-by object for the GraphQL query's `orderBy` variable, or
+ *          `undefined` if no sort is active (which uses the API's default ordering).
+ *
+ * @example
+ * ```ts
+ * const orderBy = buildOrderBy<AccountOrderByInput>({
+ *   field: "Name",
+ *   direction: "ASC",
+ * });
+ * // orderBy => { Name: { order: ResultOrder.Asc, nulls: NullOrder.Last } }
+ * ```
+ */
+export function buildOrderBy<TOrderBy>(sort: SortState | null): TOrderBy | undefined {
+	if (!sort) return undefined;
+	return {
+		[sort.field]: {
+			order: sort.direction === "ASC" ? ResultOrder.Asc : ResultOrder.Desc,
+			nulls: NullOrder.Last,
+		},
+	} as TOrderBy;
+}

package/lib/templates/project/{reactb2x → reactexternalapp}/_p_/_m_/_w_/_a_/src/_f_/authentication/api/userProfileApi.ts

@@ -1,24 +1,24 @@
 /**
  * Extensible user profile fetching and updating via UI API GraphQL.
  */
-import { getDataSDK } from "@salesforce/sdk-data";
+import { createDataSDK } from "@salesforce/sdk-data";
 import { flattenGraphQLRecord } from "../utils/helpers";
 
 const USER_PROFILE_FIELDS_FULL = `
     Id
-    FirstName { value }
-    LastName { value }
-    Email { value }
-    Phone { value }
-    Street { value }
-    City { value }
-    State { value }
-    PostalCode { value }
-    Country { value }`;
+    FirstName @optional { value }
+    LastName @optional { value }
+    Email @optional { value }
+    Phone @optional { value }
+    Street @optional { value }
+    City @optional { value }
+    State @optional { value }
+    PostalCode @optional { value }
+    Country @optional { value }`;
 
 const USER_CONTACT_FIELDS = `
     Id
-    ContactId { value }`;
+    ContactId @optional { value }`;
 
 function getUserProfileQuery(fields: string): string {
 	return `
@@ -61,7 +61,7 @@ export async function fetchUserProfile<T>(
 	userId: string,
 	fields: string = USER_PROFILE_FIELDS_FULL,
 ): Promise<T> {
-	const data = await getDataSDK();
+	const data = await createDataSDK();
 	const response: any = await data.graphql?.(getUserProfileQuery(fields), {
 		userId,
 	});
@@ -86,7 +86,7 @@ export async function updateUserProfile<T>(
 	userId: string,
 	values: Record<string, unknown>,
 ): Promise<T> {
-	const data = await getDataSDK();
+	const data = await createDataSDK();
 	const response: any = await data.graphql?.(getUserProfileMutation(USER_PROFILE_FIELDS_FULL), {
 		input: { Id: userId, User: { ...values } },
 	});

package/lib/templates/project/{reactb2x → reactexternalapp}/_p_/_m_/_w_/_a_/src/_f_/authentication/layouts/privateRouteLayout.tsx

@@ -3,17 +3,25 @@ import { useAuth } from "../context/AuthContext";
 import { AUTH_REDIRECT_PARAM, ROUTES } from "../authenticationConfig";
 import { CardSkeleton } from "../layout/card-skeleton";
 
+export interface PrivateRouteProps {
+	/**
+	 * Whether to show a card skeleton placeholder while authentication is loading.
+	 * @default false
+	 */
+	showCardSkeleton?: boolean;
+}
+
 /**
  * [Dev Note] Route Guard:
  * Renders the child route (Outlet) if the user is authenticated.
  * Otherwise, redirects to Login with a 'startUrl' parameter so the user can be
  * returned to this page after successful login.
  */
-export default function PrivateRoute() {
+export default function PrivateRoute({ showCardSkeleton = false }: PrivateRouteProps) {
 	const { isAuthenticated, loading } = useAuth();
 	const location = useLocation();
 
-	if (loading) return <CardSkeleton contentMaxWidth="md" />;
+	if (loading) return showCardSkeleton ? <CardSkeleton contentMaxWidth="md" /> : null;
 
 	if (!isAuthenticated) {
 		const searchParams = new URLSearchParams();

package/lib/templates/project/{reactb2x → reactexternalapp}/_p_/_m_/_w_/_a_/src/_f_/authentication/pages/ChangePassword.tsx

@@ -4,7 +4,7 @@ import { z } from "zod";
 import { CenteredPageLayout } from "../layout/centered-page-layout";
 import { AuthForm } from "../forms/auth-form";
 import { useAppForm } from "../hooks/form";
-import { getDataSDK } from "@salesforce/sdk-data";
+import { createDataSDK } from "@salesforce/sdk-data";
 import { ROUTES, AUTH_PLACEHOLDERS } from "../authenticationConfig";
 import { newPasswordSchema } from "../authHelpers";
 import { handleApiResponse, getErrorMessage } from "../utils/helpers";
@@ -28,7 +28,7 @@ export default function ChangePassword() {
 			try {
 				// [Dev Note] Custom Apex Endpoint: /auth/change-password
 				// You must ensure this Apex class exists in your org
-				const sdk = await getDataSDK();
+				const sdk = await createDataSDK();
 				const response = await sdk.fetch!("/services/apexrest/auth/change-password", {
 					method: "POST",
 					body: JSON.stringify({

package/lib/templates/project/{reactb2x → reactexternalapp}/_p_/_m_/_w_/_a_/src/_f_/authentication/pages/ForgotPassword.tsx

@@ -3,7 +3,7 @@ import { z } from "zod";
 import { CenteredPageLayout } from "../layout/centered-page-layout";
 import { AuthForm } from "../forms/auth-form";
 import { useAppForm } from "../hooks/form";
-import { getDataSDK } from "@salesforce/sdk-data";
+import { createDataSDK } from "@salesforce/sdk-data";
 import { ROUTES, AUTH_PLACEHOLDERS } from "../authenticationConfig";
 import { handleApiResponse, getErrorMessage } from "../utils/helpers";
 
@@ -24,7 +24,7 @@ export default function ForgotPassword() {
 			try {
 				// [Dev Note] Custom Apex Endpoint: /auth/forgot-password
 				// You must ensure this Apex class exists in your org
-				const sdk = await getDataSDK();
+				const sdk = await createDataSDK();
 				const response = await sdk.fetch!("/services/apexrest/auth/forgot-password", {
 					method: "POST",
 					body: JSON.stringify({ username: value.username.trim() }),

package/lib/templates/project/{reactb2x → reactexternalapp}/_p_/_m_/_w_/_a_/src/_f_/authentication/pages/Login.tsx

@@ -4,7 +4,7 @@ import { z } from "zod";
 import { CenteredPageLayout } from "../layout/centered-page-layout";
 import { AuthForm } from "../forms/auth-form";
 import { useAppForm } from "../hooks/form";
-import { getDataSDK } from "@salesforce/sdk-data";
+import { createDataSDK } from "@salesforce/sdk-data";
 import { ROUTES } from "../authenticationConfig";
 import { emailSchema, getStartUrl, type AuthResponse } from "../authHelpers";
 import { handleApiResponse, getErrorMessage } from "../utils/helpers";
@@ -30,7 +30,7 @@ export default function Login() {
 				// "/services/apexrest/auth/login" refers to a custom Apex REST resource.
 				// You must ensure this Apex class exists in your org and handles the login logic
 				// (e.g., creating a session or returning a token).
-				const sdk = await getDataSDK();
+				const sdk = await createDataSDK();
 				const response = await sdk.fetch!("/services/apexrest/auth/login", {
 					method: "POST",
 					body: JSON.stringify({

package/lib/templates/project/{reactb2x → reactexternalapp}/_p_/_m_/_w_/_a_/src/_f_/authentication/pages/Profile.tsx

@@ -46,8 +46,19 @@ export default function Profile() {
 			setSubmitError(null);
 			setSuccess(false);
 			try {
-				const updated = await updateUserProfile<ProfileFormValues>(user.id, value);
-				setProfile(updated);
+				const updated = await updateUserProfile<Partial<ProfileFormValues>>(user.id, value);
+				// Merge with submitted values so missing fields (e.g. due to FLS) don't break the form
+				setProfile({
+					FirstName: updated.FirstName ?? value.FirstName ?? "",
+					LastName: updated.LastName ?? value.LastName ?? "",
+					Email: updated.Email ?? value.Email ?? "",
+					Phone: updated.Phone ?? value.Phone ?? null,
+					Street: updated.Street ?? value.Street ?? null,
+					City: updated.City ?? value.City ?? null,
+					State: updated.State ?? value.State ?? null,
+					PostalCode: updated.PostalCode ?? value.PostalCode ?? null,
+					Country: updated.Country ?? value.Country ?? null,
+				});
 				setSuccess(true);
 				window.scrollTo({ top: 0, behavior: "smooth" });
 			} catch (err) {
@@ -59,10 +70,21 @@ export default function Profile() {
 
 	useEffect(() => {
 		let mounted = true;
-		fetchUserProfile<ProfileFormValues>(user.id)
+		fetchUserProfile<Partial<ProfileFormValues>>(user.id)
 			.then((data) => {
 				if (mounted) {
-					setProfile(data);
+					// Merge with defaults so missing fields (e.g. due to FLS) don't break the form
+					setProfile({
+						FirstName: data.FirstName ?? "",
+						LastName: data.LastName ?? "",
+						Email: data.Email ?? "",
+						Phone: data.Phone ?? null,
+						Street: data.Street ?? null,
+						City: data.City ?? null,
+						State: data.State ?? null,
+						PostalCode: data.PostalCode ?? null,
+						Country: data.Country ?? null,
+					});
 				}
 			})
 			.catch((err: any) => {

package/lib/templates/project/{reactb2x → reactexternalapp}/_p_/_m_/_w_/_a_/src/_f_/authentication/pages/Register.tsx

@@ -4,7 +4,7 @@ import { z } from "zod";
 import { CenteredPageLayout } from "../layout/centered-page-layout";
 import { AuthForm } from "../forms/auth-form";
 import { useAppForm } from "../hooks/form";
-import { getDataSDK } from "@salesforce/sdk-data";
+import { createDataSDK } from "@salesforce/sdk-data";
 import { ROUTES, AUTH_PLACEHOLDERS } from "../authenticationConfig";
 import { emailSchema, passwordSchema, getStartUrl, type AuthResponse } from "../authHelpers";
 import { handleApiResponse, getErrorMessage } from "../utils/helpers";
@@ -47,7 +47,7 @@ export default function Register() {
 				// You must ensure this Apex class exists in your org and handles registration
 				// (e.g., duplicate checks and user creation such as Site.createExternalUser).
 				const { confirmPassword, ...request } = formFieldValues;
-				const sdk = await getDataSDK();
+				const sdk = await createDataSDK();
 				const response = await sdk.fetch!("/services/apexrest/auth/register", {
 					method: "POST",
 					body: JSON.stringify({ request }),

package/lib/templates/project/{reactb2x → reactexternalapp}/_p_/_m_/_w_/_a_/src/_f_/authentication/pages/ResetPassword.tsx

@@ -5,7 +5,7 @@ import { CenteredPageLayout } from "../layout/centered-page-layout";
 import { AuthForm } from "../forms/auth-form";
 import { StatusAlert } from "../../../components/alerts/status-alert";
 import { useAppForm } from "../hooks/form";
-import { getDataSDK } from "@salesforce/sdk-data";
+import { createDataSDK } from "@salesforce/sdk-data";
 import { ROUTES, AUTH_PLACEHOLDERS } from "../authenticationConfig";
 import { newPasswordSchema } from "../authHelpers";
 import { handleApiResponse, getErrorMessage } from "../utils/helpers";
@@ -25,7 +25,7 @@ export default function ResetPassword() {
 			try {
 				// [Dev Note] Custom Apex Endpoint: /auth/reset-password
 				// You must ensure this Apex class exists in your org
-				const sdk = await getDataSDK();
+				const sdk = await createDataSDK();
 				const response = await sdk.fetch!("/services/apexrest/auth/reset-password", {
 					method: "POST",
 					body: JSON.stringify({ token, newPassword: value.newPassword }),

package/lib/templates/project/{reactb2x → reactexternalapp}/_p_/_m_/_w_/_a_/src/_f_/authentication/sessionTimeout/SessionTimeoutValidator.tsx

@@ -253,19 +253,14 @@ function useSessionTimeout(config: SessionTimeoutConfig): SessionTimeoutResult {
 		isPollingRef.current = true;
 		setIsPolling(true);
 
-		try {
-			const response = await pollSessionTimeServlet(basePath);
+		const response = await pollSessionTimeServlet(basePath);
+		isPollingRef.current = false;
+		setIsPolling(false);
 
-			// Success - reset retry state and process response
-			isPollingRef.current = false;
-			setIsPolling(false);
+		if (response) {
 			retry.resetRetry();
 			processTimeoutResponse(response.sr);
-		} catch (error) {
-			console.error("[useSessionTimeout] Poll failed:", error);
-			// Reset polling flags before retry so handleRetryWithBackoff doesn't skip
-			isPollingRef.current = false;
-			setIsPolling(false);
+		} else {
 			handleRetryWithBackoff(() => checkSessionRef.current?.());
 		}
 	}, [basePath, retry, processTimeoutResponse, handleRetryWithBackoff]);
@@ -274,15 +269,12 @@ function useSessionTimeout(config: SessionTimeoutConfig): SessionTimeoutResult {
 	 * Extend the session (called when user clicks "Continue Working")
 	 */
 	const extendSession = useCallback(async () => {
-		try {
-			const response = await extendSessionTime(basePath);
+		const response = await extendSessionTime(basePath);
 
-			// Reset retry state and process the new session time
+		if (response) {
 			retry.resetRetry();
 			processTimeoutResponse(response.sr);
-		} catch (error) {
-			console.error("[useSessionTimeout] Failed to extend session:", error);
-			// On failure, retry extending session (not checkSession)
+		} else {
 			handleRetryWithBackoff(() => extendSessionRef.current?.());
 		}
 	}, [basePath, retry, processTimeoutResponse, handleRetryWithBackoff]);