@salesforce/ui-bundle-template-feature-react-authentication 1.117.2

package/dist/force-app/main/default/uiBundles/feature-react-authentication/src/features/authentication/sessionTimeout/sessionTimeService.ts

@@ -0,0 +1,149 @@
+/**
+ * SessionTimeServlet API service
+ * Handles communication with the session validation endpoint
+ */
+
+import { SESSION_CONFIG } from "./sessionTimeoutConfig";
+
+/**
+ * Response from SessionTimeServlet API
+ */
+export interface SessionResponse {
+	/** Session phase */
+	sp: number;
+	/** Seconds remaining in session */
+	sr: number;
+}
+
+/**
+ * Parse the servlet response text into SessionResponse object
+ * Handles CSRF protection prefix
+ *
+ * @param text - Raw response text from servlet
+ * @returns Parsed session response, or undefined if parsing fails
+ */
+function parseResponseResult(text: string): SessionResponse | undefined {
+	let cleanedText = text;
+
+	// Strip CSRF protection prefix if present
+	if (cleanedText.startsWith(SESSION_CONFIG.CSRF_TOKEN)) {
+		cleanedText = cleanedText.substring(SESSION_CONFIG.CSRF_TOKEN.length);
+	}
+
+	// Trim whitespace
+	cleanedText = cleanedText.trim();
+
+	try {
+		const parsed = JSON.parse(cleanedText) as SessionResponse;
+
+		// Validate response structure
+		if (typeof parsed.sp !== "number" || typeof parsed.sr !== "number") {
+			throw new Error("Invalid response structure: missing sp or sr properties");
+		}
+
+		return parsed;
+	} catch (error) {
+		console.error("[sessionTimeService] Failed to parse response:", error, "Text:", cleanedText);
+	}
+}
+
+/**
+ * Call SessionTimeServlet API
+ * Internal function used by both poll and extend functions.
+ * Returns undefined on any failure so the session timeout feature
+ * never crashes the running application.
+ *
+ * @param basePath - Community base path (e.g., "/sfsites/c/")
+ * @param extend - Whether to extend the session (updateTimedOutSession param)
+ * @returns Session response with remaining time, or undefined on failure
+ */
+async function callSessionTimeServlet(
+	basePath: string,
+	extend: boolean = false,
+): Promise<SessionResponse | undefined> {
+	// Build URL with cache-busting timestamp
+	const timestamp = Date.now();
+	let url = `${basePath}${SESSION_CONFIG.SERVLET_URL}?buster=${timestamp}`;
+
+	if (extend) {
+		url += "&updateTimedOutSession=true";
+	}
+
+	try {
+		const response = await fetch(url, {
+			method: "GET",
+			credentials: "same-origin",
+			cache: "no-cache",
+			headers: {
+				"X-Requested-With": "XMLHttpRequest",
+			},
+		});
+
+		if (!response.ok) {
+			console.error(`[sessionTimeService] HTTP ${response.status}: ${response.statusText}`);
+			return undefined;
+		}
+
+		const contentType = response.headers.get("content-type");
+		if (contentType && !contentType.includes("text") && !contentType.includes("json")) {
+			console.error(`[sessionTimeService] Unexpected content type: ${contentType}`);
+			return undefined;
+		}
+
+		const text = await response.text();
+		const parsed = parseResponseResult(text);
+		if (!parsed) {
+			return undefined;
+		}
+
+		return {
+			sp: parsed.sp,
+			sr: Math.max(0, parsed.sr - SESSION_CONFIG.LATENCY_BUFFER_SECONDS),
+		};
+	} catch (error) {
+		console.error("[sessionTimeService] API call failed:", error);
+		return undefined;
+	}
+}
+
+/**
+ * Poll SessionTimeServlet to check remaining session time
+ * Called periodically to monitor session status
+ *
+ * @param basePath - Community base path (e.g., "/sfsites/c/")
+ * @returns Session response with remaining time, or undefined on failure
+ *
+ * @example
+ * const response = await pollSessionTimeServlet('/sfsites/c/');
+ * if (response && response.sr <= 300) {
+ *   showWarning();
+ * }
+ */
+export async function pollSessionTimeServlet(
+	basePath: string,
+): Promise<SessionResponse | undefined> {
+	return callSessionTimeServlet(basePath, false);
+}
+
+/**
+ * Extend the current session time
+ * Called when user clicks "Continue Working" in warning modal
+ *
+ * @param basePath - Community base path (e.g., "/sfsites/c/")
+ * @returns Session response with new remaining time, or undefined on failure
+ *
+ * @example
+ * const response = await extendSessionTime('/sfsites/c/');
+ * if (response) {
+ *   console.log(`Session extended. ${response.sr} seconds remaining.`);
+ * }
+ */
+export async function extendSessionTime(basePath: string): Promise<SessionResponse | undefined> {
+	return callSessionTimeServlet(basePath, true);
+}
+
+/**
+ * Export parseResponseResult for testing purposes
+ * @internal
+ */
+export { parseResponseResult };

package/dist/force-app/main/default/uiBundles/feature-react-authentication/src/features/authentication/sessionTimeout/sessionTimeoutConfig.ts

@@ -0,0 +1,77 @@
+/**
+ * Configuration constants for session timeout monitoring
+ */
+
+// ============================================================================
+// Retry Configuration
+// ============================================================================
+
+/** Initial delay for first retry attempt (2 seconds) */
+export const INITIAL_RETRY_DELAY = 2000;
+
+/** Maximum number of retry attempts before giving up */
+export const MAX_RETRY_ATTEMPTS = 10;
+
+/** Maximum retry delay (30 minutes) */
+export const MAX_RETRY_DELAY = 30 * 60 * 1000;
+
+// ============================================================================
+// Session Storage Keys
+// ============================================================================
+
+/** sessionStorage keys used by session validator */
+export const STORAGE_KEYS = {
+	/** Flag to show session expired message on login page */
+	SHOW_SESSION_MESSAGE: "lwrSessionValidator.showSessionMessage",
+} as const;
+
+// ============================================================================
+// Servlet Configuration
+// ============================================================================
+
+/** SessionTimeServlet configuration */
+export const SESSION_CONFIG = {
+	/** Relative URL to SessionTimeServlet */
+	SERVLET_URL: "/sfsites/c/_nc_external/system/security/session/SessionTimeServlet",
+
+	/** Latency buffer to subtract from server response (seconds) */
+	LATENCY_BUFFER_SECONDS: 3,
+
+	/** CSRF protection prefix in servlet responses */
+	CSRF_TOKEN: "while(1);\n",
+} as const;
+
+// ============================================================================
+// UI Labels
+// ============================================================================
+
+/**
+ * UI labels for session timeout components
+ */
+export const LABELS = {
+	/** Title for session warning modal */
+	sessionWarningTitle: "Session Timeout Warning",
+
+	/** Message text in session warning modal */
+	sessionWarningMessage:
+		"For security, we log you out if you’re inactive for too long. To continue working, click Continue before the time expires.",
+
+	/** Text for "Continue" button */
+	continueButton: "Continue",
+
+	/** Text for "Log Out" button */
+	logoutButton: "Log Out",
+
+	/** Message shown on login page after session expires */
+	invalidSessionMessage: "Your session has expired. Please log in again.",
+
+	/** Accessibility label for close button */
+	closeLabel: "Close",
+} as const;
+
+// ============================================================================
+// Session Timeout Configuration
+// ============================================================================
+
+/** Session warning time in seconds (30 seconds) */
+export const SESSION_WARNING_TIME = 30;

package/dist/force-app/main/default/uiBundles/feature-react-authentication/src/features/authentication/utils/helpers.ts

@@ -0,0 +1,121 @@
+/**
+ * MAINTAINABILITY: Robust error extraction.
+ * Handles strings, objects, and standard Error instances.
+ *
+ * @param err - The error object (unknown type)
+ * @param fallback - Fallback message if error doesn't have a message property
+ * @returns The error message string
+ */
+export function getErrorMessage(err: unknown, fallback: string): string {
+	if (err instanceof Error) return err.message;
+	if (typeof err === "string") return err;
+	// Check if it's an object with a message property
+	if (typeof err === "object" && err !== null && "message" in err) {
+		return String((err as { message: unknown }).message);
+	}
+	return fallback;
+}
+
+/**
+ * [Dev Note] Helper to parse the fetch Response.
+ * It handles the distinction between success (JSON) and failure (throwing Error).
+ */
+export async function handleApiResponse<T = unknown>(
+	response: Response,
+	fallbackError: string,
+): Promise<T> {
+	// 1. Robustness: Handle 204 No Content gracefully
+	if (response.status === 204) {
+		return {} as T;
+	}
+
+	let data: any = null;
+
+	const contentType = response.headers.get("content-type");
+	if (contentType?.includes("application/json")) {
+		data = await response.json();
+	} else {
+		// [Dev Note] If Salesforce returns HTML (e.g. standard error page),
+		// we consume text to avoid parsing errors.
+		await response.text();
+	}
+
+	if (!response.ok) {
+		// [Dev Note] Throwing here allows the calling component to catch and
+		// display the error via getErrorMessage()
+		throw new Error(parseApiResponseError(data, fallbackError));
+	}
+
+	return data as T;
+}
+
+/**
+ * UI API Record response structure.
+ */
+export type RecordResponse = {
+	fields: Record<
+		string,
+		{
+			value: string;
+		}
+	>;
+};
+
+/**
+ * [Dev Note] GraphQL can return a complex nested structure.
+ * This helper flattens it to a simple object for easier form binding.
+ *
+ * @param data - Extracted payload from the GraphQL response.
+ * @param fallbackError - Fallback error message if data is null/undefined or not an object.
+ * @throws {Error} If data is not valid.
+ * @returns Flattened object with values mapped directly to the fields.
+ */
+export function flattenGraphQLRecord<T>(
+	data: any,
+	fallbackError: string = "An unknown error occurred",
+): T {
+	if (!data || typeof data !== "object") {
+		throw new Error(fallbackError);
+	}
+
+	return Object.fromEntries(
+		Object.entries(data).map(([key, field]) => [
+			key,
+			field !== null && typeof field === "object" && "value" in field
+				? (field as { value: unknown }).value
+				: (field ?? null),
+		]),
+	) as T;
+}
+
+/**
+ * [Dev Note] Salesforce APIs may return errors as an array or a single object.
+ * This helper standardizes the extraction of the error message string.
+ *
+ * @param data - The response data.
+ * @param fallbackError - Fallback error message if response doesn't have a message property
+ * @returns The error message string
+ */
+function parseApiResponseError(
+	data: any,
+	fallbackError: string = "An unknown error occurred",
+): string {
+	if (data?.message) {
+		return data.message;
+	}
+	if (data?.error) {
+		return data.error;
+	}
+	if (data?.errors && Array.isArray(data.errors) && data.errors.length > 0) {
+		return data.errors.join(" ") || fallbackError;
+	}
+	if (Array.isArray(data) && data.length > 0) {
+		return (
+			data
+				.map((e) => e?.message)
+				.filter(Boolean)
+				.join(" ") || fallbackError
+		);
+	}
+	return fallbackError;
+}

package/dist/force-app/main/default/uiBundles/feature-react-authentication/src/lib/utils.ts

@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}

package/dist/force-app/main/default/uiBundles/feature-react-authentication/src/navigationMenu.tsx

@@ -0,0 +1,80 @@
+import { Link, useLocation } from 'react-router';
+import { getAllRoutes } from './router-utils';
+import { useState } from 'react';
+
+export default function NavigationMenu() {
+  const [isOpen, setIsOpen] = useState(false);
+  const location = useLocation();
+
+  const isActive = (path: string) => location.pathname === path;
+
+  const toggleMenu = () => setIsOpen(!isOpen);
+
+  const navigationRoutes: { path: string; label: string }[] = getAllRoutes()
+    .filter(
+      route =>
+        route.handle?.showInNavigation === true &&
+        route.fullPath !== undefined &&
+        route.handle?.label !== undefined
+    )
+    .map(
+      route =>
+        ({
+          path: route.fullPath,
+          label: route.handle?.label,
+        }) as { path: string; label: string }
+    );
+
+  return (
+    <nav className="bg-white border-b border-gray-200">
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+        <div className="flex justify-between items-center h-16">
+          <Link to="/" className="text-xl font-semibold text-gray-900">
+            React App
+          </Link>
+          <button
+            onClick={toggleMenu}
+            className="p-2 rounded-md text-gray-700 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-500"
+            aria-label="Toggle menu"
+          >
+            <div className="w-6 h-6 flex flex-col justify-center space-y-1.5">
+              <span
+                className={`block h-0.5 w-6 bg-current transition-all ${
+                  isOpen ? 'rotate-45 translate-y-2' : ''
+                }`}
+              />
+              <span
+                className={`block h-0.5 w-6 bg-current transition-all ${isOpen ? 'opacity-0' : ''}`}
+              />
+              <span
+                className={`block h-0.5 w-6 bg-current transition-all ${
+                  isOpen ? '-rotate-45 -translate-y-2' : ''
+                }`}
+              />
+            </div>
+          </button>
+        </div>
+        {isOpen && (
+          <div className="pb-4">
+            <div className="flex flex-col space-y-2">
+              {navigationRoutes.map(item => (
+                <Link
+                  key={item.path}
+                  to={item.path}
+                  onClick={() => setIsOpen(false)}
+                  className={`px-3 py-2 rounded-md text-sm font-medium transition-colors ${
+                    isActive(item.path)
+                      ? 'bg-blue-100 text-blue-700'
+                      : 'text-gray-700 hover:bg-gray-100'
+                  }`}
+                >
+                  {item.label}
+                </Link>
+              ))}
+            </div>
+          </div>
+        )}
+      </div>
+    </nav>
+  );
+}

package/dist/force-app/main/default/uiBundles/feature-react-authentication/src/pages/Home.tsx

@@ -0,0 +1,12 @@
+export default function Home() {
+  return (
+    <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
+      <div className="text-center">
+        <h1 className="text-4xl font-bold text-gray-900 mb-4">Home</h1>
+        <p className="text-lg text-gray-600 mb-8">
+          Welcome to your React application.
+        </p>
+      </div>
+    </div>
+  );
+}

package/dist/force-app/main/default/uiBundles/feature-react-authentication/src/pages/NotFound.tsx

@@ -0,0 +1,18 @@
+import { Link } from 'react-router';
+
+export default function NotFound() {
+  return (
+    <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
+      <div className="text-center">
+        <h1 className="text-4xl font-bold text-gray-900 mb-4">404</h1>
+        <p className="text-lg text-gray-600 mb-8">Page not found</p>
+        <Link
+          to="/"
+          className="inline-block px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition-colors"
+        >
+          Go to Home
+        </Link>
+      </div>
+    </div>
+  );
+}

package/dist/force-app/main/default/uiBundles/feature-react-authentication/src/router-utils.tsx

@@ -0,0 +1,35 @@
+import type { RouteObject } from 'react-router';
+import { routes } from './routes';
+
+export type RouteWithFullPath = RouteObject & { fullPath: string };
+
+const flatMapRoutes = (
+  route: RouteObject,
+  parentPath: string = ''
+): RouteWithFullPath[] => {
+  let fullPath: string;
+
+  if (route.index) {
+    fullPath = parentPath || '/';
+  } else if (route.path) {
+    if (route.path.startsWith('/')) {
+      fullPath = route.path;
+    } else {
+      fullPath =
+        parentPath === '/' ? `/${route.path}` : `${parentPath}/${route.path}`;
+    }
+  } else {
+    fullPath = parentPath;
+  }
+
+  const routeWithPath = { ...route, fullPath };
+
+  const childRoutes =
+    route.children?.flatMap(child => flatMapRoutes(child, fullPath)) || [];
+
+  return [routeWithPath, ...childRoutes];
+};
+
+export const getAllRoutes = (): RouteWithFullPath[] => {
+  return routes.flatMap(route => flatMapRoutes(route));
+};

package/dist/force-app/main/default/uiBundles/feature-react-authentication/src/routes.tsx

@@ -0,0 +1,71 @@
+import type { RouteObject } from 'react-router';
+import Home from './pages/Home';
+import NotFound from './pages/NotFound';
+import AuthAppLayout from "./features/authentication/layouts/AuthAppLayout";
+import Login from "./features/authentication/pages/Login";
+import Register from "./features/authentication/pages/Register";
+import ForgotPassword from "./features/authentication/pages/ForgotPassword";
+import ResetPassword from "./features/authentication/pages/ResetPassword";
+import Profile from "./features/authentication/pages/Profile";
+import ChangePassword from "./features/authentication/pages/ChangePassword";
+import AuthenticationRoute from "./features/authentication/layouts/authenticationRouteLayout";
+import PrivateRoute from "./features/authentication/layouts/privateRouteLayout";
+import { ROUTES } from "./features/authentication/authenticationConfig";
+
+export const routes: RouteObject[] = [
+  {
+    path: "/",
+    element: <AuthAppLayout />,
+    children: [
+      {
+        index: true,
+        element: <Home />,
+        handle: { showInNavigation: true, label: 'Home' }
+      },
+      {
+        path: '*',
+        element: <NotFound />
+      },
+      {
+        element: <AuthenticationRoute />,
+        children: [
+          {
+            path: ROUTES.LOGIN.PATH,
+            element: <Login />,
+            handle: { showInNavigation: true, label: "Login", title: ROUTES.LOGIN.TITLE }
+          },
+          {
+            path: ROUTES.REGISTER.PATH,
+            element: <Register />,
+            handle: { showInNavigation: false, title: ROUTES.REGISTER.TITLE }
+          },
+          {
+            path: ROUTES.FORGOT_PASSWORD.PATH,
+            element: <ForgotPassword />,
+            handle: { showInNavigation: false, title: ROUTES.FORGOT_PASSWORD.TITLE }
+          },
+          {
+            path: ROUTES.RESET_PASSWORD.PATH,
+            element: <ResetPassword />,
+            handle: { showInNavigation: false, title: ROUTES.RESET_PASSWORD.TITLE }
+          }
+        ]
+      },
+      {
+        element: <PrivateRoute showCardSkeleton />,
+        children: [
+          {
+            path: ROUTES.PROFILE.PATH,
+            element: <Profile />,
+            handle: { showInNavigation: true, label: "Profile", title: ROUTES.PROFILE.TITLE }
+          },
+          {
+            path: ROUTES.CHANGE_PASSWORD.PATH,
+            element: <ChangePassword />,
+            handle: { showInNavigation: false, title: ROUTES.CHANGE_PASSWORD.TITLE }
+          }
+        ]
+      }
+    ]
+  }
+];