@salesforce/webapp-template-feature-react-authentication-experimental 1.43.1 → 1.45.0

package/dist/force-app/main/default/webapplications/feature-react-authentication/src/components/ui/tabs.tsx

@@ -1,115 +1,78 @@
 import * as React from "react";
-import { cn } from "../../lib/utils";
-
-interface TabsContextValue {
-	value: string;
-	onValueChange: (value: string) => void;
-}
-
-const TabsContext = React.createContext<TabsContextValue | undefined>(undefined);
-
-interface TabsProps extends React.ComponentProps<"div"> {
-	value?: string;
-	defaultValue?: string;
-	onValueChange?: (value: string) => void;
-}
-
-function Tabs({ value, defaultValue, onValueChange, className, children, ...props }: TabsProps) {
-	const [internalValue, setInternalValue] = React.useState(defaultValue || "");
-	const controlled = value !== undefined;
-	const currentValue = controlled ? value : internalValue;
+import { cva, type VariantProps } from "class-variance-authority";
+import { Tabs as TabsPrimitive } from "radix-ui";
 
-	const handleValueChange = React.useCallback(
-		(newValue: string) => {
-			if (!controlled) {
-				setInternalValue(newValue);
-			}
-			onValueChange?.(newValue);
-		},
-		[controlled, onValueChange],
-	);
+import { cn } from "../../lib/utils";
 
+function Tabs({
+	className,
+	orientation = "horizontal",
+	...props
+}: React.ComponentProps<typeof TabsPrimitive.Root>) {
 	return (
-		<TabsContext.Provider value={{ value: currentValue, onValueChange: handleValueChange }}>
-			<div data-slot="tabs" className={cn("w-full", className)} {...props}>
-				{children}
-			</div>
-		</TabsContext.Provider>
+		<TabsPrimitive.Root
+			data-slot="tabs"
+			data-orientation={orientation}
+			className={cn("gap-2 group/tabs flex data-horizontal:flex-col", className)}
+			{...props}
+		/>
 	);
 }
 
-function useTabsContext() {
-	const context = React.useContext(TabsContext);
-	if (!context) {
-		throw new Error("Tabs components must be used within a Tabs component");
-	}
-	return context;
-}
+const tabsListVariants = cva(
+	"rounded-lg p-[3px] group-data-horizontal/tabs:h-8 data-[variant=line]:rounded-none group/tabs-list text-muted-foreground inline-flex w-fit items-center justify-center group-data-vertical/tabs:h-fit group-data-vertical/tabs:flex-col",
+	{
+		variants: {
+			variant: {
+				default: "bg-muted",
+				line: "gap-1 bg-transparent",
+			},
+		},
+		defaultVariants: {
+			variant: "default",
+		},
+	},
+);
 
-function TabsList({ className, ...props }: React.ComponentProps<"div">) {
+function TabsList({
+	className,
+	variant = "default",
+	...props
+}: React.ComponentProps<typeof TabsPrimitive.List> & VariantProps<typeof tabsListVariants>) {
 	return (
-		<div
+		<TabsPrimitive.List
 			data-slot="tabs-list"
-			className={cn(
-				"inline-flex h-10 items-center justify-center rounded-md bg-muted p-1 text-muted-foreground",
-				className,
-			)}
+			data-variant={variant}
+			className={cn(tabsListVariants({ variant }), className)}
 			{...props}
 		/>
 	);
 }
 
-interface TabsTriggerProps extends React.ComponentProps<"button"> {
-	value: string;
-}
-
-function TabsTrigger({ className, value, ...props }: TabsTriggerProps) {
-	const { value: selectedValue, onValueChange } = useTabsContext();
-	const isSelected = selectedValue === value;
-
+function TabsTrigger({ className, ...props }: React.ComponentProps<typeof TabsPrimitive.Trigger>) {
 	return (
-		<button
+		<TabsPrimitive.Trigger
 			data-slot="tabs-trigger"
-			data-selected={isSelected}
-			type="button"
-			role="tab"
-			aria-selected={isSelected}
 			className={cn(
-				"inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
-				isSelected
-					? "bg-background text-foreground shadow-sm"
-					: "text-muted-foreground hover:bg-background/50",
+				"gap-1.5 rounded-md border border-transparent px-1.5 py-0.5 text-sm font-medium group-data-[variant=default]/tabs-list:data-active:shadow-sm group-data-[variant=line]/tabs-list:data-active:shadow-none [&_svg:not([class*='size-'])]:size-4 focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring text-foreground/60 hover:text-foreground dark:text-muted-foreground dark:hover:text-foreground relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center whitespace-nowrap transition-all group-data-vertical/tabs:w-full group-data-vertical/tabs:justify-start focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+				"group-data-[variant=line]/tabs-list:bg-transparent group-data-[variant=line]/tabs-list:data-active:bg-transparent dark:group-data-[variant=line]/tabs-list:data-active:border-transparent dark:group-data-[variant=line]/tabs-list:data-active:bg-transparent",
+				"data-active:bg-background dark:data-active:text-foreground dark:data-active:border-input dark:data-active:bg-input/30 data-active:text-foreground",
+				"after:bg-foreground after:absolute after:opacity-0 after:transition-opacity group-data-horizontal/tabs:after:inset-x-0 group-data-horizontal/tabs:after:bottom-[-5px] group-data-horizontal/tabs:after:h-0.5 group-data-vertical/tabs:after:inset-y-0 group-data-vertical/tabs:after:-right-1 group-data-vertical/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-active:after:opacity-100",
 				className,
 			)}
-			onClick={() => onValueChange(value)}
 			{...props}
 		/>
 	);
 }
 
-interface TabsContentProps extends React.ComponentProps<"div"> {
-	value: string;
-}
-
-function TabsContent({ className, value, children, ...props }: TabsContentProps) {
-	const { value: selectedValue } = useTabsContext();
-	if (selectedValue !== value) {
-		return null;
-	}
-
+function TabsContent({ className, ...props }: React.ComponentProps<typeof TabsPrimitive.Content>) {
 	return (
-		<div
+		<TabsPrimitive.Content
 			data-slot="tabs-content"
-			role="tabpanel"
-			className={cn(
-				"mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
-				className,
-			)}
+			className={cn("text-sm flex-1 outline-none", className)}
 			{...props}
-		>
-			{children}
-		</div>
+		/>
 	);
 }
 
-export { Tabs, TabsList, TabsTrigger, TabsContent };
+export { Tabs, TabsList, TabsTrigger, TabsContent, tabsListVariants };

package/dist/force-app/main/default/webapplications/feature-react-authentication/src/context/AuthContext.tsx

@@ -1,5 +1,6 @@
 import { createContext, useContext, useState, useEffect, useCallback, type ReactNode } from "react";
 import { getCurrentUser } from "@salesforce/webapp-experimental/api";
+import { API_ROUTES } from "../components/auth/authenticationConfig";
 
 interface User {
 	readonly id: string;
@@ -12,6 +13,7 @@ interface AuthContextType {
 	loading: boolean;
 	error: string | null;
 	checkAuth: () => Promise<void>;
+	logout: (startURL?: string) => void;
 }
 
 const AuthContext = createContext<AuthContextType | undefined>(undefined);
@@ -41,6 +43,15 @@ export function AuthProvider({ children }: AuthProviderProps) {
 		}
 	}, []);
 
+	const logout = useCallback((startURL?: string) => {
+		// Navigate to logout URL (server-side endpoint)
+		// Use replace to prevent back button from returning to authenticated session
+		const finalLogoutUrl = startURL
+			? `${API_ROUTES.LOGOUT}?startURL=${encodeURIComponent(startURL)}`
+			: API_ROUTES.LOGOUT;
+		window.location.replace(finalLogoutUrl);
+	}, []);
+
 	useEffect(() => {
 		checkAuth();
 	}, [checkAuth]);
@@ -51,6 +62,7 @@ export function AuthProvider({ children }: AuthProviderProps) {
 		loading,
 		error,
 		checkAuth,
+		logout,
 	};
 
 	return <AuthContext.Provider value={value}>{children}</AuthContext.Provider>;

package/dist/force-app/main/default/webapplications/feature-react-authentication/src/hooks/form.tsx

@@ -3,7 +3,7 @@ import { createFormHookContexts, createFormHook } from "@tanstack/react-form";
 import { Field, FieldDescription, FieldError, FieldLabel } from "../components/ui/field";
 import { Input } from "../components/ui/input";
 import { cn } from "../lib/utils";
-import { AUTH_PLACEHOLDERS } from "../utils/authenticationConfig";
+import { AUTH_PLACEHOLDERS } from "../components/auth/authenticationConfig";
 
 // Create form hook contexts
 export const { fieldContext, formContext, useFieldContext, useFormContext } =

package/dist/force-app/main/default/webapplications/feature-react-authentication/src/hooks/useCountdownTimer.ts

@@ -0,0 +1,266 @@
+/**
+ * Custom hook for countdown timer with accessibility features
+ */
+
+import { useState, useEffect, useRef, useCallback } from "react";
+
+/**
+ * Accessibility configuration for countdown timer
+ */
+export interface CountdownTimerA11yConfig {
+	/** Announce time remaining at these specific second marks */
+	ANNOUNCE_AT_SECONDS: readonly number[];
+	/** Announce every N seconds (after initial period) */
+	ANNOUNCE_INTERVAL_SECONDS: number;
+	/** Minimum elapsed time before starting interval announcements */
+	MIN_ELAPSED_FOR_INTERVAL: number;
+}
+
+/**
+ * Return value from useCountdownTimer hook
+ */
+export interface CountdownTimerResult {
+	/** Current time remaining in seconds */
+	displayTime: number;
+	/** Formatted time string (MM:SS) */
+	formattedTime: string;
+	/** ISO 8601 duration string (e.g., PT2M15S) */
+	isoTime: string;
+	/** Accessibility announcement text for screen readers */
+	accessibilityAnnouncement: string;
+	/** Start the countdown timer */
+	start: () => void;
+	/** Stop the countdown timer */
+	stop: () => void;
+	/** Reset the countdown timer to initial time */
+	reset: () => void;
+}
+
+/**
+ * Configuration for countdown timer hook
+ */
+export interface CountdownTimerConfig {
+	/** Initial time in seconds */
+	initialTime: number;
+	/** Callback when countdown reaches 0 */
+	onExpire: () => void;
+	/** Optional accessibility configuration */
+	a11yConfig?: CountdownTimerA11yConfig;
+}
+
+/**
+ * Default accessibility configuration
+ */
+const DEFAULT_A11Y_CONFIG: CountdownTimerA11yConfig = {
+	ANNOUNCE_AT_SECONDS: [5, 1],
+	ANNOUNCE_INTERVAL_SECONDS: 10,
+	MIN_ELAPSED_FOR_INTERVAL: 10,
+};
+
+/**
+ * Format time remaining as MM:SS string
+ * Uses Intl.NumberFormat for zero-padding and internationalization
+ *
+ * @param seconds - Total seconds remaining
+ * @returns Formatted time string (e.g., "05:23")
+ */
+function formatTimeRemaining(seconds: number): string {
+	const minutes = Math.floor(seconds / 60);
+	const secs = seconds % 60;
+
+	// Use Intl.NumberFormat for zero-padding with internationalization
+	const formatter = new Intl.NumberFormat(navigator.language, {
+		minimumIntegerDigits: 2,
+		useGrouping: false,
+	});
+
+	return `${formatter.format(minutes)}:${formatter.format(secs)}`;
+}
+
+/**
+ * Format time remaining as ISO 8601 duration for ARIA
+ * Used in datetime attribute of <time> element
+ *
+ * @param seconds - Total seconds remaining
+ * @returns ISO 8601 duration string (e.g., "PT2M15S")
+ */
+function formatISODuration(seconds: number): string {
+	const minutes = Math.floor(seconds / 60);
+	const secs = seconds % 60;
+	return `PT${minutes}M${secs}S`;
+}
+
+/**
+ * Format time remaining for screen reader announcement
+ * Uses Intl.DurationFormat if available, falls back to manual formatting
+ *
+ * @param seconds - Total seconds remaining
+ * @returns Formatted announcement text (e.g., "2 minutes 15 seconds")
+ */
+function formatAccessibilityAnnouncement(seconds: number): string {
+	const minutes = Math.floor(seconds / 60);
+	const secs = seconds % 60;
+
+	// Try using Intl.DurationFormat (newer API, may not be available in all browsers)
+	if (typeof Intl !== "undefined" && "DurationFormat" in Intl) {
+		try {
+			// @ts-expect-error - DurationFormat is not yet in TypeScript lib
+			const formatter = new Intl.DurationFormat(navigator.language, { style: "long" });
+			return formatter.format({ minutes, seconds: secs });
+		} catch (e) {
+			// Fallback to manual formatting
+		}
+	}
+
+	// Manual fallback
+	const parts: string[] = [];
+	if (minutes > 0) {
+		parts.push(`${minutes} ${minutes === 1 ? "minute" : "minutes"}`);
+	}
+	if (secs > 0 || minutes === 0) {
+		parts.push(`${secs} ${secs === 1 ? "second" : "seconds"}`);
+	}
+	return parts.join(" ");
+}
+
+/**
+ * Determine if an accessibility announcement should be made at this time
+ *
+ * @param currentTime - Current countdown time in seconds
+ * @param initialTime - Initial countdown time in seconds
+ * @param config - Accessibility configuration
+ * @returns True if announcement should be made
+ */
+function shouldAnnounce(
+	currentTime: number,
+	initialTime: number,
+	config: CountdownTimerA11yConfig,
+): boolean {
+	// Announce at specific second marks (5s, 1s)
+	if (config.ANNOUNCE_AT_SECONDS.includes(currentTime)) {
+		return true;
+	}
+
+	// Calculate elapsed time
+	const elapsed = initialTime - currentTime;
+
+	// Announce every N seconds after minimum elapsed time
+	if (elapsed >= config.MIN_ELAPSED_FOR_INTERVAL) {
+		return currentTime % config.ANNOUNCE_INTERVAL_SECONDS === 0;
+	}
+
+	return false;
+}
+
+/**
+ * Custom hook for countdown timer with accessibility
+ * Decrements from initial time to 0, provides formatted output for display and ARIA
+ *
+ * @param config - Timer configuration
+ * @returns Timer state and control functions
+ *
+ * @example
+ * const timer = useCountdownTimer({
+ *   initialTime: 300, // 5 minutes
+ *   onExpire: () => handleLogout()
+ * });
+ *
+ * timer.start(); // Begin countdown
+ *
+ * <time dateTime={timer.isoTime} role="timer">
+ *   {timer.formattedTime}
+ * </time>
+ * <div role="status" aria-live="polite" className="sr-only">
+ *   {timer.accessibilityAnnouncement}
+ * </div>
+ */
+export function useCountdownTimer({
+	initialTime,
+	onExpire,
+	a11yConfig = DEFAULT_A11Y_CONFIG,
+}: CountdownTimerConfig): CountdownTimerResult {
+	const [displayTime, setDisplayTime] = useState(initialTime);
+	const [accessibilityAnnouncement, setAccessibilityAnnouncement] = useState("");
+	const [isActive, setIsActive] = useState(false);
+
+	// Use refs to avoid stale closure issues
+	const initialTimeRef = useRef(initialTime);
+	const onExpireRef = useRef(onExpire);
+	const a11yConfigRef = useRef(a11yConfig);
+	const endTimeRef = useRef<number>(0);
+	const previousTimeRef = useRef<number>(initialTime);
+
+	// Update refs when props change
+	useEffect(() => {
+		initialTimeRef.current = initialTime;
+	}, [initialTime]);
+
+	useEffect(() => {
+		onExpireRef.current = onExpire;
+	}, [onExpire]);
+
+	useEffect(() => {
+		a11yConfigRef.current = a11yConfig;
+	}, [a11yConfig]);
+
+	// Countdown effect using Date.now() for accuracy
+	useEffect(() => {
+		if (!isActive) return;
+
+		// Set the target end time when timer starts
+		endTimeRef.current = Date.now() + initialTimeRef.current * 1000;
+		previousTimeRef.current = initialTimeRef.current;
+
+		const intervalId = setInterval(() => {
+			const now = Date.now();
+			const remainingMs = endTimeRef.current - now;
+			const newTime = Math.max(0, Math.ceil(remainingMs / 1000));
+
+			setDisplayTime(newTime);
+
+			// Check if we should make an accessibility announcement
+			// Only announce when the second value changes
+			if (
+				newTime !== previousTimeRef.current &&
+				shouldAnnounce(newTime, initialTimeRef.current, a11yConfigRef.current)
+			) {
+				setAccessibilityAnnouncement(formatAccessibilityAnnouncement(newTime));
+			}
+			previousTimeRef.current = newTime;
+
+			// Check if countdown expired
+			if (newTime <= 0) {
+				clearInterval(intervalId);
+				setIsActive(false);
+				onExpireRef.current();
+			}
+		}, 100); // Check more frequently for smoother updates
+
+		return () => clearInterval(intervalId);
+	}, [isActive]);
+
+	// Control functions
+	const start = useCallback(() => {
+		setIsActive(true);
+	}, []);
+
+	const stop = useCallback(() => {
+		setIsActive(false);
+	}, []);
+
+	const reset = useCallback(() => {
+		setDisplayTime(initialTimeRef.current);
+		setIsActive(false);
+		setAccessibilityAnnouncement("");
+	}, []);
+
+	return {
+		displayTime,
+		formattedTime: formatTimeRemaining(displayTime),
+		isoTime: formatISODuration(displayTime),
+		accessibilityAnnouncement,
+		start,
+		stop,
+		reset,
+	};
+}

package/dist/force-app/main/default/webapplications/feature-react-authentication/src/hooks/useRetryWithBackoff.ts

@@ -0,0 +1,109 @@
+/**
+ * Custom hook for retry logic with exponential backoff
+ */
+
+import { useState, useCallback } from "react";
+
+export interface UseRetryWithBackoffOptions {
+	/** Initial delay in milliseconds */
+	initialDelay: number;
+	/** Maximum number of retry attempts */
+	maxAttempts: number;
+	/** Maximum delay in milliseconds */
+	maxDelay: number;
+}
+
+export interface UseRetryWithBackoffResult {
+	/** Current number of retry attempts */
+	retryAttempts: number;
+	/** Current retry delay in milliseconds */
+	currentRetryDelay: number;
+	/** Whether max retry attempts have been reached */
+	maxRetriesReached: boolean;
+	/** Schedule a retry with exponential backoff, returns timeout ID for cancellation */
+	scheduleRetry: (callback: () => void) => ReturnType<typeof setTimeout> | undefined;
+	/** Reset retry state after successful operation */
+	resetRetry: () => void;
+}
+
+/**
+ * Hook for managing retry logic with exponential backoff
+ *
+ * @param options - Configuration for retry behavior
+ * @returns Retry state and control functions
+ *
+ * @example
+ * const retry = useRetryWithBackoff({
+ *   initialDelay: 2000,
+ *   maxAttempts: 10,
+ *   maxDelay: 1800000
+ * });
+ *
+ * async function fetchData() {
+ *   try {
+ *     const data = await apiCall();
+ *     retry.resetRetry();
+ *     return data;
+ *   } catch (error) {
+ *     if (retry.maxRetriesReached) {
+ *       console.error('Max retries reached');
+ *       return;
+ *     }
+ *     retry.scheduleRetry(() => fetchData());
+ *   }
+ * }
+ */
+export function useRetryWithBackoff(
+	options: UseRetryWithBackoffOptions,
+): UseRetryWithBackoffResult {
+	const { initialDelay, maxAttempts, maxDelay } = options;
+
+	const [retryAttempts, setRetryAttempts] = useState<number>(0);
+	const [currentRetryDelay, setCurrentRetryDelay] = useState<number>(initialDelay);
+
+	const maxRetriesReached = retryAttempts >= maxAttempts;
+
+	/**
+	 * Reset retry state after successful operation
+	 */
+	const resetRetry = useCallback(() => {
+		setRetryAttempts(0);
+		setCurrentRetryDelay(initialDelay);
+	}, [initialDelay]);
+
+	/**
+	 * Schedule a retry with exponential backoff
+	 * Returns the timeout ID which can be used to cancel the retry if needed
+	 */
+	const scheduleRetry = useCallback(
+		(callback: () => void) => {
+			if (retryAttempts >= maxAttempts) {
+				console.error("[useRetryWithBackoff] Max retry attempts reached");
+				return undefined;
+			}
+
+			console.warn(
+				`[useRetryWithBackoff] Retry attempt ${retryAttempts + 1}/${maxAttempts} in ${currentRetryDelay}ms`,
+			);
+
+			const timeoutId = setTimeout(() => {
+				callback();
+			}, currentRetryDelay);
+
+			setRetryAttempts((prev) => prev + 1);
+			// Double the delay for next retry, capped at maxDelay
+			setCurrentRetryDelay((prev) => Math.min(prev * 2, maxDelay));
+
+			return timeoutId;
+		},
+		[retryAttempts, currentRetryDelay, maxAttempts, maxDelay],
+	);
+
+	return {
+		retryAttempts,
+		currentRetryDelay,
+		maxRetriesReached,
+		scheduleRetry,
+		resetRetry,
+	};
+}

package/dist/force-app/main/default/webapplications/feature-react-authentication/src/layouts/AuthAppLayout.tsx

@@ -0,0 +1,12 @@
+import SessionTimeoutValidator from "../components/auth/sessionTimeout/SessionTimeoutValidator";
+import { AuthProvider } from "../context/AuthContext";
+import AppLayout from "../appLayout";
+
+export default function AuthAppLayout() {
+	return (
+		<AuthProvider>
+			<SessionTimeoutValidator basePath="" />
+			<AppLayout />
+		</AuthProvider>
+	);
+}

package/dist/force-app/main/default/webapplications/feature-react-authentication/src/pages/ChangePassword.tsx

@@ -5,8 +5,9 @@ import { uiApiClient } from "@salesforce/webapp-experimental/api";
 import { CenteredPageLayout } from "../components/layout/centered-page-layout";
 import { AuthForm } from "../components/forms/auth-form";
 import { useAppForm } from "../hooks/form";
-import { ROUTES, AUTH_PLACEHOLDERS } from "../utils/authenticationConfig";
-import { newPasswordSchema, handleApiResponse, getErrorMessage } from "../utils/helpers";
+import { ROUTES, AUTH_PLACEHOLDERS } from "../components/auth/authenticationConfig";
+import { newPasswordSchema } from "../components/auth/authHelpers";
+import { handleApiResponse, getErrorMessage } from "../utils/helpers";
 
 const changePasswordSchema = z
 	.object({

package/dist/force-app/main/default/webapplications/feature-react-authentication/src/pages/ForgotPassword.tsx

@@ -4,7 +4,7 @@ import { uiApiClient } from "@salesforce/webapp-experimental/api";
 import { CenteredPageLayout } from "../components/layout/centered-page-layout";
 import { AuthForm } from "../components/forms/auth-form";
 import { useAppForm } from "../hooks/form";
-import { ROUTES, AUTH_PLACEHOLDERS } from "../utils/authenticationConfig";
+import { ROUTES, AUTH_PLACEHOLDERS } from "../components/auth/authenticationConfig";
 import { handleApiResponse, getErrorMessage } from "../utils/helpers";
 
 const forgotPasswordSchema = z.object({

package/dist/force-app/main/default/webapplications/feature-react-authentication/src/pages/Login.tsx

@@ -5,9 +5,9 @@ import { uiApiClient } from "@salesforce/webapp-experimental/api";
 import { CenteredPageLayout } from "../components/layout/centered-page-layout";
 import { AuthForm } from "../components/forms/auth-form";
 import { useAppForm } from "../hooks/form";
-import { ROUTES } from "../utils/authenticationConfig";
-import { emailSchema, getStartUrl, handleApiResponse, getErrorMessage } from "../utils/helpers";
-import type { AuthResponse } from "../utils/helpers";
+import { ROUTES } from "../components/auth/authenticationConfig";
+import { emailSchema, getStartUrl, type AuthResponse } from "../components/auth/authHelpers";
+import { handleApiResponse, getErrorMessage } from "../utils/helpers";
 
 const loginSchema = z.object({
 	email: emailSchema,

package/dist/force-app/main/default/webapplications/feature-react-authentication/src/pages/Profile.tsx

@@ -7,8 +7,9 @@ import { CenteredPageLayout } from "../components/layout/centered-page-layout";
 import { CardSkeleton } from "../components/layout/card-skeleton";
 import { AuthForm } from "../components/forms/auth-form";
 import { useAppForm } from "../hooks/form";
-import { ROUTES } from "../utils/authenticationConfig";
-import { emailSchema, flattenGraphQLRecord, getErrorMessage } from "../utils/helpers";
+import { ROUTES } from "../components/auth/authenticationConfig";
+import { emailSchema } from "../components/auth/authHelpers";
+import { flattenGraphQLRecord, getErrorMessage } from "../utils/helpers";
 import { getUser } from "../context/AuthContext";
 
 const GRAPHQL_USER_PROFILE_FIELDS = `

package/dist/force-app/main/default/webapplications/feature-react-authentication/src/pages/Register.tsx

@@ -5,15 +5,14 @@ import { uiApiClient } from "@salesforce/webapp-experimental/api";
 import { CenteredPageLayout } from "../components/layout/centered-page-layout";
 import { AuthForm } from "../components/forms/auth-form";
 import { useAppForm } from "../hooks/form";
-import { ROUTES, AUTH_PLACEHOLDERS } from "../utils/authenticationConfig";
+import { ROUTES, AUTH_PLACEHOLDERS } from "../components/auth/authenticationConfig";
 import {
 	emailSchema,
 	passwordSchema,
 	getStartUrl,
-	handleApiResponse,
-	getErrorMessage,
-} from "../utils/helpers";
-import type { AuthResponse } from "../utils/helpers";
+	type AuthResponse,
+} from "../components/auth/authHelpers";
+import { handleApiResponse, getErrorMessage } from "../utils/helpers";
 
 const registerSchema = z
 	.object({