@salesforce/templates 66.7.13 → 66.9.0

package/lib/templates/project/reactexternalapp/_p_/_m_/_w_/_a_/package.json

@@ -18,9 +18,10 @@
     "graphql:schema": "node scripts/get-graphql-schema.mjs"
   },
   "dependencies": {
-    "@salesforce/sdk-data": "^1.135.0",
-    "@salesforce/ui-bundle": "^1.135.0",
+    "@salesforce/platform-sdk": "file:../../../../../../../../../sdk/platform-sdk",
+    "@salesforce/ui-bundle": "file:../../../../../../../../../ui-bundle",
     "@tailwindcss/vite": "^4.1.17",
+    "@tanstack/react-form": "^1.27.7",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "date-fns": "^4.1.0",
@@ -35,7 +36,6 @@
     "tailwind-merge": "^3.5.0",
     "tailwindcss": "^4.1.17",
     "tw-animate-css": "^1.4.0",
-    "@tanstack/react-form": "^1.27.7",
     "zod": "^4.3.5"
   },
   "devDependencies": {
@@ -46,7 +46,7 @@
     "@graphql-eslint/eslint-plugin": "^4.1.0",
     "@graphql-tools/utils": "^11.0.0",
     "@playwright/test": "^1.49.0",
-    "@salesforce/vite-plugin-ui-bundle": "^1.135.0",
+    "@salesforce/vite-plugin-ui-bundle": "file:../../../../../../../../../vite-plugin-ui-bundle",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.1.0",
     "@testing-library/user-event": "^14.5.2",

package/lib/templates/project/reactexternalapp/_p_/_m_/_w_/_a_/src/_f_/_os_/_ex_/pages/AccountObjectDetailPage.tsx

@@ -1,6 +1,6 @@
 import { useState } from "react";
 import { useParams, useNavigate } from "react-router";
-import { createDataSDK } from "@salesforce/sdk-data";
+import { createDataSDK } from "@salesforce/platform-sdk";
 import { AlertCircle, ChevronDown, ChevronRight, FileQuestion } from "lucide-react";
 import GET_ACCOUNT_DETAIL from "../api/query/getAccountDetail.graphql?raw";
 import type {
@@ -18,7 +18,7 @@ import {
 } from "../../../../components/ui/collapsible";
 import { Separator } from "../../../../components/ui/separator";
 import { Skeleton } from "../../../../components/ui/skeleton";
-import { useCachedAsyncData } from "../../hooks/useCachedAsyncData";
+import { useAsyncData } from "../../hooks/useAsyncData";
 import { ObjectBreadcrumb } from "../../components/ObjectBreadcrumb";
 
 type AccountNode = NonNullable<
@@ -29,16 +29,16 @@ type AccountNode = NonNullable<
 
 async function fetchAccountDetail(recordId: string): Promise<AccountNode | null | undefined> {
 	const data = await createDataSDK();
-	const response = await data.graphql?.<GetAccountDetailQuery, GetAccountDetailQueryVariables>({
+	const result = await data.graphql!.query<GetAccountDetailQuery, GetAccountDetailQueryVariables>({
 		query: GET_ACCOUNT_DETAIL,
 		variables: { id: recordId },
 	});
 
-	if (response?.errors?.length) {
-		throw new Error(response.errors.map((e) => e.message).join("; "));
+	if (result.errors?.length) {
+		throw new Error(result.errors.map((e) => e.message).join("; "));
 	}
 
-	return response?.data?.uiapi?.query?.Account?.edges?.[0]?.node;
+	return result.data?.uiapi?.query?.Account?.edges?.[0]?.node;
 }
 
 export default function AccountObjectDetail() {
@@ -49,9 +49,7 @@ export default function AccountObjectDetail() {
 		data: account,
 		loading,
 		error,
-	} = useCachedAsyncData(() => fetchAccountDetail(recordId!), [recordId], {
-		key: `account:${recordId}`,
-	});
+	} = useAsyncData(() => fetchAccountDetail(recordId!), [recordId]);
 
 	return (
 		<div className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 py-6">

package/lib/templates/project/reactexternalapp/_p_/_m_/_w_/_a_/src/_f_/_os_/_ex_/pages/AccountSearch.tsx

@@ -6,7 +6,7 @@ import {
 	fetchDistinctIndustries,
 	fetchDistinctTypes,
 } from "../api/accountSearchService";
-import { useCachedAsyncData } from "../../hooks/useCachedAsyncData";
+import { useAsyncData } from "../../hooks/useAsyncData";
 import { fieldValue } from "../../utils/fieldUtils";
 import { useObjectSearchParams } from "../../hooks/useObjectSearchParams";
 import { Alert, AlertTitle, AlertDescription } from "../../../../components/ui/alert";
@@ -42,8 +42,8 @@ import PaginationControls from "../../components/PaginationControls";
 import type { PaginationConfig } from "../../hooks/useObjectSearchParams";
 
 const PAGINATION_CONFIG: PaginationConfig = {
-	defaultPageSize: 6,
-	validPageSizes: [6, 12, 24, 48],
+	defaultPageSize: 7,
+	validPageSizes: [7, 14, 28, 42],
 };
 
 type AccountNode = NonNullable<
@@ -77,22 +77,15 @@ const ACCOUNT_SORT_CONFIGS: SortFieldConfig<keyof Account_OrderBy>[] = [
 
 export default function AccountSearch() {
 	const [filtersOpen, setFiltersOpen] = useState(true);
-	const { data: industryOptions } = useCachedAsyncData(fetchDistinctIndustries, [], {
-		key: "distinctIndustries",
-		ttl: 300_000,
-	});
-	const { data: typeOptions } = useCachedAsyncData(fetchDistinctTypes, [], {
-		key: "distinctTypes",
-		ttl: 300_000,
-	});
+	const { data: industryOptions } = useAsyncData(fetchDistinctIndustries, []);
+	const { data: typeOptions } = useAsyncData(fetchDistinctTypes, []);
 
 	const { filters, sort, query, pagination, resetAll } = useObjectSearchParams<
 		Account_Filter,
 		Account_OrderBy
 	>(FILTER_CONFIGS, ACCOUNT_SORT_CONFIGS, PAGINATION_CONFIG);
 
-	const searchKey = `accounts:${JSON.stringify({ where: query.where, orderBy: query.orderBy, first: pagination.pageSize, after: pagination.afterCursor })}`;
-	const { data, loading, error } = useCachedAsyncData(
+	const { data, loading, error } = useAsyncData(
 		() =>
 			searchAccounts({
 				where: query.where,
@@ -101,7 +94,6 @@ export default function AccountSearch() {
 				after: pagination.afterCursor,
 			}),
 		[query.where, query.orderBy, pagination.pageSize, pagination.afterCursor],
-		{ key: searchKey },
 	);
 
 	const pageInfo = data?.pageInfo;
@@ -196,7 +188,7 @@ export default function AccountSearch() {
 						<ActiveFilters filters={filters.active} onRemove={filters.remove} />
 					</div>
 
-					<div className="min-h-112">
+					<div className="min-h-132">
 						{/* Loading state */}
 						{loading && (
 							<>

package/lib/templates/project/reactexternalapp/_p_/_m_/_w_/_a_/src/_f_/_os_/api/objectSearchService.ts

@@ -1,4 +1,4 @@
-import { createDataSDK } from "@salesforce/sdk-data";
+import { createDataSDK } from "@salesforce/platform-sdk";
 
 export interface ObjectSearchOptions<TWhere, TOrderBy> {
 	where?: TWhere;
@@ -21,24 +21,20 @@ export async function searchObjects<TResult, TQuery, TVariables>(
 	const { where, orderBy, first = 20, after } = options;
 
 	const data = await createDataSDK();
-	const response = await data.graphql?.<TQuery, TVariables>({
-		query,
-		variables: {
-			first,
-			after,
-			where,
-			orderBy,
-		} as TVariables,
+	const variables = { first, after, where, orderBy } as TVariables;
+	const result = await data.graphql!.query<TQuery, TVariables>({
+		query: query,
+		variables: variables,
 	});
 
-	if (response?.errors?.length) {
-		throw new Error(response.errors.map((e) => e.message).join("; "));
+	if (result.errors?.length) {
+		throw new Error(result.errors.map((e) => e.message).join("; "));
 	}
 
-	const result = (response?.data as Record<string, unknown> | undefined)?.uiapi as
+	const uiapi = (result.data as Record<string, unknown> | undefined)?.uiapi as
 		| Record<string, unknown>
 		| undefined;
-	const queryResult = (result?.query as Record<string, unknown> | undefined)?.[objectName] as
+	const queryResult = (uiapi?.query as Record<string, unknown> | undefined)?.[objectName] as
 		| TResult
 		| undefined;
 
@@ -59,17 +55,16 @@ export async function fetchDistinctValues<TQuery>(
 	fieldName: string,
 ): Promise<PicklistOption[]> {
 	const data = await createDataSDK();
-	const response = await data.graphql?.<TQuery>({ query });
-	const errors = response?.errors;
+	const result = await data.graphql!.query<TQuery>({ query: query });
 
-	if (errors?.length) {
-		throw new Error(errors.map((e) => e.message).join("; "));
+	if (result.errors?.length) {
+		throw new Error(result.errors.map((e) => e.message).join("; "));
 	}
 
-	const result = (response?.data as Record<string, unknown> | undefined)?.uiapi as
+	const uiapi = (result.data as Record<string, unknown> | undefined)?.uiapi as
 		| Record<string, unknown>
 		| undefined;
-	const aggregate = (result?.aggregate as Record<string, unknown> | undefined)?.[objectName] as
+	const aggregate = (uiapi?.aggregate as Record<string, unknown> | undefined)?.[objectName] as
 		| { edges?: Array<{ node?: { aggregate?: Record<string, unknown> } }> }
 		| undefined;
 

package/lib/templates/project/reactexternalapp/_p_/_m_/_w_/_a_/src/_f_/_os_/components/filters/NumericRangeFilter.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useState } from "react";
+import { useState } from "react";
 import { Input } from "../../../../components/ui/input";
 
 import { useFilterField } from "../FilterContext";
@@ -67,12 +67,16 @@ export function NumericRangeFilterInputs({
 
 	const externalMin = value?.min ?? "";
 	const externalMax = value?.max ?? "";
-	useEffect(() => {
+	const [prevExternalMin, setPrevExternalMin] = useState(externalMin);
+	const [prevExternalMax, setPrevExternalMax] = useState(externalMax);
+	if (prevExternalMin !== externalMin) {
+		setPrevExternalMin(externalMin);
 		setLocalMin(externalMin);
-	}, [externalMin]);
-	useEffect(() => {
+	}
+	if (prevExternalMax !== externalMax) {
+		setPrevExternalMax(externalMax);
 		setLocalMax(externalMax);
-	}, [externalMax]);
+	}
 
 	const isOutOfBounds = (v: string) => {
 		if (v === "") return false;

package/lib/templates/project/reactexternalapp/_p_/_m_/_w_/_a_/src/_f_/_os_/components/filters/SearchFilter.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useState } from "react";
+import { useState } from "react";
 
 import { SearchBar } from "../SearchBar";
 import { useFilterField } from "../FilterContext";
@@ -22,9 +22,11 @@ export function SearchFilter({
 	const [localValue, setLocalValue] = useState(value?.value ?? "");
 
 	const externalValue = value?.value ?? "";
-	useEffect(() => {
+	const [prevExternalValue, setPrevExternalValue] = useState(externalValue);
+	if (prevExternalValue !== externalValue) {
+		setPrevExternalValue(externalValue);
 		setLocalValue(externalValue);
-	}, [externalValue]);
+	}
 
 	const debouncedOnChange = useDebouncedCallback((v: string) => {
 		if (v) {

package/lib/templates/project/reactexternalapp/_p_/_m_/_w_/_a_/src/_f_/_os_/components/filters/TextFilter.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useState } from "react";
+import { useState } from "react";
 import { Input } from "../../../../components/ui/input";
 import { cn } from "../../../../lib/utils";
 import { useFilterField } from "../FilterContext";
@@ -62,9 +62,11 @@ export function TextFilterInput({
 	const [localValue, setLocalValue] = useState(value?.value ?? "");
 
 	const externalValue = value?.value ?? "";
-	useEffect(() => {
+	const [prevExternalValue, setPrevExternalValue] = useState(externalValue);
+	if (prevExternalValue !== externalValue) {
+		setPrevExternalValue(externalValue);
 		setLocalValue(externalValue);
-	}, [externalValue]);
+	}
 
 	const debouncedOnChange = useDebouncedCallback((v: string) => {
 		if (v) {

package/lib/templates/project/reactexternalapp/_p_/_m_/_w_/_a_/src/_f_/_os_/hooks/useAsyncData.ts

@@ -22,16 +22,24 @@ export function useAsyncData<T>(
 	const [data, setData] = useState<T | null>(null);
 	const [loading, setLoading] = useState(true);
 	const [error, setError] = useState<string | null>(null);
+	const [generation, setGeneration] = useState(0);
 
 	const fetcherRef = useRef(fetcher);
 	useEffect(() => {
 		fetcherRef.current = fetcher;
 	});
 
+	// Detect dep changes during render to reset loading state and bump generation
+	const [prevDeps, setPrevDeps] = useState(deps);
+	if (deps.length !== prevDeps.length || deps.some((d, i) => d !== prevDeps[i])) {
+		setPrevDeps(deps);
+		setGeneration((g) => g + 1);
+		if (!loading) setLoading(true);
+		if (error !== null) setError(null);
+	}
+
 	useEffect(() => {
 		let cancelled = false;
-		setLoading(true);
-		setError(null);
 
 		fetcherRef
 			.current()
@@ -49,8 +57,7 @@ export function useAsyncData<T>(
 		return () => {
 			cancelled = true;
 		};
-		// eslint-disable-next-line react-hooks/exhaustive-deps --- deps are explicitly managed by the caller
-	}, deps);
+	}, [generation]);
 
 	return { data, loading, error };
 }

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

@@ -1,7 +1,7 @@
 /**
  * Extensible user profile fetching and updating via UI API GraphQL.
  */
-import { createDataSDK } from "@salesforce/sdk-data";
+import { createDataSDK } from "@salesforce/platform-sdk";
 import { flattenGraphQLRecord } from "../utils/helpers";
 
 const USER_PROFILE_FIELDS_FULL = `
@@ -46,9 +46,10 @@ function getUserProfileMutation(fields: string): string {
     }`;
 }
 
-function throwOnGraphQLErrors(response: any): void {
-	if (response?.errors?.length) {
-		throw new Error(response.errors.map((e: any) => e.message).join("; "));
+function throwOnGraphQLErrors(errors: { message: string }[] | undefined): void {
+	if (errors?.length) {
+		console.error("GraphQL request failed", errors);
+		throw new Error("An unexpected error occurred");
 	}
 }
 
@@ -62,14 +63,14 @@ export async function fetchUserProfile<T>(
 	fields: string = USER_PROFILE_FIELDS_FULL,
 ): Promise<T> {
 	const data = await createDataSDK();
-	const response: any = await data.graphql?.({
+	const result = await data.graphql!.query<any>({
 		query: getUserProfileQuery(fields),
 		variables: {
 			userId,
 		},
 	});
-	throwOnGraphQLErrors(response);
-	return flattenGraphQLRecord<T>(response?.data?.uiapi?.query?.User?.edges?.[0]?.node);
+	throwOnGraphQLErrors(result.errors);
+	return flattenGraphQLRecord<T>(result.data?.uiapi?.query?.User?.edges?.[0]?.node);
 }
 
 /**
@@ -90,12 +91,12 @@ export async function updateUserProfile<T>(
 	values: Record<string, unknown>,
 ): Promise<T> {
 	const data = await createDataSDK();
-	const response: any = await data.graphql?.({
-		query: getUserProfileMutation(USER_PROFILE_FIELDS_FULL),
+	const result = await data.graphql!.mutate<any>({
+		mutation: getUserProfileMutation(USER_PROFILE_FIELDS_FULL),
 		variables: {
 			input: { Id: userId, User: { ...values } },
 		},
 	});
-	throwOnGraphQLErrors(response);
-	return flattenGraphQLRecord<T>(response?.data?.uiapi?.UserUpdate?.Record);
+	throwOnGraphQLErrors(result.errors);
+	return flattenGraphQLRecord<T>(result.data?.uiapi?.UserUpdate?.Record);
 }

package/lib/templates/project/reactexternalapp/_p_/_m_/_w_/_a_/src/_f_/authentication/authenticationConfig.ts

@@ -49,13 +49,13 @@ export const AUTH_REDIRECT_PARAM = "startUrl";
  * Placeholder text constants for authentication form inputs.
  */
 export const AUTH_PLACEHOLDERS = {
-	EMAIL: "asalesforce@example.com",
-	PASSWORD: "",
-	PASSWORD_CREATE: "",
-	PASSWORD_CONFIRM: "",
-	PASSWORD_NEW: "",
-	PASSWORD_NEW_CONFIRM: "",
-	FIRST_NAME: "Astro",
-	LAST_NAME: "Salesforce",
-	USERNAME: "asalesforce",
+	EMAIL: "e.g. name@example.com",
+	PASSWORD: "Enter your password",
+	PASSWORD_CREATE: "Create a password",
+	PASSWORD_CONFIRM: "Re-enter your password",
+	PASSWORD_NEW: "Enter new password",
+	PASSWORD_NEW_CONFIRM: "Re-enter new password",
+	FIRST_NAME: "e.g. Alex",
+	LAST_NAME: "e.g. Smith",
+	USERNAME: "e.g. asmith",
 } as const;

package/lib/templates/project/reactexternalapp/_p_/_m_/_w_/_a_/src/_f_/authentication/context/AuthContext.tsx

@@ -35,8 +35,8 @@ export function AuthProvider({ children }: AuthProviderProps) {
 			const userData = await getCurrentUser();
 			setUser(userData);
 		} catch (err) {
-			const errorMessage = err instanceof Error ? err.message : "Authentication failed";
-			setError(errorMessage);
+			console.error("Authentication failed", err);
+			setError("Authentication failed");
 			setUser(null);
 		} finally {
 			setLoading(false);
@@ -53,8 +53,25 @@ export function AuthProvider({ children }: AuthProviderProps) {
 	}, []);
 
 	useEffect(() => {
-		checkAuth();
-	}, [checkAuth]);
+		let cancelled = false;
+		getCurrentUser()
+			.then((userData) => {
+				if (!cancelled) setUser(userData);
+			})
+			.catch((err) => {
+				console.error("Authentication failed", err);
+				if (!cancelled) {
+					setError("Authentication failed");
+					setUser(null);
+				}
+			})
+			.finally(() => {
+				if (!cancelled) setLoading(false);
+			});
+		return () => {
+			cancelled = true;
+		};
+	}, []);
 
 	const value: AuthContextType = {
 		user,

package/lib/templates/project/reactexternalapp/_p_/_m_/_w_/_a_/src/_f_/authentication/forms/auth-form.tsx

@@ -4,6 +4,7 @@ import { FooterLink } from "../footers/footer-link";
 import { SubmitButton } from "./submit-button";
 import { CardLayout } from "../../../components/layouts/card-layout";
 import { useFormContext } from "../hooks/form";
+import { useAuth } from "../context/AuthContext";
 import { useId } from "react";
 
 /**
@@ -15,6 +16,8 @@ interface AuthFormProps extends Omit<React.ComponentProps<"form">, "onSubmit"> {
 	description: string;
 	error?: React.ReactNode;
 	success?: React.ReactNode;
+	/** Whether to show the "already logged in" alert and disable submit when authenticated. @default true */
+	showAlreadyLoggedIn?: boolean;
 	submit: {
 		text: string;
 		loadingText?: string;
@@ -32,6 +35,10 @@ interface AuthFormProps extends Omit<React.ComponentProps<"form">, "onSubmit"> {
  * Wraps the specific logic of Login/Register forms with a consistent visual frame (Card),
  * title, and error alert placement. Extends form element props for flexibility.
  * This ensures all auth-related pages look and behave similarly.
+ *
+ * Auth-aware behavior:
+ * - While auth state is loading, the submit button is disabled.
+ * - If the user is already authenticated, an info alert is shown and submit is disabled.
  */
 export function AuthForm({
 	id: providedId,
@@ -39,18 +46,25 @@ export function AuthForm({
 	description,
 	error,
 	success,
+	showAlreadyLoggedIn = true,
 	children,
 	submit,
 	footer,
 	...props
 }: AuthFormProps) {
 	const form = useFormContext();
+	const { isAuthenticated, loading } = useAuth();
 	const generatedId = useId();
 	const id = providedId ?? generatedId;
 
+	const showAuthAlert = showAlreadyLoggedIn && isAuthenticated;
+	const isSubmitDisabled = submit.disabled || showAuthAlert || loading;
+
 	return (
 		<CardLayout title={title} description={description}>
 			<div className="space-y-6">
+				{/* [Dev Note] Auth status alert for authenticated users on public pages */}
+				{showAuthAlert && <StatusAlert variant="info">You are already logged in.</StatusAlert>}
 				{/* [Dev Note] Global form error alert (e.g. "Invalid Credentials") */}
 				{error && <StatusAlert variant="error">{error}</StatusAlert>}
 				{success && <StatusAlert variant="success">{success}</StatusAlert>}
@@ -69,7 +83,7 @@ export function AuthForm({
 						form={id}
 						label={submit.text}
 						loadingLabel={submit.loadingText}
-						disabled={submit.disabled}
+						disabled={isSubmitDisabled}
 						className="mt-6"
 					/>
 				</form>

package/lib/templates/project/reactexternalapp/_p_/_m_/_w_/_a_/src/_f_/authentication/hooks/form.tsx

@@ -40,7 +40,7 @@ function TextField({
 	const id = providedId ?? generatedId;
 	const descriptionId = `${id}-description`;
 	const errorId = `${id}-error`;
-	const isInvalid = field.state.meta.isTouched && field.state.meta.errors.length > 0;
+	const isInvalid = field.state.meta.isBlurred && field.state.meta.errors.length > 0;
 
 	// Deduplicate errors by message
 	const errors = field.state.meta.errors;

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

@@ -1,15 +1,6 @@
 import { Navigate, Outlet, useLocation } from "react-router";
 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:
@@ -17,11 +8,11 @@ export interface PrivateRouteProps {
  * Otherwise, redirects to Login with a 'startUrl' parameter so the user can be
  * returned to this page after successful login.
  */
-export default function PrivateRoute({ showCardSkeleton = false }: PrivateRouteProps) {
+export default function PrivateRoute() {
 	const { isAuthenticated, loading } = useAuth();
 	const location = useLocation();
 
-	if (loading) return showCardSkeleton ? <CardSkeleton contentMaxWidth="md" /> : null;
+	if (loading) return null;
 
 	if (!isAuthenticated) {
 		const searchParams = new URLSearchParams();

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

@@ -4,10 +4,10 @@ import { z } from "zod";
 import { CenteredPageLayout } from "../layout/centered-page-layout";
 import { AuthForm } from "../forms/auth-form";
 import { useAppForm } from "../hooks/form";
-import { createDataSDK } from "@salesforce/sdk-data";
+import { createDataSDK } from "@salesforce/platform-sdk";
 import { ROUTES, AUTH_PLACEHOLDERS } from "../authenticationConfig";
 import { newPasswordSchema } from "../authHelpers";
-import { handleApiResponse, getErrorMessage } from "../utils/helpers";
+import { ApiError, handleApiResponse } from "../utils/helpers";
 
 const changePasswordSchema = z
 	.object({
@@ -17,7 +17,7 @@ const changePasswordSchema = z
 
 export default function ChangePassword() {
 	const [success, setSuccess] = useState(false);
-	const [submitError, setSubmitError] = useState<string | null>(null);
+	const [submitError, setSubmitError] = useState<React.ReactNode>(null);
 
 	const form = useAppForm({
 		defaultValues: { currentPassword: "", newPassword: "", confirmPassword: "" },
@@ -40,11 +40,26 @@ export default function ChangePassword() {
 						Accept: "application/json",
 					},
 				});
-				await handleApiResponse(response, "Password change failed");
+				await handleApiResponse(response);
 				setSuccess(true);
 				form.reset();
 			} catch (err) {
-				setSubmitError(getErrorMessage(err, "Password change failed"));
+				console.error("Password change failed", err);
+				if (err instanceof ApiError) {
+					setSubmitError(
+						err.errors.length === 1 ? (
+							err.errors[0]
+						) : (
+							<ul>
+								{err.errors.map((e, i) => (
+									<li key={i}>{e}</li>
+								))}
+							</ul>
+						),
+					);
+				} else {
+					setSubmitError("Password change failed");
+				}
 			}
 		},
 		onSubmitInvalid: () => {},
@@ -56,6 +71,7 @@ export default function ChangePassword() {
 				<AuthForm
 					title="Change Password"
 					description="Enter your current and new password below"
+					showAlreadyLoggedIn={false}
 					error={submitError}
 					success={
 						success && (

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

@@ -3,9 +3,9 @@ import { z } from "zod";
 import { CenteredPageLayout } from "../layout/centered-page-layout";
 import { AuthForm } from "../forms/auth-form";
 import { useAppForm } from "../hooks/form";
-import { createDataSDK } from "@salesforce/sdk-data";
+import { createDataSDK } from "@salesforce/platform-sdk";
 import { ROUTES, AUTH_PLACEHOLDERS } from "../authenticationConfig";
-import { handleApiResponse, getErrorMessage } from "../utils/helpers";
+import { ApiError, handleApiResponse } from "../utils/helpers";
 
 const forgotPasswordSchema = z.object({
 	username: z.string().trim().toLowerCase().email("Please enter a valid username"),
@@ -13,7 +13,7 @@ const forgotPasswordSchema = z.object({
 
 export default function ForgotPassword() {
 	const [success, setSuccess] = useState(false);
-	const [submitError, setSubmitError] = useState<string | null>(null);
+	const [submitError, setSubmitError] = useState<React.ReactNode>(null);
 
 	const form = useAppForm({
 		defaultValues: { username: "" },
@@ -33,10 +33,25 @@ export default function ForgotPassword() {
 						Accept: "application/json",
 					},
 				});
-				await handleApiResponse(response, "Failed to send reset link");
+				await handleApiResponse(response);
 				setSuccess(true);
 			} catch (err) {
-				setSubmitError(getErrorMessage(err, "Failed to send reset link"));
+				console.error("Failed to send reset link", err);
+				if (err instanceof ApiError) {
+					setSubmitError(
+						err.errors.length === 1 ? (
+							err.errors[0]
+						) : (
+							<ul>
+								{err.errors.map((e, i) => (
+									<li key={i}>{e}</li>
+								))}
+							</ul>
+						),
+					);
+				} else {
+					setSubmitError("Failed to send reset link");
+				}
 			}
 		},
 		onSubmitInvalid: () => {},