@redacto.io/consent-sdk-react 10.0.0-beta.1 → 10.0.0-beta.11

package/src/RedactoPrivacyCenter/components/Form.tsx

@@ -10,10 +10,10 @@ import { PiUploadBold } from 'react-icons/pi';
 import { toast } from '../utils/toast';
 import { PCButton, PCCheckbox, PCInput, PCLoader, PCSelect, PCText, PCTextarea } from '../ui';
 import { PCModal } from '../ui/PCModal';
-import { buildGroupDataElements, buildGroupPurposes, consentGroupToFormProductGroup } from './groupHelpers';
+import { buildGroupDataElements, buildGroupPurposes, consentGroupToFormProductGroup, legacyFlatGroup } from './groupHelpers';
 import { pcStyles } from '../styles/pcStyles';
 import { createCaseRequest, fetchUserConsents, getFormData } from '../lib/api';
-import { FORM_PICKER_GROUP_LIMIT } from '../lib/constants';
+import { FORM_PICKER_GROUP_LIMIT, LEGACY_PRODUCT_GROUP_UUID } from '../lib/constants';
 import { ensureValidToken } from '../lib/utils';
 import { useAuth } from '../context/AuthContext';
 import { useBaseUrl } from '../context/BaseUrlContext';
@@ -143,7 +143,7 @@ export default function Form({
   const [isSubmitted, setIsSubmitted] = useState(false);
   const { t } = useTranslation();
   const { accessToken, refreshToken, onError, updateTokens } = useAuth();
-  const { consentClient, baseUrl, ledgerBaseUrl } = useBaseUrl();
+  const { consentClient, baseUrl } = useBaseUrl();
   const organizationId = organization?.uuid;
   const workspaceId = organization?.workspaces[0]?.uuid;
 
@@ -235,12 +235,31 @@ export default function Form({
 
   // Union of direct + nominated product groups exposed by the backend.
   // Drives both the product-cards step and the per-product picker beneath.
+  // When the backend exposes no groups at all but did return the legacy flat
+  // `purposes` list (pre-grouping Python deployments, and the popup /
+  // case-management contexts that cannot read user-consents), fall back to a
+  // single synthetic group so the purposes stay reachable instead of the
+  // picker claiming the principal has no consents.
   const allGroups = useMemo<FormProductGroup[]>(() => {
     if (!data) {
       return [];
     }
-    return [...(data.direct_groups ?? []), ...(data.nominated_groups ?? [])];
-  }, [data]);
+    const groups = [
+      ...(data.direct_groups ?? []),
+      ...(data.nominated_groups ?? []),
+    ];
+    if (groups.length > 0) {
+      return groups;
+    }
+    const flatGroup = legacyFlatGroup(data, t('yourData'));
+    // `buildGroupPurposes` is what the panel renders from — it drops purposes
+    // with no data elements, so a flat list that survives nothing must keep
+    // showing the empty state rather than an unusable panel.
+    if (buildGroupPurposes(flatGroup).length === 0) {
+      return [];
+    }
+    return [flatGroup];
+  }, [data, t]);
 
   // TECH-3712 UX: when the DP has exactly one consent group total
   // (direct + nominated combined), the product-selection step is friction —
@@ -275,21 +294,22 @@ export default function Form({
     [],
   );
 
-  // Approach A: source the DSAR request-form product picker from the Go
-  // ledger's user-consents. After the consent cutover, consents live in the
-  // ledger, so Python's form/data returns no product groups; we overlay the
-  // ledger's product-grouped consents onto the form data instead. Only the
-  // end-user privacy-center path is eligible — popup / case-management resolve
-  // an arbitrary contact, which the JWT-scoped ledger endpoint cannot serve,
-  // so those keep the Python form/data groups. Returns the form data unchanged
-  // when ineligible or when the ledger read fails (graceful fallback to
-  // whatever groups form/data supplied). Without a configured ledgerBaseUrl,
-  // consents still live in Python and form/data groups are authoritative, so
-  // the overlay must not run (fetchUserConsents would return the legacy Python
-  // shape, which consentGroupToFormProductGroup does not map).
-  const withLedgerPickerGroups = useCallback(
+  // Approach A: source the DSAR request-form product picker from user-consents
+  // rather than from Python's form/data, which stopped emitting product groups
+  // after the consent cutover. `consentClient.getUserConsents` serves the same
+  // grouped payload from either backend — the Go ledger's
+  // `/public/.../user-consents` when a ledgerBaseUrl is configured, Python's
+  // `/dsar/privacy-center/user-consents` otherwise (the same source the
+  // Manage Consent view reads in both modes) — so the overlay runs regardless
+  // of which backend the SDK points at. Only the end-user privacy-center path
+  // is eligible: popup / case-management resolve an arbitrary contact, which
+  // the JWT-scoped user-consents endpoint cannot serve, so those keep the
+  // form/data groups. Returns the form data unchanged when ineligible, when
+  // the read fails, or when it comes back with no groups at all — an empty
+  // result must never overwrite groups form/data did supply.
+  const withUserConsentPickerGroups = useCallback(
     async (form: FormData, language?: string): Promise<FormData> => {
-      if (!ledgerBaseUrl || isPopup || isCaseManagementContext || !organizationId || !workspaceId) {
+      if (isPopup || isCaseManagementContext || !organizationId || !workspaceId) {
         return form;
       }
       const consents = await fetchUserConsents({
@@ -304,19 +324,18 @@ export default function Form({
         nominatedLimit: FORM_PICKER_GROUP_LIMIT,
         language,
       });
-      if (!consents) {
+      const direct = consents?.direct ?? [];
+      const nominated = consents?.nominated ?? [];
+      if (direct.length === 0 && nominated.length === 0) {
         return form;
       }
       return {
         ...form,
-        direct_groups: (consents.direct ?? []).map(consentGroupToFormProductGroup),
-        nominated_groups: (consents.nominated ?? []).map(
-          consentGroupToFormProductGroup,
-        ),
+        direct_groups: direct.map(consentGroupToFormProductGroup),
+        nominated_groups: nominated.map(consentGroupToFormProductGroup),
       };
     },
     [
-      ledgerBaseUrl,
       isPopup,
       isCaseManagementContext,
       organizationId,
@@ -366,7 +385,7 @@ export default function Form({
         return;
       }
 
-      setData(await withLedgerPickerGroups(translatedFormData, langValue));
+      setData(await withUserConsentPickerGroups(translatedFormData, langValue));
 
       if (translatedFormData.grievance_options) {
         const currentGrievanceSelections = { ...selectedGrievances };
@@ -385,7 +404,7 @@ export default function Form({
     } finally {
       setIsTranslating(false);
     }
-  }, [organizationId, workspaceId, data, formData.contact, isPopup, isCaseManagementContext, authContext, consentClient, selectedGrievances, t, withLedgerPickerGroups]);
+  }, [organizationId, workspaceId, data, formData.contact, isPopup, isCaseManagementContext, authContext, consentClient, selectedGrievances, t, withUserConsentPickerGroups]);
 
   // Clear product / org-level selections when request type changes.
   // Per-product state (selectedPurposes, selectedCorrectionElements,
@@ -538,7 +557,7 @@ export default function Form({
           }
         }
 
-        const pickerData = await withLedgerPickerGroups(
+        const pickerData = await withUserConsentPickerGroups(
           displayData,
           langParam || undefined,
         );
@@ -565,7 +584,7 @@ export default function Form({
     };
 
     void initializePrivacyCenterForm();
-  }, [organizationId, workspaceId, isPopup, authContext, consentClient, withLedgerPickerGroups]);
+  }, [organizationId, workspaceId, isPopup, authContext, consentClient, withUserConsentPickerGroups]);
 
   /**
    * Maps translated correction element names back to English names using UUID lookup.
@@ -671,7 +690,13 @@ export default function Form({
     }
 
     const isProductScoped = isProductScopedRequestType(requestType);
-    const anchorGroup = isProductScoped ? selectedGroup : null;
+    // The synthetic legacy-flat group has no server-side product, so it must
+    // not anchor the case — those submissions keep the pre-grouping
+    // org-level shape (`product_uuid` is optional on the backend).
+    const isLegacyFlatSelection =
+      selectedGroup?.product_uuid === LEGACY_PRODUCT_GROUP_UUID;
+    const anchorGroup =
+      isProductScoped && !isLegacyFlatSelection ? selectedGroup : null;
 
     const requestDetails: {
       purposes: UpdatePurpose[];

package/src/RedactoPrivacyCenter/components/ModifyConsentModal.tsx

@@ -32,7 +32,7 @@ export const ModifyConsentModal = ({
         action: 'revoke' as ConsentAction,
         buttonLabel: t('revokeConsent'),
         buttonVariant: 'danger' as const,
-        warningMessage: t('revokeConsentWarning'),
+        warningMessage: selectedRecord.revoke_warning_message || t('revokeConsentWarning'),
         description: nominatorLabel
           ? t('aboutToModifyConsentOnBehalf', { nominator: nominatorLabel })
           : t('aboutToModifyConsent'),

package/src/RedactoPrivacyCenter/components/SelectUser.tsx

@@ -11,16 +11,12 @@ import type { SelectUserProps } from '../lib/types';
  * (.pc-select-user*).
  */
 export const SelectUser = ({
-  email,
   candidates,
   onSelect,
   busyOrgUserId,
   error,
 }: SelectUserProps) => {
   const { t } = useTranslation();
-  const subtitle = email
-    ? t('emailLinkedToMultipleProfiles', { email })
-    : t('contactLinkedToMultipleProfiles');
 
   // A candidate with no uuid can't be selected (it's the value we submit),
   // so drop it rather than render an unclickable row.
@@ -31,17 +27,33 @@ export const SelectUser = ({
       <div className="pc-select-user__header">
         <PCTitle as="h2">{t('chooseYourProfile')}</PCTitle>
         <PCText as="p" size="base" color="secondary" align="center">
-          {subtitle}
+          {t('loginIdentifierLinkedToMultipleProfiles')}
         </PCText>
       </div>
 
       <div className="pc-select-user__list">
         {selectable.map((candidate) => {
           const principalUuid = candidate.uuid || '';
-          const primaryLabel =
-            candidate.primary_email || candidate.primary_mobile || candidate.uuid;
-          const secondaryLabel =
-            candidate.primary_mobile || candidate.primary_email || '';
+          const email = candidate.primary_email || '';
+          const mobile = candidate.primary_mobile || '';
+          const orgUserId = candidate.org_user_id || '';
+          // org_user_id is unique per principal (ledger-enforced within the
+          // org/workspace), so it leads the row as the reliable way to tell
+          // shared-contact profiles apart when the email/mobile are identical.
+          // Fall back to a contact when a principal has no org_user_id, so the
+          // row still shows something identifiable.
+          const primaryLabel = orgUserId
+            ? t('userIdLabel', { id: orgUserId })
+            : email || mobile || candidate.uuid;
+          // Email and mobile drop below the id. Skip any value that already
+          // surfaced as the primary label (the fallback case) or duplicates the
+          // other contact, so we never echo the same value twice.
+          const secondaryLabels = [email, mobile].filter(
+            (value, index, all) =>
+              value !== '' &&
+              value !== primaryLabel &&
+              all.indexOf(value) === index
+          );
           const isBusy = busyOrgUserId === principalUuid;
           return (
             <button
@@ -55,11 +67,11 @@ export const SelectUser = ({
                 <span className="pc-select-user__item-primary">
                   {primaryLabel}
                 </span>
-                {secondaryLabel ? (
-                  <span className="pc-select-user__item-secondary">
-                    {secondaryLabel}
+                {secondaryLabels.map((label) => (
+                  <span key={label} className="pc-select-user__item-secondary">
+                    {label}
                   </span>
-                ) : null}
+                ))}
               </span>
               {isBusy ? (
                 <span className="pc-select-user__item-status">

package/src/RedactoPrivacyCenter/components/SelectUserGate.tsx

@@ -12,6 +12,7 @@ import { useAuth } from '../context/AuthContext';
 import { ProfileSwitchProvider } from '../context/ProfileSwitchContext';
 import { PCLoader } from '../ui';
 import { decodeJwtToken } from '../lib/utils';
+import { isSandboxMode } from '../lib/sandbox';
 import type {
   GatePhase,
   IdentityCandidate,
@@ -54,6 +55,13 @@ export const SelectUserGate = ({ children }: SelectUserGateProps) => {
   useEffect(() => {
     let cancelled = false;
 
+    // Sandbox PoC: there is no JWT and no shared-contact concept — the subject is
+    // fixed by props. Skip the identity lookup and render children directly.
+    if (isSandboxMode()) {
+      setPhase('resolved');
+      return;
+    }
+
     if (!organizationId || !workspaceId || !accessToken) {
       setPhase('resolved');
       return;
@@ -171,14 +179,8 @@ export const SelectUserGate = ({ children }: SelectUserGateProps) => {
       </div>
     );
   } else if (phase === 'picking') {
-    const decoded = decodeJwtToken(accessToken);
-    const email =
-      (decoded?.user_data?.primary_email as string) ||
-      (decoded?.primary_email as string) ||
-      null;
     inner = (
       <SelectUser
-        email={email}
         candidates={candidates}
         onSelect={handleSelect}
         busyOrgUserId={busyOrgUserId}

package/src/RedactoPrivacyCenter/components/constant.ts

@@ -47,6 +47,6 @@ export const ACTIVITY_FETCH_ERROR_MESSAGE = 'Failed to fetch activity data';
 export const PICKED_ORG_USER_KEY = 'pc_picked_org_user_id';
 
 // The shared-contact picker/switch user-facing strings are localized via i18n —
-// see the chooseYourProfile / emailLinkedToMultipleProfiles /
-// contactLinkedToMultipleProfiles / signingInEllipsis / couldNotSwitchProfile /
-// switchProfile keys in locales/*/translation.json.
+// see the chooseYourProfile / loginIdentifierLinkedToMultipleProfiles /
+// signingInEllipsis / couldNotSwitchProfile / switchProfile keys in
+// locales/*/translation.json.

package/src/RedactoPrivacyCenter/components/groupHelpers.ts

@@ -1,17 +1,21 @@
+import { LEGACY_PRODUCT_GROUP_UUID } from '../lib/constants';
 import type {
   ConsentDataElement,
   ConsentGroup,
   DataElement,
+  FormData,
   FormProductGroup,
   Purpose,
   PurposeItem,
 } from '../lib/types';
 
 /**
- * Map a Go-ledger `ConsentGroup` (from the user-consents endpoint) onto the
- * DSAR request form's `FormProductGroup`. Approach A: the request-form product
- * picker is now sourced from the ledger instead of Python's `form/data`, since
- * consents live in the ledger after the cutover.
+ * Map a `ConsentGroup` (from the user-consents endpoint — served by the Go
+ * ledger, or by Python's `/dsar/privacy-center/user-consents` when no
+ * ledgerBaseUrl is configured) onto the DSAR request form's
+ * `FormProductGroup`. Approach A: the request-form product picker is sourced
+ * from user-consents instead of Python's `form/data`, since after the cutover
+ * `form/data` no longer emits product groups.
  *
  * The shapes are near-identical; the only adaptations are:
  * - purpose id rename: ledger `purpose_uuid` -> form `uuid` (which the picker
@@ -36,8 +40,11 @@ export const consentGroupToFormProductGroup = (
 });
 
 const purposeItemToFormPurpose = (purpose: PurposeItem): Purpose => ({
-  uuid: purpose.purpose_uuid,
-  purpose_uuid: purpose.purpose_uuid,
+  // The ledger keys purposes as `purpose_uuid`; the legacy Python
+  // user-consents payload keys some of them as `uuid`. Accept either so the
+  // picker and the submitted `purpose_uuid` resolve on both backends.
+  uuid: purpose.purpose_uuid ?? purpose.uuid ?? '',
+  purpose_uuid: purpose.purpose_uuid ?? purpose.uuid ?? '',
   name: purpose.name,
   description: purpose.description ?? '',
   industries: '',
@@ -51,6 +58,35 @@ const purposeItemToFormPurpose = (purpose: PurposeItem): Purpose => ({
   ),
 });
 
+/**
+ * Build a single synthetic product group from a backend's legacy flat
+ * `form/data.purposes` list.
+ *
+ * Used as the last fallback for the DSAR picker: pre-grouping Python
+ * deployments (and the popup / case-management contexts, which resolve an
+ * arbitrary contact that the JWT-scoped user-consents endpoint cannot serve)
+ * return purposes without any product grouping. Rendering them under one
+ * group keeps the picker usable instead of showing "No products available"
+ * while the response actually carries consents — it is the lone group, so the
+ * product-selection step is skipped and the purpose list renders directly,
+ * matching the pre-grouping UX.
+ *
+ * The group carries `LEGACY_PRODUCT_GROUP_UUID`, which the submit path uses to
+ * omit the product anchor (there is no real product to scope the case to).
+ */
+export const legacyFlatGroup = (
+  form: FormData,
+  label: string,
+): FormProductGroup => ({
+  product_uuid: LEGACY_PRODUCT_GROUP_UUID,
+  product_name: label,
+  product_description: null,
+  nominator: null,
+  purposes: (form.purposes ?? [])
+    .map((wrapper) => wrapper?.purpose)
+    .filter((purpose): purpose is Purpose => Boolean(purpose)),
+});
+
 const consentDataElementToFormDataElement = (
   element: ConsentDataElement,
 ): DataElement => ({

package/src/RedactoPrivacyCenter/context/AuthContext.tsx

@@ -1,17 +1,74 @@
-import { createContext, useContext, useState, useEffect, useCallback, useMemo, type ReactNode } from 'react';
+import { createContext, useContext, useState, useEffect, useCallback, useMemo } from 'react';
 import { setRefreshTokenCookie, decodeJwtToken, resolveContactFromJwt, setSessionExpiredListener } from '../lib/utils';
-import type { AuthContextValue } from './types';
+import { setSandboxConfig } from '../lib/sandbox';
+import type {
+  AuthContextValue,
+  AuthProviderProps,
+  SeedSessionStorageData,
+} from './types';
 
 export type { AuthContextValue } from './types';
 
 const AuthContext = createContext<AuthContextValue | null>(null);
 
-interface AuthProviderProps {
-  children: ReactNode;
-  accessToken: string;
-  refreshToken: string;
-  onError: (error: Error) => boolean;
-}
+/**
+ * Raw sessionStorage writer for the five keys the Privacy Center reads
+ * (access_token / pc_org_id / pc_workspace_id / pc_org_slug / email). Single
+ * source of truth for those key names so the JWT and sandbox seeding paths can
+ * never drift. Each key is written only when its value is a non-empty string;
+ * `accessToken` is optional because the JWT path stores it separately. The
+ * `contact` value goes under the `email` key even when it is a mobile number
+ * (matching resolveContactFromJwt, which also stores mobile/org_user_id
+ * subjects there). No-ops when `window` is unavailable (SSR).
+ */
+const seedSessionStorage = (data: SeedSessionStorageData): void => {
+  if (typeof window === 'undefined') {
+    return;
+  }
+  if (data.accessToken) sessionStorage.setItem('access_token', data.accessToken);
+  if (data.orgId) sessionStorage.setItem('pc_org_id', data.orgId);
+  if (data.workspaceId) sessionStorage.setItem('pc_workspace_id', data.workspaceId);
+  if (data.slug) sessionStorage.setItem('pc_org_slug', data.slug);
+  if (data.contact) sessionStorage.setItem('email', data.contact);
+};
+
+/**
+ * Seed the sessionStorage keys the Privacy Center reads (org/workspace/slug/
+ * email/access_token) from the sandbox props and register the module-level
+ * sandbox config, so the fetch + auth layers switch to sandbox headers and skip
+ * token refresh. Returns true when sandbox mode was configured.
+ */
+const configureSandbox = (props: AuthProviderProps): boolean => {
+  const token = props.token?.trim();
+  if (!token) {
+    setSandboxConfig(null);
+    return false;
+  }
+
+  const organisationUuid = props.organisationUuid?.trim() ?? '';
+  const workspaceUuid = props.workspaceUuid?.trim() ?? '';
+  const ucic = props.sandboxUcic?.trim() ?? '';
+  const subject = props.sandboxSubject?.trim() ?? '';
+  const slug = props.slug?.trim() ?? '';
+
+  setSandboxConfig({
+    token,
+    ucic: ucic || undefined,
+    subject,
+    organisationUuid,
+    workspaceUuid,
+    slug,
+  });
+
+  seedSessionStorage({
+    accessToken: token,
+    orgId: organisationUuid,
+    workspaceId: workspaceUuid,
+    slug,
+    contact: ucic || subject,
+  });
+  return true;
+};
 
 /**
  * Extract and store organization/auth data from JWT token to sessionStorage
@@ -31,55 +88,68 @@ const syncJwtDataToSessionStorage = (accessToken: string): void => {
   const contact = resolveContactFromJwt(decoded)
     || sessionStorage.getItem('email')
     || (typeof localStorage !== 'undefined' ? localStorage.getItem('userEmail') : null);
-  if (contact && typeof contact === 'string') {
-    sessionStorage.setItem('email', contact);
-  }
 
-  // Extract organization UUID
-  const orgUuid = decoded.organisation_uuid;
-  if (orgUuid && typeof orgUuid === 'string') {
-    sessionStorage.setItem('pc_org_id', orgUuid);
-  }
-
-  // Extract workspace UUID
-  const workspaceUuid = decoded.workspace_uuid;
-  if (workspaceUuid && typeof workspaceUuid === 'string') {
-    sessionStorage.setItem('pc_workspace_id', workspaceUuid);
-  }
-
-  // Extract organization slug
-  const orgSlug = decoded.organisation_slug;
-  if (orgSlug && typeof orgSlug === 'string') {
-    sessionStorage.setItem('pc_org_slug', orgSlug);
-  }
+  // The access_token is stored separately by the caller (state initializer /
+  // updateTokens), so it is intentionally omitted here.
+  seedSessionStorage({
+    orgId: typeof decoded.organisation_uuid === 'string' ? decoded.organisation_uuid : undefined,
+    workspaceId: typeof decoded.workspace_uuid === 'string' ? decoded.workspace_uuid : undefined,
+    slug: typeof decoded.organisation_slug === 'string' ? decoded.organisation_slug : undefined,
+    contact: typeof contact === 'string' ? contact : undefined,
+  });
 };
 
-export const AuthProvider = ({
-  children,
-  accessToken: initialAccessToken,
-  refreshToken: initialRefreshToken,
-  onError,
-}: AuthProviderProps) => {
+export const AuthProvider = (props: AuthProviderProps) => {
+  const {
+    children,
+    accessToken: initialAccessToken,
+    refreshToken: initialRefreshToken,
+    token: sandboxToken,
+    sandboxUcic,
+    sandboxSubject,
+    organisationUuid,
+    workspaceUuid,
+    slug,
+    onError,
+  } = props;
+
+  // Sandbox PoC: configure the module singleton + seed sessionStorage BEFORE any
+  // child renders (same reason the JWT sync runs in the state initializer). This
+  // MUST run during render, not in a useEffect: child effects (which fire the
+  // first data fetch and read `sandboxAuthHeaders()` synchronously) run on commit
+  // BEFORE the parent's effects, so an effect here would configure the singleton
+  // too late. A useState lazy initializer runs once on the first render, ahead of
+  // any child, and is not re-run on subsequent parent re-renders — so it sets the
+  // config before the first fetch without the every-render side effect. When
+  // active, the JWT path below is skipped entirely.
+  const [sandboxActive] = useState(() => configureSandbox(props));
+
   // Sync to sessionStorage synchronously during initialization so child
   // components (ConsentManager, SideBarPC) find the data when they mount.
   // useEffect runs AFTER children render — too late for components that
   // read sessionStorage during their render phase.
   const [accessToken, setAccessToken] = useState(() => {
+    if (sandboxActive) {
+      return sandboxToken ?? '';
+    }
     if (initialAccessToken && typeof initialAccessToken === 'string' && initialAccessToken.trim() !== '') {
       if (typeof window !== 'undefined') {
         sessionStorage.setItem('access_token', initialAccessToken);
         syncJwtDataToSessionStorage(initialAccessToken);
       }
     }
-    return initialAccessToken;
+    return initialAccessToken ?? '';
   });
   const [refreshToken, setRefreshToken] = useState(() => {
+    if (sandboxActive) {
+      return '';
+    }
     if (initialRefreshToken && typeof initialRefreshToken === 'string' && initialRefreshToken.trim() !== '') {
       if (typeof window !== 'undefined') {
         setRefreshTokenCookie(initialRefreshToken);
       }
     }
-    return initialRefreshToken;
+    return initialRefreshToken ?? '';
   });
 
   // Terminal "session expired" flag. Set by utils' refresh routines (via the
@@ -97,8 +167,12 @@ export const AuthProvider = ({
     return () => setSessionExpiredListener(null);
   }, [markSessionExpired]);
 
-  // Re-sync when props change (for token refresh scenarios)
+  // Re-sync when props change (for token refresh scenarios). Sandbox mode has no
+  // JWT and no refresh, so these are no-ops there.
   useEffect(() => {
+    if (sandboxActive) {
+      return;
+    }
     if (initialAccessToken && typeof initialAccessToken === 'string' && initialAccessToken.trim() !== '') {
       setAccessToken(initialAccessToken);
       if (typeof window !== 'undefined') {
@@ -106,9 +180,12 @@ export const AuthProvider = ({
         syncJwtDataToSessionStorage(initialAccessToken);
       }
     }
-  }, [initialAccessToken]);
+  }, [initialAccessToken, sandboxActive]);
 
   useEffect(() => {
+    if (sandboxActive) {
+      return;
+    }
     if (initialRefreshToken && typeof initialRefreshToken === 'string' && initialRefreshToken.trim() !== '') {
       setRefreshToken(initialRefreshToken);
       // A fresh refresh token means the user re-authenticated — clear the
@@ -118,7 +195,22 @@ export const AuthProvider = ({
         setRefreshTokenCookie(initialRefreshToken);
       }
     }
-  }, [initialRefreshToken]);
+  }, [initialRefreshToken, sandboxActive]);
+
+  // Sandbox PoC: re-configure the module singleton when the sandbox inputs
+  // change after mount (the lazy initializer above only runs once, on first
+  // render — this mirrors the JWT re-sync effects for prop changes). Clears the
+  // singleton on unmount so a later JWT-mode mount never inherits a stale sandbox
+  // config. First-fetch ordering is unaffected: the initializer already set the
+  // config before any child effect ran.
+  useEffect(() => {
+    if (!sandboxActive) {
+      return;
+    }
+    configureSandbox(props);
+    return () => setSandboxConfig(null);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [sandboxActive, sandboxToken, sandboxUcic, sandboxSubject, organisationUuid, workspaceUuid, slug]);
 
   // Internal method to update tokens after refresh
   const updateTokens = useCallback((newAccessToken: string, newRefreshToken?: string) => {

package/src/RedactoPrivacyCenter/context/types.ts

@@ -1,5 +1,43 @@
+import type { ReactNode } from 'react';
 import type { createConsentClient } from '../api/client';
 
+export type AuthProviderProps = Readonly<{
+  children: ReactNode;
+  accessToken?: string;
+  refreshToken?: string;
+  /**
+   * Sandbox PoC: when set, the Privacy Center skips the JWT entirely — it seeds
+   * org/workspace/subject from the props below, sends the single
+   * `X-Consent-Token` header, carries the acting identity in each request's own
+   * payload, and never calls `/otp/refresh`.
+   */
+  token?: string;
+  /** Sandbox UCIC — the client's own user id (`org_user_id`); takes precedence over the subject. */
+  sandboxUcic?: string;
+  /** Sandbox subject (email or mobile) — carried in the request payload. */
+  sandboxSubject?: string;
+  /** Sandbox org UUID (replaces the JWT-decoded org). */
+  organisationUuid?: string;
+  /** Sandbox workspace UUID (replaces the JWT-decoded workspace). */
+  workspaceUuid?: string;
+  /** Organisation slug — used to seed sandbox sessionStorage. */
+  slug?: string;
+  onError: (error: Error) => boolean;
+}>;
+
+/**
+ * The five-key sessionStorage payload the Privacy Center seeds (access_token /
+ * pc_org_id / pc_workspace_id / pc_org_slug / email). `contact` lands under the
+ * `email` key even when it is a mobile/UCIC subject.
+ */
+export type SeedSessionStorageData = {
+  accessToken?: string;
+  orgId?: string;
+  workspaceId?: string;
+  slug?: string;
+  contact?: string;
+};
+
 export type AuthContextValue = Readonly<{
   accessToken: string;
   refreshToken: string;