PII Masking & Privacy (Hide Mode)
Relevant source files
The following files were used as context for generating this wiki page:
The PII Masking & Privacy system, referred to as "Hide Mode," is a client-side utility designed to protect sensitive user information—specifically Personally Identifiable Information (PII) like email addresses—within the Recoup Admin dashboard. It allows administrators to toggle the visibility of sensitive data globally across the application.
When active, Hide Mode replaces sensitive strings with masked versions (e.g., masking the local part of an email address) to prevent accidental exposure during demonstrations, screen sharing, or recordings. This system is integrated into the root layout of the application, ensuring that privacy settings are respected across all dashboard modules, including Privy Logins and Account Details.
Architecture & State Management
The system follows a Provider pattern to manage the global "hidden" state. It consists of a React Context that tracks whether PII should be masked and provides a toggle function to update this state.
HideProvider
The HideProvider is the core of the system. It initializes the isHidden state and wraps the application's component tree. This ensures that any component within the Providers hierarchy can access and respond to the privacy setting.
Sources: providers/HideProvider.tsx:1-25, providers/Providers.tsx
Data Flow for Privacy Toggling
The following diagram illustrates how the privacy state is managed and consumed by the UI:
The state transition is triggered by user interaction in the header and propagated down to individual data cells.
UI Components & Interaction
HideToggle
The HideToggle component is located in the application header (AppHeader). It provides a visual indicator of the current privacy state using Eye and EyeOff icons from the lucide-react library.
The toggle includes a "blink" animation effect. When clicked, the icon undergoes a vertical scale transition (scaling to 0 and back to 1) to simulate an eye closing and opening. This animation is controlled via a phase state (idle, closing, opening) and a duration constant of 150ms.
Sources: components/Header/HideToggle.tsx:5-52
Component Metadata
| Property | Type | Description |
|---|---|---|
isHidden | boolean | Global state indicating if PII should be masked. |
toggle | function | Function to flip the isHidden boolean. |
BLINK_MS | number | Constant (150) defining the animation speed. |
Sources: providers/HideProvider.tsx:5-10, components/Header/HideToggle.tsx:7
Implementation Logic
Email Masking Utility
The masking logic is centralized in the maskEmail utility. It processes an email string by preserving the domain and the first/last characters of the local part, replacing the intermediate characters with asterisks.
// lib/hide/maskEmail.ts
export function maskEmail(email: string): string {
const [local, domain] = email.split("@");
if (!local || !domain) return email;
if (local.length <= 2) return `*@${domain}`;
return `${local[0]}${"*".repeat(local.length - 2)}${local[local.length - 1]}@${domain}`;
}
Sources: lib/hide/maskEmail.ts:1-7
Consumption via Hooks
Components display sensitive data by using the useDisplayEmail hook. This hook automatically subscribes to the HideProvider context and returns either the original email or the masked version based on the isHidden value.
Sources: lib/hide/useDisplayEmail.ts:1-12
Summary
Hide Mode provides a essential privacy layer for the Recoup Admin dashboard. By leveraging React Context and custom hooks, the system ensures that PII masking is consistent across various pages, such as the Privy Logins page and Account Task Runs. The implementation prioritizes user experience through animated feedback while maintaining a simple, functional approach to data obfuscation.