@salesforce/ui-bundle-template-app-react-template-b2x 3.0.0 → 3.1.1

package/dist/CHANGELOG.md

@@ -3,6 +3,23 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [3.1.1](https://github.com/salesforce-experience-platform-emu/webapps/compare/v3.1.0...v3.1.1) (2026-05-12)
+
+**Note:** Version bump only for package @salesforce/ui-bundle-template-base-sfdx-project
+
+
+
+
+
+## [3.1.0](https://github.com/salesforce-experience-platform-emu/webapps/compare/v3.0.0...v3.1.0) (2026-05-12)
+
+
+### Features
+
+* post tdx changes @W-22390798 ([#500](https://github.com/salesforce-experience-platform-emu/webapps/issues/500)) ([b611d9e](https://github.com/salesforce-experience-platform-emu/webapps/commit/b611d9ecbadd07d052bd7d9a4f5659dec422bf22))
+
+
+
 ## [3.0.0](https://github.com/salesforce-experience-platform-emu/webapps/compare/v2.2.1...v3.0.0) (2026-05-11)
 
 **Note:** Version bump only for package @salesforce/ui-bundle-template-base-sfdx-project

package/dist/force-app/main/default/uiBundles/reactexternalapp/src/components/alerts/status-alert.tsx

@@ -1,5 +1,5 @@
 import { cva, type VariantProps } from 'class-variance-authority';
-import { AlertCircleIcon, CheckCircle2Icon } from 'lucide-react';
+import { AlertCircleIcon, CheckCircle2Icon, InfoIcon } from 'lucide-react';
 import { Alert, AlertDescription } from '../../components/ui/alert';
 import { useId } from 'react';
 
@@ -8,6 +8,7 @@ const statusAlertVariants = cva('', {
     variant: {
       error: '',
       success: '',
+      info: 'text-blue-600 *:[svg]:text-current *:data-[slot=alert-description]:text-blue-600/90',
     },
   },
   defaultVariants: {
@@ -18,11 +19,11 @@ const statusAlertVariants = cva('', {
 interface StatusAlertProps extends VariantProps<typeof statusAlertVariants> {
   children?: React.ReactNode;
   /** Alert variant type. @default "error" */
-  variant?: 'error' | 'success';
+  variant?: 'error' | 'success' | 'info';
 }
 
 /**
- * Status alert component for displaying error or success messages.
+ * Status alert component for displaying error, success, or info messages.
  * Returns null if no children are provided.
  */
 export function StatusAlert({ children, variant = 'error' }: StatusAlertProps) {
@@ -31,6 +32,12 @@ export function StatusAlert({ children, variant = 'error' }: StatusAlertProps) {
 
   const isError = variant === 'error';
 
+  const icon = {
+    error: <AlertCircleIcon aria-hidden="true" />,
+    success: <CheckCircle2Icon aria-hidden="true" />,
+    info: <InfoIcon aria-hidden="true" />,
+  }[variant];
+
   return (
     <Alert
       variant={isError ? 'destructive' : 'default'}
@@ -38,11 +45,7 @@ export function StatusAlert({ children, variant = 'error' }: StatusAlertProps) {
       aria-describedby={descriptionId}
       role={isError ? 'alert' : 'status'}
     >
-      {isError ? (
-        <AlertCircleIcon aria-hidden="true" />
-      ) : (
-        <CheckCircle2Icon aria-hidden="true" />
-      )}
+      {icon}
       <AlertDescription id={descriptionId}>{children}</AlertDescription>
     </Alert>
   );

package/dist/force-app/main/default/uiBundles/reactexternalapp/src/components/ui/input.tsx

@@ -8,7 +8,7 @@ function Input({ className, type, ...props }: React.ComponentProps<'input'>) {
       type={type}
       data-slot="input"
       className={cn(
-        'dark:bg-input/30 border-input focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 disabled:bg-input/50 dark:disabled:bg-input/80 h-8 rounded-lg border bg-transparent px-2.5 py-1 text-base transition-colors file:h-6 file:text-sm file:font-medium focus-visible:ring-3 aria-invalid:ring-3 md:text-sm file:text-foreground placeholder:text-muted-foreground w-full min-w-0 outline-none file:inline-flex file:border-0 file:bg-transparent disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50',
+        'dark:bg-input/30 border-input focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 disabled:bg-input/50 dark:disabled:bg-input/80 h-8 rounded-lg border bg-transparent px-2.5 py-1 text-base transition-colors file:h-6 file:text-sm file:font-medium focus-visible:ring-3 aria-invalid:ring-3 md:text-sm file:text-foreground placeholder:text-muted-foreground/70 placeholder:italic w-full min-w-0 outline-none file:inline-flex file:border-0 file:bg-transparent disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50',
         className
       )}
       {...props}

package/dist/force-app/main/default/uiBundles/reactexternalapp/src/features/authentication/api/userProfileApi.ts

@@ -48,7 +48,8 @@ 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("; "));
+		console.error("GraphQL request failed", response.errors);
+		throw new Error("An unexpected error occurred");
 	}
 }
 

package/dist/force-app/main/default/uiBundles/reactexternalapp/src/features/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/dist/force-app/main/default/uiBundles/reactexternalapp/src/features/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/dist/force-app/main/default/uiBundles/reactexternalapp/src/features/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/dist/force-app/main/default/uiBundles/reactexternalapp/src/features/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/dist/force-app/main/default/uiBundles/reactexternalapp/src/features/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/dist/force-app/main/default/uiBundles/reactexternalapp/src/features/authentication/pages/ChangePassword.tsx

@@ -7,7 +7,7 @@ import { useAppForm } from "../hooks/form";
 import { createDataSDK } from "@salesforce/platform-sdk-data";
 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/dist/force-app/main/default/uiBundles/reactexternalapp/src/features/authentication/pages/ForgotPassword.tsx

@@ -5,7 +5,7 @@ import { AuthForm } from "../forms/auth-form";
 import { useAppForm } from "../hooks/form";
 import { createDataSDK } from "@salesforce/platform-sdk-data";
 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: () => {},

package/dist/force-app/main/default/uiBundles/reactexternalapp/src/features/authentication/pages/Login.tsx

@@ -7,7 +7,7 @@ import { useAppForm } from "../hooks/form";
 import { createDataSDK } from "@salesforce/platform-sdk-data";
 import { ROUTES } from "../authenticationConfig";
 import { emailSchema, getStartUrl, type AuthResponse } from "../authHelpers";
-import { handleApiResponse, getErrorMessage } from "../utils/helpers";
+import { ApiError, handleApiResponse } from "../utils/helpers";
 
 const loginSchema = z.object({
 	email: emailSchema,
@@ -17,7 +17,7 @@ const loginSchema = z.object({
 export default function Login() {
 	const navigate = useNavigate();
 	const [searchParams] = useSearchParams();
-	const [submitError, setSubmitError] = useState<string | null>(null);
+	const [submitError, setSubmitError] = useState<React.ReactNode>(null);
 
 	const form = useAppForm({
 		defaultValues: { email: "", password: "" },
@@ -43,7 +43,7 @@ export default function Login() {
 						Accept: "application/json",
 					},
 				});
-				const result = await handleApiResponse<AuthResponse>(response, "Login failed");
+				const result = await handleApiResponse<AuthResponse>(response);
 				if (result?.redirectUrl) {
 					// Hard navigate to the URL which establishes the server session cookie
 					window.location.replace(result.redirectUrl);
@@ -52,7 +52,22 @@ export default function Login() {
 					navigate("/", { replace: true });
 				}
 			} catch (err) {
-				setSubmitError(getErrorMessage(err, "Login failed"));
+				console.error("Login 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("Login failed");
+				}
 			}
 		},
 		onSubmitInvalid: () => {},

package/dist/force-app/main/default/uiBundles/reactexternalapp/src/features/authentication/pages/Profile.tsx

@@ -2,14 +2,14 @@ import { useState, useEffect } from "react";
 import { z } from "zod";
 
 import { CenteredPageLayout } from "../layout/centered-page-layout";
-import { CardSkeleton } from "../layout/card-skeleton";
 import { AuthForm } from "../forms/auth-form";
 import { useAppForm } from "../hooks/form";
 import { ROUTES } from "../authenticationConfig";
 import { emailSchema } from "../authHelpers";
-import { getErrorMessage } from "../utils/helpers";
 import { useUser } from "../context/AuthContext";
 import { fetchUserProfile, updateUserProfile } from "../api/userProfileApi";
+import { Skeleton } from "../../../components/ui/skeleton";
+import { Field, FieldLabel } from "../../../components/ui/field";
 
 const optionalString = z
 	.string()
@@ -32,6 +32,38 @@ const profileSchema = z.object({
 
 type ProfileFormValues = z.infer<typeof profileSchema>;
 
+function FieldSkeleton({ label }: { label: string }) {
+	return (
+		<Field>
+			<FieldLabel>{label}</FieldLabel>
+			<Skeleton className="h-9 w-full rounded-md" />
+		</Field>
+	);
+}
+
+function ProfileFieldsSkeleton() {
+	return (
+		<div role="status" aria-live="polite">
+			<span className="sr-only">Loading profile…</span>
+			<FieldSkeleton label="Email" />
+			<div className="grid grid-cols-1 gap-4 sm:grid-cols-2 items-start">
+				<FieldSkeleton label="First name" />
+				<FieldSkeleton label="Last name" />
+			</div>
+			<FieldSkeleton label="Phone" />
+			<FieldSkeleton label="Street" />
+			<div className="grid grid-cols-1 gap-4 sm:grid-cols-2 items-start">
+				<FieldSkeleton label="City" />
+				<FieldSkeleton label="State" />
+			</div>
+			<div className="grid grid-cols-1 gap-4 sm:grid-cols-2 items-start">
+				<FieldSkeleton label="Postal Code" />
+				<FieldSkeleton label="Country" />
+			</div>
+		</div>
+	);
+}
+
 export default function Profile() {
 	const user = useUser();
 	const [profile, setProfile] = useState<ProfileFormValues | null>(null);
@@ -62,7 +94,8 @@ export default function Profile() {
 				setSuccess(true);
 				window.scrollTo({ top: 0, behavior: "smooth" });
 			} catch (err) {
-				setSubmitError(getErrorMessage(err, "Failed to update profile"));
+				console.error("Failed to update profile", err);
+				setSubmitError("Failed to update profile");
 			}
 		},
 		onSubmitInvalid: () => {},
@@ -88,10 +121,9 @@ export default function Profile() {
 				}
 			})
 			.catch((err: any) => {
+				console.error("Failed to load profile", err);
 				if (mounted) {
-					setLoadError(getErrorMessage(err, "Failed to load profile"));
-				} else {
-					console.error("Failed to load profile", err);
+					setLoadError("Failed to load profile");
 				}
 			});
 		return () => {
@@ -106,9 +138,7 @@ export default function Profile() {
 		}
 	}, [profile, form]);
 
-	if (!profile && !loadError) {
-		return <CardSkeleton contentMaxWidth="md" loadingText="Loading profile…" />;
-	}
+	const loading = !profile && !loadError;
 
 	return (
 		<CenteredPageLayout contentMaxWidth="md" title={ROUTES.PROFILE.TITLE}>
@@ -116,44 +146,51 @@ export default function Profile() {
 				<AuthForm
 					title="Profile"
 					description="Update your account information"
+					showAlreadyLoggedIn={false}
 					error={loadError ?? submitError}
 					success={success && "Profile updated!"}
-					submit={{ text: "Save Changes", loadingText: "Saving…" }}
+					submit={{ text: "Save Changes", loadingText: "Saving…", disabled: loading }}
 					footer={{ link: ROUTES.CHANGE_PASSWORD.PATH, linkText: "Change password" }}
 				>
-					<form.AppField name="Email">
-						{(field) => <field.EmailField label="Email" disabled />}
-					</form.AppField>
-					<div className="grid grid-cols-1 gap-4 sm:grid-cols-2 items-start">
-						<form.AppField name="FirstName">
-							{(field) => <field.TextField label="First name" autoComplete="given-name" />}
-						</form.AppField>
-						<form.AppField name="LastName">
-							{(field) => <field.TextField label="Last name" autoComplete="family-name" />}
-						</form.AppField>
-					</div>
-					<form.AppField name="Phone">
-						{(field) => <field.TextField label="Phone" type="tel" autoComplete="tel" />}
-					</form.AppField>
-					<form.AppField name="Street">
-						{(field) => <field.TextField label="Street" autoComplete="street-address" />}
-					</form.AppField>
-					<div className="grid grid-cols-1 gap-4 sm:grid-cols-2 items-start">
-						<form.AppField name="City">
-							{(field) => <field.TextField label="City" autoComplete="address-level2" />}
-						</form.AppField>
-						<form.AppField name="State">
-							{(field) => <field.TextField label="State" autoComplete="address-level1" />}
-						</form.AppField>
-					</div>
-					<div className="grid grid-cols-1 gap-4 sm:grid-cols-2 items-start">
-						<form.AppField name="PostalCode">
-							{(field) => <field.TextField label="Postal Code" autoComplete="postal-code" />}
-						</form.AppField>
-						<form.AppField name="Country">
-							{(field) => <field.TextField label="Country" autoComplete="country-name" />}
-						</form.AppField>
-					</div>
+					{loading ? (
+						<ProfileFieldsSkeleton />
+					) : (
+						<>
+							<form.AppField name="Email">
+								{(field) => <field.EmailField label="Email" disabled />}
+							</form.AppField>
+							<div className="grid grid-cols-1 gap-4 sm:grid-cols-2 items-start">
+								<form.AppField name="FirstName">
+									{(field) => <field.TextField label="First name" autoComplete="given-name" />}
+								</form.AppField>
+								<form.AppField name="LastName">
+									{(field) => <field.TextField label="Last name" autoComplete="family-name" />}
+								</form.AppField>
+							</div>
+							<form.AppField name="Phone">
+								{(field) => <field.TextField label="Phone" type="tel" autoComplete="tel" />}
+							</form.AppField>
+							<form.AppField name="Street">
+								{(field) => <field.TextField label="Street" autoComplete="street-address" />}
+							</form.AppField>
+							<div className="grid grid-cols-1 gap-4 sm:grid-cols-2 items-start">
+								<form.AppField name="City">
+									{(field) => <field.TextField label="City" autoComplete="address-level2" />}
+								</form.AppField>
+								<form.AppField name="State">
+									{(field) => <field.TextField label="State" autoComplete="address-level1" />}
+								</form.AppField>
+							</div>
+							<div className="grid grid-cols-1 gap-4 sm:grid-cols-2 items-start">
+								<form.AppField name="PostalCode">
+									{(field) => <field.TextField label="Postal Code" autoComplete="postal-code" />}
+								</form.AppField>
+								<form.AppField name="Country">
+									{(field) => <field.TextField label="Country" autoComplete="country-name" />}
+								</form.AppField>
+							</div>
+						</>
+					)}
 				</AuthForm>
 			</form.AppForm>
 		</CenteredPageLayout>

package/dist/force-app/main/default/uiBundles/reactexternalapp/src/features/authentication/pages/Register.tsx

@@ -7,7 +7,7 @@ import { useAppForm } from "../hooks/form";
 import { createDataSDK } from "@salesforce/platform-sdk-data";
 import { ROUTES, AUTH_PLACEHOLDERS } from "../authenticationConfig";
 import { emailSchema, passwordSchema, getStartUrl, type AuthResponse } from "../authHelpers";
-import { handleApiResponse, getErrorMessage } from "../utils/helpers";
+import { ApiError, handleApiResponse } from "../utils/helpers";
 
 const registerSchema = z
 	.object({
@@ -26,7 +26,7 @@ const registerSchema = z
 export default function Register() {
 	const navigate = useNavigate();
 	const [searchParams] = useSearchParams();
-	const [submitError, setSubmitError] = useState<string | null>(null);
+	const [submitError, setSubmitError] = useState<React.ReactNode>(null);
 
 	const form = useAppForm({
 		defaultValues: {
@@ -56,7 +56,7 @@ export default function Register() {
 						Accept: "application/json",
 					},
 				});
-				const result = await handleApiResponse<AuthResponse>(response, "Registration failed");
+				const result = await handleApiResponse<AuthResponse>(response);
 				if (result?.redirectUrl) {
 					// Hard navigate to the URL which logs the new user in
 					window.location.replace(result.redirectUrl);
@@ -65,7 +65,18 @@ export default function Register() {
 					navigate(ROUTES.LOGIN.PATH, { replace: true });
 				}
 			} catch (err) {
-				setSubmitError(getErrorMessage(err, "Registration failed"));
+				console.error("Registration failed", err);
+				if (err instanceof ApiError) {
+					setSubmitError(
+						<ul>
+							{err.errors.map((e, i) => (
+								<li key={i}>{e}</li>
+							))}
+						</ul>,
+					);
+				} else {
+					setSubmitError("Registration failed");
+				}
 			}
 		},
 		onSubmitInvalid: () => {},