@salesforce/webapp-template-app-react-sample-b2x-experimental 1.79.2 → 1.80.0

package/dist/force-app/main/default/webapplications/appreactsampleb2x/src/appLayout.tsx

@@ -1,15 +1,148 @@
-import { useState } from "react";
-import { Outlet, NavLink } from "react-router";
+import { useState, useRef, useEffect, type ComponentType } from "react";
+import { Outlet, NavLink, useNavigate } from "react-router";
 import { Button } from "./components/ui/button";
 import { cn } from "./lib/utils";
-import { Home, Search, BarChart3, Wrench, Menu, Heart, Bell, Building2, Phone } from "lucide-react";
+import { useAuth } from "./features/authentication/context/AuthContext";
+import {
+	Home,
+	Search,
+	BarChart3,
+	Wrench,
+	Menu,
+	Heart,
+	Bell,
+	Building2,
+	Phone,
+	User,
+	LogOut,
+	ChevronDown,
+} from "lucide-react";
 
 const SIDEBAR_WIDTH = 200;
 const FLOAT_INSET = 20;
 const FLOAT_GAP = 20;
 
-function AppShell() {
+const HEADER_BUTTON =
+	"cursor-pointer text-primary-foreground transition-colors duration-200 hover:bg-primary-foreground/20";
+
+interface SidebarLinkProps {
+	to: string;
+	label: string;
+	icon: ComponentType<{ className?: string }>;
+	end?: boolean;
+}
+
+function SidebarLink({ to, label, icon: Icon, end }: SidebarLinkProps) {
+	return (
+		<NavLink
+			to={to}
+			end={end}
+			className={({ isActive }) =>
+				cn(
+					"flex min-h-11 w-full flex-shrink-0 cursor-pointer items-center justify-start gap-3 rounded-xl px-3 py-2 text-muted-foreground no-underline transition-colors duration-200",
+					isActive && "bg-primary/15 text-primary font-medium",
+				)
+			}
+			aria-label={label}
+		>
+			<Icon className="size-[22px] shrink-0" aria-hidden />
+			<span className="text-sm font-medium">{label}</span>
+		</NavLink>
+	);
+}
+
+function UserMenu() {
+	const [open, setOpen] = useState(false);
+	const ref = useRef<HTMLDivElement>(null);
+	const navigate = useNavigate();
+	const { user, logout } = useAuth();
+
+	useEffect(() => {
+		if (!open) return;
+		function handleClickOutside(e: MouseEvent) {
+			if (ref.current && !ref.current.contains(e.target as Node)) {
+				setOpen(false);
+			}
+		}
+		document.addEventListener("mousedown", handleClickOutside);
+		return () => document.removeEventListener("mousedown", handleClickOutside);
+	}, [open]);
+
+	return (
+		<div className="relative" ref={ref}>
+			<button
+				type="button"
+				onClick={() => setOpen((o) => !o)}
+				className={cn(
+					"flex items-center gap-1.5 rounded-md border-none bg-transparent px-2 py-1.5 text-sm font-medium",
+					HEADER_BUTTON,
+				)}
+				aria-haspopup="true"
+				aria-expanded={open}
+			>
+				{user!.name}
+				<ChevronDown
+					className={cn("size-4 transition-transform duration-200", open && "rotate-180")}
+					aria-hidden
+				/>
+			</button>
+			{open && (
+				<div
+					className="absolute right-0 top-full z-50 mt-1.5 w-44 overflow-hidden rounded-lg border border-border bg-card py-1 shadow-lg"
+					role="menu"
+				>
+					<button
+						type="button"
+						role="menuitem"
+						className="flex w-full cursor-pointer items-center gap-2 border-none bg-transparent px-3 py-2 text-left text-sm text-foreground transition-colors duration-150 hover:bg-muted"
+						onClick={() => {
+							setOpen(false);
+							navigate("/profile");
+						}}
+					>
+						<User className="size-4" aria-hidden />
+						Edit Profile
+					</button>
+					<button
+						type="button"
+						role="menuitem"
+						className="flex w-full cursor-pointer items-center gap-2 border-none bg-transparent px-3 py-2 text-left text-sm text-destructive transition-colors duration-150 hover:bg-destructive/10"
+						onClick={() => {
+							setOpen(false);
+							logout();
+						}}
+					>
+						<LogOut className="size-4" aria-hidden />
+						Log Out
+					</button>
+				</div>
+			)}
+		</div>
+	);
+}
+
+function Sidebar({ isAuthenticated }: { isAuthenticated: boolean }) {
+	return (
+		<nav
+			className="absolute bottom-5 left-5 top-5 z-10 flex w-[200px] flex-col items-start gap-1 overflow-hidden rounded-2xl border border-border bg-card p-4 py-2 shadow-md"
+			aria-label="Main navigation"
+		>
+			<SidebarLink to="/" label="Home" icon={Home} end />
+			<SidebarLink to="/properties" label="Property Search" icon={Search} />
+			{isAuthenticated && (
+				<>
+					<SidebarLink to="/dashboard" label="Dashboard" icon={BarChart3} />
+					<SidebarLink to="/maintenance" label="Maintenance" icon={Wrench} />
+				</>
+			)}
+			<SidebarLink to="/contact" label="Contact" icon={Phone} />
+		</nav>
+	);
+}
+
+export default function AppLayout() {
 	const [navHidden, setNavHidden] = useState(false);
+	const { isAuthenticated, loading, user } = useAuth();
 
 	return (
 		<div className="flex min-h-screen flex-col">
@@ -22,7 +155,7 @@ function AppShell() {
 						type="button"
 						variant="ghost"
 						size="icon"
-						className="min-h-11 min-w-11 cursor-pointer text-primary-foreground transition-colors duration-200 hover:bg-primary-foreground/20"
+						className={cn("min-h-11 min-w-11", HEADER_BUTTON)}
 						aria-label={navHidden ? "Show menu" : "Hide menu"}
 						onClick={() => setNavHidden((h) => !h)}
 					>
@@ -38,7 +171,7 @@ function AppShell() {
 						type="button"
 						variant="ghost"
 						size="icon"
-						className="cursor-pointer text-primary-foreground transition-colors duration-200 hover:bg-primary-foreground/20"
+						className={HEADER_BUTTON}
 						aria-label="Favorites"
 					>
 						<Heart className="size-5" aria-hidden />
@@ -47,91 +180,29 @@ function AppShell() {
 						type="button"
 						variant="ghost"
 						size="icon"
-						className="cursor-pointer text-primary-foreground transition-colors duration-200 hover:bg-primary-foreground/20"
+						className={HEADER_BUTTON}
 						aria-label="Notifications"
 					>
 						<Bell className="size-5" aria-hidden />
 					</Button>
-					<div className="flex items-center gap-2">
-						<div className="size-9 shrink-0 rounded-full bg-primary-foreground/25" aria-hidden />
-						<span className="text-sm font-medium">SARAH</span>
-					</div>
-				</div>
-			</header>
-			<div className="relative flex min-h-0 flex-1">
-				{!navHidden && (
-					<nav
-						className="absolute left-5 top-5 bottom-5 z-10 flex w-[200px] flex-col items-start gap-1 overflow-hidden rounded-2xl border border-border bg-card p-4 py-2 shadow-md"
-						aria-label="Main navigation"
-					>
+					{loading ? (
+						<span className="text-sm font-medium text-primary-foreground/70" aria-hidden>
+							…
+						</span>
+					) : isAuthenticated && user ? (
+						<UserMenu />
+					) : (
 						<NavLink
-							to="/"
-							end
-							className={({ isActive }) =>
-								cn(
-									"flex min-h-11 w-full flex-shrink-0 cursor-pointer items-center justify-start gap-3 rounded-xl px-3 py-2 text-muted-foreground no-underline transition-colors duration-200",
-									isActive && "bg-primary/15 text-primary font-medium",
-								)
-							}
-							aria-label="Home"
+							to="/login"
+							className="rounded-md px-2 py-1.5 text-sm font-medium text-primary-foreground no-underline transition-colors duration-200 hover:bg-primary-foreground/20 hover:text-primary-foreground/90"
 						>
-							<Home className="size-[22px] shrink-0" aria-hidden />
-							<span className="text-sm font-medium">Home</span>
+							Sign Up / Sign In
 						</NavLink>
-						<NavLink
-							to="/properties"
-							className={({ isActive }) =>
-								cn(
-									"flex min-h-11 w-full flex-shrink-0 cursor-pointer items-center justify-start gap-3 rounded-xl px-3 py-2 text-muted-foreground no-underline transition-colors duration-200",
-									isActive && "bg-primary/15 text-primary font-medium",
-								)
-							}
-							aria-label="Property Search"
-						>
-							<Search className="size-[22px] shrink-0" aria-hidden />
-							<span className="text-sm font-medium">Property Search</span>
-						</NavLink>
-						<NavLink
-							to="/dashboard"
-							className={({ isActive }) =>
-								cn(
-									"flex min-h-11 w-full flex-shrink-0 cursor-pointer items-center justify-start gap-3 rounded-xl px-3 py-2 text-muted-foreground no-underline transition-colors duration-200",
-									isActive && "bg-primary/15 text-primary font-medium",
-								)
-							}
-							aria-label="Dashboard"
-						>
-							<BarChart3 className="size-[22px] shrink-0" aria-hidden />
-							<span className="text-sm font-medium">Dashboard</span>
-						</NavLink>
-						<NavLink
-							to="/maintenance"
-							className={({ isActive }) =>
-								cn(
-									"flex min-h-11 w-full flex-shrink-0 cursor-pointer items-center justify-start gap-3 rounded-xl px-3 py-2 text-muted-foreground no-underline transition-colors duration-200",
-									isActive && "bg-primary/15 text-primary font-medium",
-								)
-							}
-							aria-label="Maintenance"
-						>
-							<Wrench className="size-[22px] shrink-0" aria-hidden />
-							<span className="text-sm font-medium">Maintenance</span>
-						</NavLink>
-						<NavLink
-							to="/contact"
-							className={({ isActive }) =>
-								cn(
-									"flex min-h-11 w-full flex-shrink-0 cursor-pointer items-center justify-start gap-3 rounded-xl px-3 py-2 text-muted-foreground no-underline transition-colors duration-200",
-									isActive && "bg-primary/15 text-primary font-medium",
-								)
-							}
-							aria-label="Contact"
-						>
-							<Phone className="size-[22px] shrink-0" aria-hidden />
-							<span className="text-sm font-medium">Contact</span>
-						</NavLink>
-					</nav>
-				)}
+					)}
+				</div>
+			</header>
+			<div className="relative flex min-h-0 flex-1">
+				{!navHidden && <Sidebar isAuthenticated={isAuthenticated} />}
 				<main
 					className="min-h-full flex-1 overflow-auto bg-muted/40 p-6 transition-[margin-left] duration-200 ease-[cubic-bezier(0.4,0,0.2,1)]"
 					style={{
@@ -145,7 +216,3 @@ function AppShell() {
 		</div>
 	);
 }
-
-export default function AppLayout() {
-	return <AppShell />;
-}

package/dist/force-app/main/default/webapplications/appreactsampleb2x/src/features/authentication/api/userProfileApi.ts

@@ -0,0 +1,81 @@
+/**
+ * Extensible user profile fetching and updating via UI API GraphQL.
+ */
+import { getDataSDK } from "@salesforce/sdk-data";
+import { flattenGraphQLRecord } from "../utils/helpers";
+
+const USER_PROFILE_FIELDS_FULL = `
+    Id
+    FirstName { value }
+    LastName { value }
+    Email { value }
+    Phone { value }
+    Street { value }
+    City { value }
+    State { value }
+    PostalCode { value }
+    Country { value }`;
+
+function getUserProfileQuery(fields: string): string {
+	return `
+    query GetUserProfile($userId: ID) {
+        uiapi {
+            query {
+                User(where: { Id: { eq: $userId } }) {
+                    edges {
+                        node {${fields}}
+                    }
+                }
+            }
+        }
+    }`;
+}
+
+function getUserProfileMutation(fields: string): string {
+	return `
+    mutation UpdateUserProfile($input: UserUpdateInput!) {
+      uiapi {
+        UserUpdate(input: $input) {
+          Record {${fields}}
+        }
+      }
+    }`;
+}
+
+function throwOnGraphQLErrors(response: any): void {
+	if (response?.errors?.length) {
+		throw new Error(response.errors.map((e: any) => e.message).join("; "));
+	}
+}
+
+/**
+ * Fetches the user profile via GraphQL and returns a flattened record.
+ * @param userId - The Salesforce User Id.
+ * @param fields - GraphQL field selection (defaults to USER_PROFILE_FIELDS_FULL).
+ */
+export async function fetchUserProfile<T>(
+	userId: string,
+	fields: string = USER_PROFILE_FIELDS_FULL,
+): Promise<T> {
+	const data = await getDataSDK();
+	const response: any = await data.graphql?.(getUserProfileQuery(fields), { userId });
+	throwOnGraphQLErrors(response);
+	return flattenGraphQLRecord<T>(response?.data?.uiapi?.query?.User?.edges?.[0]?.node);
+}
+
+/**
+ * Updates the user profile via GraphQL and returns the flattened updated record.
+ * @param userId - The Salesforce User Id.
+ * @param values - The field values to update.
+ */
+export async function updateUserProfile<T>(
+	userId: string,
+	values: Record<string, unknown>,
+): Promise<T> {
+	const data = await getDataSDK();
+	const response: any = await data.graphql?.(getUserProfileMutation(USER_PROFILE_FIELDS_FULL), {
+		input: { Id: userId, User: { ...values } },
+	});
+	throwOnGraphQLErrors(response);
+	return flattenGraphQLRecord<T>(response?.data?.uiapi?.UserUpdate?.Record);
+}

package/dist/force-app/main/default/webapplications/appreactsampleb2x/src/features/authentication/authHelpers.ts

@@ -0,0 +1,73 @@
+import { AUTH_REDIRECT_PARAM } from "./authenticationConfig";
+import { z } from "zod";
+
+/** Email field validation */
+export const emailSchema = z.string().trim().email("Please enter a valid email address");
+
+/** Password field validation (minimum 8 characters) */
+export const passwordSchema = z.string().min(8, "Password must be at least 8 characters");
+
+/**
+ * Shared schema for new password + confirmation fields.
+ * Validates password length and matching confirmation.
+ */
+export const newPasswordSchema = z
+	.object({
+		newPassword: passwordSchema,
+		confirmPassword: z.string().min(1, "Please confirm your password"),
+	})
+	.refine((data) => data.newPassword === data.confirmPassword, {
+		message: "Passwords do not match",
+		path: ["confirmPassword"],
+	});
+
+/**
+ *
+ * Extracts the startUrl from URLSearchParams, defaulting to '/'.
+ *
+ * SECURITY NOTE: This function strictly validates the URL to prevent
+ * Open Redirect vulnerabilities. It allows only relative paths.
+ *
+ * @param searchParams - The URLSearchParams object from useSearchParams()
+ * @returns The start URL for post-authentication redirect
+ */
+export function getStartUrl(searchParams: URLSearchParams): string {
+	// 1. Check for the standard redirect parameter
+	const url = searchParams.get(AUTH_REDIRECT_PARAM);
+	// 2. Security Check: Validation Logic
+	if (url && isValidRedirect(url)) {
+		return url;
+	}
+	// 3. Fallback: Default to root
+	return "/";
+}
+
+/**
+ * [Dev Note] Security: Validates that the redirect URL is a relative path
+ * to prevent Open Redirect vulnerabilities.
+ *
+ * Security Checks:
+ * 1. Rejects protocol-relative URLs (//)
+ * 2. Rejects backslash usage which some browsers treat as slashes (/\)
+ * 3. Rejects control characters
+ */
+function isValidRedirect(url: string): boolean {
+	// Basic structure check
+	if (!url.startsWith("/") || url.startsWith("//")) return false;
+	// Security: Reject backslashes to prevent /\example.com bypasses
+	if (url.includes("\\")) return false;
+	// Robustness: Ensure it doesn't contain whitespace/control characters
+	if (/[^\u0021-\u00ff]/.test(url)) return false;
+	return true;
+}
+
+/**
+ * Shared response type for authentication endpoints (login/register).
+ * Success responses contain `success: true` and `redirectUrl`.
+ * Error responses contain `errors` array.
+ */
+export interface AuthResponse {
+	success?: boolean;
+	redirectUrl?: string | null;
+	errors?: string[];
+}

package/dist/force-app/main/default/webapplications/appreactsampleb2x/src/features/authentication/authenticationConfig.ts

@@ -0,0 +1,61 @@
+/**
+ * [Dev Note] Centralized configuration for Auth routes.
+ * Each route contains both the path and page title.
+ * Using constants prevents typos in route paths across the application.
+ */
+export const ROUTES = {
+	LOGIN: {
+		PATH: "/login",
+		TITLE: "Login | MyApp",
+	},
+	REGISTER: {
+		PATH: "/register",
+		TITLE: "Create Account | MyApp",
+	},
+	FORGOT_PASSWORD: {
+		PATH: "/forgot-password",
+		TITLE: "Recover Password | MyApp",
+	},
+	RESET_PASSWORD: {
+		PATH: "/reset-password",
+		TITLE: "Reset Password | MyApp",
+	},
+	PROFILE: {
+		PATH: "/profile",
+		TITLE: "My Profile | MyApp",
+	},
+	CHANGE_PASSWORD: {
+		PATH: "/change-password",
+		TITLE: "Change Password | MyApp",
+	},
+} as const;
+
+/**
+ * [Dev Note] Centralized configuration for API endpoints.
+ * These are server-side endpoints, not client-side routes.
+ */
+export const API_ROUTES = {
+	// W-21253864: Logout URL integration is not currently supported
+	LOGOUT: "/secur/logout.jsp",
+} as const;
+
+/**
+ * [Dev Note] Query parameter key used to store the return URL.
+ * e.g. /login?startUrl=/profile
+ */
+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",
+} as const;

package/dist/force-app/main/default/webapplications/appreactsampleb2x/src/features/authentication/context/AuthContext.tsx

@@ -0,0 +1,95 @@
+import { createContext, useContext, useState, useEffect, useCallback, type ReactNode } from "react";
+import { getCurrentUser } from "@salesforce/webapp-experimental/api";
+import { API_ROUTES } from "../authenticationConfig";
+
+interface User {
+	readonly id: string;
+	readonly name: string;
+}
+
+interface AuthContextType {
+	user: User | null;
+	isAuthenticated: boolean;
+	loading: boolean;
+	error: string | null;
+	checkAuth: () => Promise<void>;
+	logout: (startURL?: string) => void;
+}
+
+const AuthContext = createContext<AuthContextType | undefined>(undefined);
+
+interface AuthProviderProps {
+	children: ReactNode;
+}
+
+export function AuthProvider({ children }: AuthProviderProps) {
+	const [user, setUser] = useState<User | null>(null);
+	const [loading, setLoading] = useState(true);
+	const [error, setError] = useState<string | null>(null);
+
+	const checkAuth = useCallback(async () => {
+		setLoading(true);
+		setError(null);
+
+		try {
+			const userData = await getCurrentUser();
+			setUser(userData);
+		} catch (err) {
+			const errorMessage = err instanceof Error ? err.message : "Authentication failed";
+			setError(errorMessage);
+			setUser(null);
+		} finally {
+			setLoading(false);
+		}
+	}, []);
+
+	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]);
+
+	const value: AuthContextType = {
+		user,
+		isAuthenticated: user !== null,
+		loading,
+		error,
+		checkAuth,
+		logout,
+	};
+
+	return <AuthContext.Provider value={value}>{children}</AuthContext.Provider>;
+}
+
+/**
+ * Hook to access the authentication context.
+ * @returns {AuthContextType} Authentication state (user, isAuthenticated, loading, error, checkAuth)
+ * @throws {Error} If used outside of an AuthProvider
+ */
+export function useAuth(): AuthContextType {
+	const context = useContext(AuthContext);
+	if (context === undefined) {
+		throw new Error("useAuth must be used within an AuthProvider");
+	}
+	return context;
+}
+
+/**
+ * Returns the current authenticated user.
+ * @returns {User} The authenticated user object
+ * @throws {Error} If not used within AuthProvider or user is not authenticated
+ */
+export function getUser(): User {
+	const context = useAuth();
+	if (!context.user) {
+		throw new Error("Authenticated context not established");
+	}
+	return context.user;
+}

package/dist/force-app/main/default/webapplications/appreactsampleb2x/src/features/authentication/footers/footer-link.tsx

@@ -0,0 +1,36 @@
+import { Link } from "react-router";
+import { cn } from "../../../lib/utils";
+
+interface FooterLinkProps extends Omit<React.ComponentProps<typeof Link>, "children"> {
+	/** Link text prefix (e.g., "Don't have an account?") */
+	text?: string;
+	/** Link label (e.g., "Sign up") */
+	linkText: string;
+}
+
+/**
+ * Footer link component.
+ */
+export function FooterLink({ text, to, linkText, className, ...props }: FooterLinkProps) {
+	return (
+		<p className={cn("w-full text-center text-sm text-muted-foreground", className)}>
+			{text && (
+				<>
+					{text}
+					{/* Robustness: Explicit space ensures formatting tools don't strip it */}
+					{"\u00A0"}
+				</>
+			)}
+			<Link
+				to={to}
+				className={cn(
+					"font-medium underline hover:text-primary transition-colors",
+					"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+				)}
+				{...props}
+			>
+				{linkText}
+			</Link>
+		</p>
+	);
+}