Feature: Authentication

This feature provides authentication functionality for Salesforce Web Applications, including:

• AuthContext - React context for managing authentication state
• PrivateRoute - Route protection component for authenticated-only pages
• Authentication Pages - Login, Register, Profile, Forgot Password, Reset Password

Features

• Checks authentication status via Salesforce Chatter API (/chatter/users/me)
• Protects routes with automatic redirect to login
• Supports return URL (retUrl) query parameter for post-login navigation
• Displays user profile information from Salesforce

Setup

Prerequisites

1. Salesforce CLI (sf) - Must be installed and authenticated to a Salesforce org

Building and Running

# Build the feature (applies patches from template to dist)
yarn build

# Start the development server
yarn dev

The yarn build command will apply feature patches to create the dist directory.

Usage

Protecting Routes

Wrap routes that require authentication with PrivateRoute:

import PrivateRoute from "./components/PrivateRoute";

// In routes.tsx
{
  element: <PrivateRoute />,
  children: [
    {
      path: 'profile',
      element: <Profile />,
    }
  ]
}

Using Auth Context

Access authentication state in any component:

import { useAuth } from '../context/AuthContext';

function MyComponent() {
  const { user, isAuthenticated, loading, error } = useAuth();

  if (loading) return <div>Loading...</div>;
  if (!isAuthenticated) return <div>Please log in</div>;

  return <div>Welcome, {user?.displayName}</div>;
}

Notes

• The feature overrides app.tsx to wrap the app with AuthProvider
• The feature inherits appLayout.tsx from the base app (no override)
• Routes are merged with the base app's routes (Home, About are preserved)
• The webapp.json manifest is required for the Salesforce proxy to function > ⚠️ TODO: this should be removed once they are decoupled (webapp.json manifest file should not be required)