@salesforce/webapp-template-feature-react-authentication-experimental 1.71.0 → 1.71.2

package/dist/CHANGELOG.md

@@ -3,6 +3,22 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [1.71.2](https://github.com/salesforce-experience-platform-emu/webapps/compare/v1.71.1...v1.71.2) (2026-03-05)
+
+**Note:** Version bump only for package @salesforce/webapp-template-base-sfdx-project-experimental
+
+
+
+
+
+## [1.71.1](https://github.com/salesforce-experience-platform-emu/webapps/compare/v1.71.0...v1.71.1) (2026-03-05)
+
+**Note:** Version bump only for package @salesforce/webapp-template-base-sfdx-project-experimental
+
+
+
+
+
 # [1.71.0](https://github.com/salesforce-experience-platform-emu/webapps/compare/v1.70.0...v1.71.0) (2026-03-05)
 
 **Note:** Version bump only for package @salesforce/webapp-template-base-sfdx-project-experimental

package/dist/force-app/main/default/webapplications/feature-react-authentication/README.md

@@ -0,0 +1,75 @@
+# Base React App
+
+Base React App is a template application that demonstrates how to build a React web app on the Salesforce platform with Vite, TypeScript, Tailwind, shadcn/ui, and the Salesforce Web App SDK. It provides a minimal shell (home, 404), routing, and GraphQL codegen support so feature apps can extend it via the patches pipeline.
+
+This web application lives inside an SFDX project. The project root is the directory that contains `force-app/` and `sfdx-project.json`. Run the commands in the sections below from the paths indicated.
+
+## Table of contents
+
+- [Run (development)](#run-development)
+- [Build](#build)
+- [Deploy](#deploy)
+- [Test](#test)
+
+## Run (development)
+
+From the web app directory (`force-app/main/default/webapplications/base-react-app`):
+
+```bash
+npm install
+npm run dev
+```
+
+This starts the Vite dev server (e.g. http://localhost:5173). Use `npm run dev:design` to run in design mode.
+
+## Build
+
+From the web app directory:
+
+```bash
+npm install
+npm run build
+```
+
+The production build is written to `dist/` inside the web app folder. Deploy using the steps in [Deploy](#deploy).
+
+## Deploy
+
+From the **SFDX project root** (the directory that contains `force-app/`):
+
+1. Build the web app:
+
+   ```bash
+   cd force-app/main/default/webapplications/base-react-app && npm install && npm run build && cd -
+   ```
+
+2. Deploy the web app only:
+
+   ```bash
+   sf project deploy start --source-dir force-app/main/default/webapplications --target-org <alias>
+   ```
+
+   Or deploy all metadata:
+
+   ```bash
+   sf project deploy start --source-dir force-app --target-org <alias>
+   ```
+
+   Replace `<alias>` with your target org alias.
+
+## Test
+
+From the web app directory:
+
+```bash
+npm install
+npm run test
+```
+
+This runs the unit test suite (Vitest). For end-to-end tests from the **base-react-app package root**:
+
+```bash
+npm run test:e2e
+```
+
+This installs dependencies, builds with E2E asset rewrites, and runs Playwright. Ensure Chromium is installed (`npx playwright install chromium` if needed).

package/dist/force-app/main/default/webapplications/feature-react-authentication/package.json

@@ -15,8 +15,8 @@
     "graphql:schema": "node scripts/get-graphql-schema.mjs"
   },
   "dependencies": {
-    "@salesforce/sdk-data": "^1.71.0",
-    "@salesforce/webapp-experimental": "^1.71.0",
+    "@salesforce/sdk-data": "^1.71.2",
+    "@salesforce/webapp-experimental": "^1.71.2",
     "@tailwindcss/vite": "^4.1.17",
     "@tanstack/react-form": "^1.28.4",
     "class-variance-authority": "^0.7.1",
@@ -40,7 +40,7 @@
     "@graphql-eslint/eslint-plugin": "^4.1.0",
     "@graphql-tools/utils": "^11.0.0",
     "@playwright/test": "^1.49.0",
-    "@salesforce/vite-plugin-webapp-experimental": "^1.71.0",
+    "@salesforce/vite-plugin-webapp-experimental": "^1.71.2",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.1.0",
     "@testing-library/user-event": "^14.5.2",

package/dist/force-app/main/default/webapplications/feature-react-authentication/src/components/alerts/status-alert.tsx

@@ -0,0 +1,49 @@
+import { cva, type VariantProps } from 'class-variance-authority';
+import { AlertCircleIcon, CheckCircle2Icon } from 'lucide-react';
+import { Alert, AlertDescription } from '../../components/ui/alert';
+import { useId } from 'react';
+
+const statusAlertVariants = cva('', {
+  variants: {
+    variant: {
+      error: '',
+      success: '',
+    },
+  },
+  defaultVariants: {
+    variant: 'error',
+  },
+});
+
+interface StatusAlertProps extends VariantProps<typeof statusAlertVariants> {
+  children?: React.ReactNode;
+  /** Alert variant type. @default "error" */
+  variant?: 'error' | 'success';
+}
+
+/**
+ * Status alert component for displaying error or success messages.
+ * Returns null if no children are provided.
+ */
+export function StatusAlert({ children, variant = 'error' }: StatusAlertProps) {
+  if (!children) return null;
+
+  const isError = variant === 'error';
+  const descriptionId = useId();
+
+  return (
+    <Alert
+      variant={isError ? 'destructive' : 'default'}
+      className={statusAlertVariants({ variant })}
+      aria-describedby={descriptionId}
+      role={isError ? 'alert' : 'status'}
+    >
+      {isError ? (
+        <AlertCircleIcon aria-hidden="true" />
+      ) : (
+        <CheckCircle2Icon aria-hidden="true" />
+      )}
+      <AlertDescription id={descriptionId}>{children}</AlertDescription>
+    </Alert>
+  );
+}

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

@@ -0,0 +1,29 @@
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from '../../components/ui/card';
+
+interface CardLayoutProps {
+  title: string;
+  description?: string;
+  children: React.ReactNode;
+}
+
+/**
+ * Card layout component for authentication pages.
+ * Provides CardHeader with title and optional description, and CardContent.
+ */
+export function CardLayout({ title, description, children }: CardLayoutProps) {
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle className="text-2xl">{title}</CardTitle>
+        {description && <CardDescription>{description}</CardDescription>}
+      </CardHeader>
+      <CardContent>{children}</CardContent>
+    </Card>
+  );
+}

package/dist/force-app/main/default/webapplications/feature-react-authentication/src/{auth → features/authentication}/footers/footer-link.tsx

@@ -1,5 +1,5 @@
 import { Link } from "react-router";
-import { cn } from "../../lib/utils";
+import { cn } from "../../../lib/utils";
 
 interface FooterLinkProps extends Omit<React.ComponentProps<typeof Link>, "children"> {
 	/** Link text prefix (e.g., "Don't have an account?") */

package/dist/force-app/main/default/webapplications/feature-react-authentication/src/{auth → features/authentication}/forms/auth-form.tsx

@@ -1,8 +1,8 @@
-import { FieldGroup } from "../../components/ui/field";
-import { StatusAlert } from "../alerts/status-alert";
+import { FieldGroup } from "../../../components/ui/field";
+import { StatusAlert } from "../../../components/alerts/status-alert";
 import { FooterLink } from "../footers/footer-link";
 import { SubmitButton } from "./submit-button";
-import { CardLayout } from "../layout/card-layout";
+import { CardLayout } from "../../../components/layouts/card-layout";
 import { useFormContext } from "../hooks/form";
 import { useId } from "react";
 

package/dist/force-app/main/default/webapplications/feature-react-authentication/src/{auth → features/authentication}/forms/submit-button.tsx

@@ -1,6 +1,6 @@
-import { Button } from "../../components/ui/button";
-import { Spinner } from "../../components/ui/spinner";
-import { cn } from "../../lib/utils";
+import { Button } from "../../../components/ui/button";
+import { Spinner } from "../../../components/ui/spinner";
+import { cn } from "../../../lib/utils";
 import { useFormContext } from "../hooks/form";
 
 interface SubmitButtonProps extends Omit<React.ComponentProps<typeof Button>, "type"> {

package/dist/force-app/main/default/webapplications/feature-react-authentication/src/{auth → features/authentication}/hooks/form.tsx

@@ -5,9 +5,9 @@ import {
 	FieldDescription,
 	FieldError,
 	FieldLabel,
-} from "../../components/ui/field";
-import { Input } from "../../components/ui/input";
-import { cn } from "../../lib/utils";
+} from "../../../components/ui/field";
+import { Input } from "../../../components/ui/input";
+import { cn } from "../../../lib/utils";
 import { AUTH_PLACEHOLDERS } from "../authenticationConfig";
 
 // Create form hook contexts

package/dist/force-app/main/default/webapplications/feature-react-authentication/src/{auth → features/authentication}/layout/card-skeleton.tsx

@@ -1,6 +1,6 @@
 import { CenteredPageLayout } from "./centered-page-layout";
-import { Card, CardContent, CardHeader } from "../../components/ui/card";
-import { Skeleton } from "../../components/ui/skeleton";
+import { Card, CardContent, CardHeader } from "../../../components/ui/card";
+import { Skeleton } from "../../../components/ui/skeleton";
 
 interface CardSkeletonProps {
 	/**

package/dist/force-app/main/default/webapplications/feature-react-authentication/src/{auth → features/authentication}/layout/centered-page-layout.tsx

@@ -1,5 +1,5 @@
 import { cva, type VariantProps } from "class-variance-authority";
-import { cn } from "../../lib/utils";
+import { cn } from "../../../lib/utils";
 
 /**
  * Variant styles for the content container's maximum width.

package/dist/force-app/main/default/webapplications/feature-react-authentication/src/{auth → features/authentication}/layouts/AuthAppLayout.tsx

@@ -1,6 +1,6 @@
 import SessionTimeoutValidator from "../sessionTimeout/SessionTimeoutValidator";
 import { AuthProvider } from "../context/AuthContext";
-import AppLayout from "../../appLayout";
+import AppLayout from "../../../appLayout";
 
 export default function AuthAppLayout() {
 	return (

package/dist/force-app/main/default/webapplications/feature-react-authentication/src/{auth → features/authentication}/pages/ResetPassword.tsx

@@ -1,9 +1,9 @@
 import { useState } from "react";
 import { Link, useSearchParams } from "react-router";
-import { CardLayout } from "../layout/card-layout";
+import { CardLayout } from "../../../components/layouts/card-layout";
 import { CenteredPageLayout } from "../layout/centered-page-layout";
 import { AuthForm } from "../forms/auth-form";
-import { StatusAlert } from "../alerts/status-alert";
+import { StatusAlert } from "../../../components/alerts/status-alert";
 import { useAppForm } from "../hooks/form";
 import { getDataSDK } from "@salesforce/sdk-data";
 import { ROUTES, AUTH_PLACEHOLDERS } from "../authenticationConfig";

package/dist/force-app/main/default/webapplications/feature-react-authentication/src/{auth → features/authentication}/sessionTimeout/SessionTimeoutValidator.tsx

@@ -10,8 +10,8 @@ import { useAuth } from "../context/AuthContext";
 import { pollSessionTimeServlet, extendSessionTime } from "./sessionTimeService";
 import { useCountdownTimer } from "../hooks/useCountdownTimer";
 import { useRetryWithBackoff } from "../hooks/useRetryWithBackoff";
-import { Alert, AlertTitle, AlertDescription } from "../../components/ui/alert";
-import { Button } from "../../components/ui/button";
+import { Alert, AlertTitle, AlertDescription } from "../../../components/ui/alert";
+import { Button } from "../../../components/ui/button";
 import {
 	Dialog,
 	DialogContent,
@@ -19,7 +19,7 @@ import {
 	DialogTitle,
 	DialogDescription,
 	DialogFooter,
-} from "../../components/ui/dialog";
+} from "../../../components/ui/dialog";
 import {
 	STORAGE_KEYS,
 	LABELS,

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

@@ -1,16 +1,16 @@
 import type { RouteObject } from 'react-router';
 import Home from './pages/Home';
 import NotFound from './pages/NotFound';
-import AuthAppLayout from "./auth/layouts/AuthAppLayout";
-import Login from "./auth/pages/Login";
-import Register from "./auth/pages/Register";
-import ForgotPassword from "./auth/pages/ForgotPassword";
-import ResetPassword from "./auth/pages/ResetPassword";
-import Profile from "./auth/pages/Profile";
-import ChangePassword from "./auth/pages/ChangePassword";
-import AuthenticationRoute from "./auth/layouts/authenticationRouteLayout";
-import PrivateRoute from "./auth/layouts/privateRouteLayout";
-import { ROUTES } from "./auth/authenticationConfig";
+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[] = [
   {

package/dist/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@salesforce/webapp-template-base-sfdx-project-experimental",
-  "version": "1.71.0",
+  "version": "1.71.2",
   "description": "Base SFDX project template",
   "private": true,
   "files": [

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@salesforce/webapp-template-feature-react-authentication-experimental",
-  "version": "1.71.0",
+  "version": "1.71.2",
   "description": "Authentication feature for web applications",
   "license": "SEE LICENSE IN LICENSE.txt",
   "author": "",
@@ -16,7 +16,7 @@
     "clean": "rm -rf dist"
   },
   "devDependencies": {
-    "@salesforce/webapp-experimental": "^1.71.0",
+    "@salesforce/webapp-experimental": "^1.71.2",
     "@tanstack/react-form": "^1.27.7",
     "@types/react": "^19.2.7",
     "@types/react-dom": "^19.2.3",

package/dist/force-app/main/default/webapplications/feature-react-authentication/src/auth/alerts/status-alert.tsx

@@ -1,45 +0,0 @@
-import { cva, type VariantProps } from "class-variance-authority";
-import { AlertCircleIcon, CheckCircle2Icon } from "lucide-react";
-import { Alert, AlertDescription } from "../../components/ui/alert";
-import { useId } from "react";
-
-const statusAlertVariants = cva("", {
-	variants: {
-		variant: {
-			error: "",
-			success: "",
-		},
-	},
-	defaultVariants: {
-		variant: "error",
-	},
-});
-
-interface StatusAlertProps extends VariantProps<typeof statusAlertVariants> {
-	children?: React.ReactNode;
-	/** Alert variant type. @default "error" */
-	variant?: "error" | "success";
-}
-
-/**
- * Status alert component for displaying error or success messages.
- * Returns null if no children are provided.
- */
-export function StatusAlert({ children, variant = "error" }: StatusAlertProps) {
-	if (!children) return null;
-
-	const isError = variant === "error";
-	const descriptionId = useId();
-
-	return (
-		<Alert
-			variant={isError ? "destructive" : "default"}
-			className={statusAlertVariants({ variant })}
-			aria-describedby={descriptionId}
-			role={isError ? "alert" : "status"}
-		>
-			{isError ? <AlertCircleIcon aria-hidden="true" /> : <CheckCircle2Icon aria-hidden="true" />}
-			<AlertDescription id={descriptionId}>{children}</AlertDescription>
-		</Alert>
-	);
-}

package/dist/force-app/main/default/webapplications/feature-react-authentication/src/auth/layout/card-layout.tsx

@@ -1,29 +0,0 @@
-import {
-	Card,
-	CardContent,
-	CardDescription,
-	CardHeader,
-	CardTitle,
-} from "../../components/ui/card";
-
-interface CardLayoutProps {
-	title: string;
-	description?: string;
-	children: React.ReactNode;
-}
-
-/**
- * Card layout component for authentication pages.
- * Provides CardHeader with title and optional description, and CardContent.
- */
-export function CardLayout({ title, description, children }: CardLayoutProps) {
-	return (
-		<Card>
-			<CardHeader>
-				<CardTitle className="text-2xl">{title}</CardTitle>
-				{description && <CardDescription>{description}</CardDescription>}
-			</CardHeader>
-			<CardContent>{children}</CardContent>
-		</Card>
-	);
-}