@salesforce/webapp-template-app-react-byo-experimental 1.3.3

package/dist/force-app/main/default/webapplications/appreactbyo/src/context/AuthContext.tsx

@@ -0,0 +1,83 @@
+import { createContext, useContext, useState, useEffect, useCallback, type ReactNode } from "react";
+import { getCurrentUser } from "@salesforce/webapp-experimental/api";
+
+interface User {
+	readonly id: string;
+	readonly name: string;
+}
+
+interface AuthContextType {
+	user: User | null;
+	isAuthenticated: boolean;
+	loading: boolean;
+	error: string | null;
+	checkAuth: () => Promise<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);
+		}
+	}, []);
+
+	useEffect(() => {
+		checkAuth();
+	}, [checkAuth]);
+
+	const value: AuthContextType = {
+		user,
+		isAuthenticated: user !== null,
+		loading,
+		error,
+		checkAuth,
+	};
+
+	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/appreactbyo/src/hooks/form.tsx

@@ -0,0 +1,116 @@
+import { useId } from "react";
+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";
+
+// Create form hook contexts
+export const { fieldContext, formContext, useFieldContext, useFormContext } =
+	createFormHookContexts();
+
+// ============================================================================
+// Field Components
+// ============================================================================
+
+interface TextFieldProps
+	extends Omit<
+		React.ComponentProps<typeof Input>,
+		"name" | "value" | "onBlur" | "onChange" | "aria-invalid"
+	> {
+	label: string;
+	labelAction?: React.ReactNode;
+	description?: React.ReactNode;
+}
+
+function TextField({
+	label,
+	id: providedId,
+	labelAction,
+	description,
+	type = "text",
+	...props
+}: TextFieldProps) {
+	const field = useFieldContext<string>();
+	const generatedId = useId();
+	const id = providedId ?? generatedId;
+	const descriptionId = `${id}-description`;
+	const errorId = `${id}-error`;
+	const isInvalid = field.state.meta.isTouched && field.state.meta.errors.length > 0;
+
+	// Deduplicate errors by message
+	const errors = field.state.meta.errors;
+	const uniqueErrors = [...new Map(errors.map((item: any) => [item["message"], item])).values()];
+
+	return (
+		<Field data-invalid={isInvalid}>
+			<div className="flex items-center">
+				<FieldLabel htmlFor={id}>{label}</FieldLabel>
+				{labelAction && <div className="ml-auto">{labelAction}</div>}
+			</div>
+			{description && <FieldDescription id={descriptionId}>{description}</FieldDescription>}
+			<Input
+				id={id}
+				name={field.name as string}
+				type={type}
+				value={field.state.value ?? ""}
+				onBlur={field.handleBlur}
+				onChange={(e: React.ChangeEvent<HTMLInputElement>) => field.handleChange(e.target.value)}
+				aria-invalid={isInvalid}
+				aria-describedby={cn(description && descriptionId, isInvalid && errorId)}
+				{...props}
+			/>
+			{isInvalid && uniqueErrors.length > 0 && <FieldError errors={uniqueErrors} />}
+		</Field>
+	);
+}
+
+/** Password field with preset type and autocomplete */
+function PasswordField({
+	label,
+	autoComplete = "current-password",
+	placeholder = AUTH_PLACEHOLDERS.PASSWORD,
+	...props
+}: Omit<TextFieldProps, "type">) {
+	return (
+		<TextField
+			label={label}
+			type="password"
+			autoComplete={autoComplete}
+			placeholder={placeholder}
+			{...props}
+		/>
+	);
+}
+
+/** Email field with preset type and autocomplete */
+function EmailField({
+	label,
+	placeholder = AUTH_PLACEHOLDERS.EMAIL,
+	...props
+}: Omit<TextFieldProps, "type">) {
+	return (
+		<TextField
+			label={label}
+			type="email"
+			autoComplete="username"
+			placeholder={placeholder}
+			{...props}
+		/>
+	);
+}
+
+// ============================================================================
+// Create Form Hook
+// ============================================================================
+
+export const { useAppForm } = createFormHook({
+	fieldContext,
+	formContext,
+	fieldComponents: {
+		TextField,
+		PasswordField,
+		EmailField,
+	},
+	formComponents: {},
+});

package/dist/force-app/main/default/webapplications/appreactbyo/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/webapplications/appreactbyo/src/navigationMenu.tsx

@@ -0,0 +1,81 @@
+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);
+
+	// Get all route configs and filter by showInNavigation
+	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/webapplications/appreactbyo/src/pages/About.tsx

@@ -0,0 +1,12 @@
+function About() {
+  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">About</h1>
+        <p className="text-lg text-gray-600">This is the about page.</p>
+      </div>
+    </div>
+  );
+}
+
+export default About;

package/dist/force-app/main/default/webapplications/appreactbyo/src/pages/ChangePassword.tsx

@@ -0,0 +1,105 @@
+import { useState } from "react";
+import { Link } from "react-router";
+import { z } from "zod";
+import { baseClient } 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 { getUser } from "../context/AuthContext";
+
+const changePasswordSchema = z
+	.object({
+		currentPassword: z.string().min(1, "Current password is required"),
+	})
+	.and(newPasswordSchema);
+
+export default function ChangePassword() {
+	const [success, setSuccess] = useState(false);
+	const [submitError, setSubmitError] = useState<string | null>(null);
+	const user = getUser();
+
+	const form = useAppForm({
+		defaultValues: { currentPassword: "", newPassword: "", confirmPassword: "" },
+		validators: { onChange: changePasswordSchema, onSubmit: changePasswordSchema },
+		onSubmit: async ({ value }) => {
+			setSubmitError(null);
+			setSuccess(false);
+			try {
+				// [Dev Note] Custom Apex Endpoint: /auth/change-password
+				// Security Critical:
+				// We must pass the `user.id` (from AuthContext) to the Apex endpoint
+				// to ensure the password change is applied to the correct user.
+				// The Apex backend should also verify that the authenticated session matches this ID.
+				// You must ensure this Apex class exists in your org
+				const response = await baseClient.post("/services/apexrest/auth/change-password", {
+					userId: user.id,
+					currentPassword: value.currentPassword,
+					newPassword: value.newPassword,
+				});
+				await handleApiResponse(response, "Password change failed");
+				setSuccess(true);
+				form.reset();
+			} catch (err) {
+				setSubmitError(getErrorMessage(err, "Password change failed"));
+			}
+		},
+		onSubmitInvalid: () => {},
+	});
+
+	return (
+		<CenteredPageLayout title={ROUTES.CHANGE_PASSWORD.TITLE}>
+			<form.AppForm>
+				<AuthForm
+					title="Change Password"
+					description="Enter your current and new password below"
+					error={submitError}
+					success={
+						success && (
+							<>
+								Password changed successfully!{" "}
+								<Link to={ROUTES.PROFILE.PATH} className="underline">
+									Back to Profile
+								</Link>
+							</>
+						)
+					}
+					submit={{ text: "Change Password", loadingText: "Changing…" }}
+					footer={{ link: ROUTES.PROFILE.PATH, linkText: "Back to Profile" }}
+				>
+					<form.AppField name="currentPassword">
+						{(field) => (
+							<field.PasswordField
+								label="Current Password"
+								placeholder={AUTH_PLACEHOLDERS.PASSWORD}
+								autoComplete="current-password"
+								disabled={success}
+							/>
+						)}
+					</form.AppField>
+					<form.AppField name="newPassword">
+						{(field) => (
+							<field.PasswordField
+								label="New Password"
+								placeholder={AUTH_PLACEHOLDERS.PASSWORD_NEW}
+								autoComplete="new-password"
+								disabled={success}
+							/>
+						)}
+					</form.AppField>
+					<form.AppField name="confirmPassword">
+						{(field) => (
+							<field.PasswordField
+								label="Confirm Password"
+								placeholder={AUTH_PLACEHOLDERS.PASSWORD_NEW_CONFIRM}
+								autoComplete="new-password"
+								disabled={success}
+							/>
+						)}
+					</form.AppField>
+				</AuthForm>
+			</form.AppForm>
+		</CenteredPageLayout>
+	);
+}

package/dist/force-app/main/default/webapplications/appreactbyo/src/pages/ForgotPassword.tsx

@@ -0,0 +1,67 @@
+import { useState } from "react";
+import { z } from "zod";
+import { baseClient } 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 { handleApiResponse, getErrorMessage } from "../utils/helpers";
+
+const forgotPasswordSchema = z.object({
+	username: z.string().trim().toLowerCase().email("Please enter a valid username"),
+});
+
+export default function ForgotPassword() {
+	const [success, setSuccess] = useState(false);
+	const [submitError, setSubmitError] = useState<string | null>(null);
+
+	const form = useAppForm({
+		defaultValues: { username: "" },
+		validators: { onChange: forgotPasswordSchema, onSubmit: forgotPasswordSchema },
+		onSubmit: async ({ value }) => {
+			setSubmitError(null);
+			setSuccess(false);
+			try {
+				// [Dev Note] Custom Apex Endpoint: /auth/forgot-password
+				// You must ensure this Apex class exists in your org
+				const response = await baseClient.post("/services/apexrest/auth/forgot-password", {
+					username: value.username.trim(),
+				});
+				await handleApiResponse(response, "Failed to send reset link");
+				setSuccess(true);
+			} catch (err) {
+				setSubmitError(getErrorMessage(err, "Failed to send reset link"));
+			}
+		},
+		onSubmitInvalid: () => {},
+	});
+
+	return (
+		<CenteredPageLayout title={ROUTES.FORGOT_PASSWORD.TITLE}>
+			<form.AppForm>
+				<AuthForm
+					title="Forgot Password"
+					description="Enter your username and we'll send you a reset link"
+					error={submitError}
+					success={
+						success &&
+						"If that username exists in our system, you will receive a reset link shortly."
+					}
+					submit={{ text: "Send Reset Link", loadingText: "Sending…" }}
+					footer={{ text: "Remember your password?", link: ROUTES.LOGIN.PATH, linkText: "Sign in" }}
+				>
+					<form.AppField name="username">
+						{(field) => (
+							<field.TextField
+								label="Username"
+								placeholder={AUTH_PLACEHOLDERS.USERNAME}
+								autoComplete="username"
+								disabled={success}
+							/>
+						)}
+					</form.AppField>
+				</AuthForm>
+			</form.AppForm>
+		</CenteredPageLayout>
+	);
+}

package/dist/force-app/main/default/webapplications/appreactbyo/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/webapplications/appreactbyo/src/pages/Login.tsx

@@ -0,0 +1,84 @@
+import { useState } from "react";
+import { useNavigate, useSearchParams, Link } from "react-router";
+import { z } from "zod";
+import { baseClient } 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";
+
+const loginSchema = z.object({
+	email: emailSchema,
+	password: z.string().min(1, "Password is required"),
+});
+
+export default function Login() {
+	const navigate = useNavigate();
+	const [searchParams] = useSearchParams();
+	const [submitError, setSubmitError] = useState<string | null>(null);
+
+	const form = useAppForm({
+		defaultValues: { email: "", password: "" },
+		validators: { onChange: loginSchema, onSubmit: loginSchema },
+		onSubmit: async ({ value }) => {
+			setSubmitError(null);
+			try {
+				// [Dev Note] Salesforce Integration:
+				// We use 'baseClient.post' to make an authenticated (or guest) call to Salesforce.
+				// "/services/apexrest/auth/login" refers to a custom Apex Class exposed as a REST resource.
+				// You must ensure this Apex class exists in your org and handles the login logic
+				// (e.g., creating a session or returning a token).
+				const response = await baseClient.post("/services/apexrest/auth/login", {
+					email: value.email.trim().toLowerCase(),
+					password: value.password,
+				});
+				await handleApiResponse(response, "Login failed");
+
+				// [Dev Note] After successful API call, redirect to the intended page.
+				// The session cookie is typically set by the server/Apex response headers.
+				navigate(getStartUrl(searchParams), { replace: true });
+			} catch (err) {
+				setSubmitError(getErrorMessage(err, "Login failed"));
+			}
+		},
+		onSubmitInvalid: () => {},
+	});
+
+	return (
+		<CenteredPageLayout title={ROUTES.LOGIN.TITLE}>
+			<form.AppForm>
+				<AuthForm
+					title="Login"
+					description="Enter your email below to login to your account"
+					error={submitError}
+					submit={{ text: "Login", loadingText: "Logging in…" }}
+					footer={{
+						text: "Don't have an account?",
+						link: ROUTES.REGISTER.PATH,
+						linkText: "Sign up",
+					}}
+				>
+					<form.AppField name="email">
+						{(field) => <field.EmailField label="Email" />}
+					</form.AppField>
+					<form.AppField name="password">
+						{(field) => (
+							<field.PasswordField
+								label="Password"
+								labelAction={
+									<Link
+										to={ROUTES.FORGOT_PASSWORD.PATH}
+										className="text-sm underline-offset-4 hover:underline"
+									>
+										Forgot your password?
+									</Link>
+								}
+							/>
+						)}
+					</form.AppField>
+				</AuthForm>
+			</form.AppForm>
+		</CenteredPageLayout>
+	);
+}

package/dist/force-app/main/default/webapplications/appreactbyo/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>
+  );
+}