@redacto.io/privacy-center-sdk

A standalone Privacy Center SDK for Redacto that provides a comprehensive React component library for building privacy centers with consent management, data request forms, and activity tracking.

Overview

The Redacto Privacy Center SDK enables developers to easily integrate a complete privacy center into their React applications. It provides users with a self-service portal to manage their consents, submit data subject access requests (DSAR), and track their privacy-related activities while maintaining compliance with privacy regulations like GDPR, CCPA, and others.

Features

• Consent Manager: View, search, filter, and revoke user consents with a comprehensive table interface
• Data Request Forms: Submit DSAR requests including:
  • Access requests
  • Data correction requests
  • Data erasure requests
  • Grievance/complaint submissions
• Activity History: Track privacy center activities and events with detailed timestamps
• Case Management: View and manage data request cases with status tracking
• Multi-language Support: 20+ languages including Indian regional languages with automatic language detection
• Theme Support: Light and dark mode with customizable themes
• Authentication: JWT-based authentication with automatic token refresh and JWT data auto-extraction
• Session-Based Storage: All user data (tokens, preferences, organization info) is stored in sessionStorage for improved security — data is scoped to the browser tab and cleared when the tab is closed
• Responsive Design: Mobile-first responsive design that works across all devices

Installation

# Using npm
npm install @redacto.io/privacy-center-sdk

# Using pnpm
pnpm add @redacto.io/privacy-center-sdk

# Using yarn
yarn add @redacto.io/privacy-center-sdk

Peer Dependencies

This package requires React to be installed in your project:

npm install react

See the Peer Dependencies section for specific version requirements.

Quick Start

import { RedactoPrivacyCenter } from "@redacto.io/privacy-center-sdk";

function App() {
  const handleError = (error: Error): boolean => {
    console.error("Privacy Center Error:", error);
    // Return true to allow default error handling (signout/redirect)
    // Return false to prevent default handling and let parent handle it
    return true;
  };

  return (
    <RedactoPrivacyCenter
      baseUrl="https://api.redacto.io"
      slug="your-organization-slug"
      theme="light"
      accessToken="your-access-token"
      refreshToken="your-refresh-token"
      onError={handleError}
    />
  );
}

API Reference

RedactoPrivacyCenter

The main component that renders the complete privacy center interface.

Props

| Prop | Type | Required | Default | Description | | -------------- | ------------------------------------------- | -------- | ------------------- | -------------------------------------------------------------------------------------------------------- | | baseUrl | string | Yes | - | Consent server base URL (e.g., https://api.redacto.io) | | slug | string | Yes | - | Organization slug identifier | | theme | 'light' \| 'dark' | No | 'light' | Theme mode for the privacy center | | accessToken | string | Yes | - | JWT access token for API authentication | | refreshToken | string | Yes | - | JWT refresh token for token renewal | | onError | (error: Error) => boolean | Yes | - | Error handler callback. Return true to allow default error handling, false to handle errors manually | | initialPage | 'consent-manager' \| 'form' \| 'activity' | No | 'consent-manager' | Initial page to display when the component mounts | | onBack | 'back' \| 'signout' | No | - | Behavior for the back button. 'back' navigates to previous page, 'signout' signs out the user |

Example

<RedactoPrivacyCenter
  baseUrl={process.env.REACT_APP_CONSENT_SERVER_URL}
  slug="acme-corp"
  theme="dark"
  accessToken={accessToken}
  refreshToken={refreshToken}
  onError={(error) => {
    console.error(error);
    // Handle error (e.g., redirect to login)
    return true;
  }}
  initialPage="consent-manager"
  onBack="signout"
/>

Exports

The SDK exports the following components and types:

Components

• RedactoPrivacyCenter - Main component that renders the complete privacy center

Types

• InternalPage - Type for internal page navigation: 'consent-manager' | 'form' | 'activity'

Supported Languages

The SDK supports 20+ languages with automatic language detection:

• English (en)
• Hindi (hi)
• Assamese (as)
• Bhojpuri (bho)
• Dogri (doi)
• Konkani (gom)
• Gujarati (gu)
• Kannada (kn)
• Maithili (mai)
• Malayalam (ml)
• Manipuri (mni-Mtei)
• Marathi (mr)
• Nepali (ne)
• Odia (or)
• Punjabi (pa)
• Sanskrit (sa)
• Sindhi (sd)
• Tamil (ta)
• Telugu (te)
• Urdu (ur)

The SDK automatically detects the user's browser language and uses the appropriate translation. Language preferences are stored in sessionStorage and persist within the browser session.

Architecture

The SDK is built with a modular architecture using React Context API for state management:

Context Providers

• AuthProvider: Manages authentication tokens (access and refresh tokens)
• BaseUrlProvider: Provides API base URL for consent server
• NavigationProvider: Handles internal navigation between pages
• OrganizationContext: Manages organization and workspace data
• LocaleContext: Handles language and locale settings

Component Hierarchy

RedactoPrivacyCenter
├── BaseUrlProvider
│   └── AuthProvider
│       └── NavigationProvider
│           └── PrivacyCenterLayout
│               └── PrivacyCenterHomePage
│                   ├── PrivacyCenterConsentManagerPage
│                   ├── PrivacyCenterFormPage
│                   └── PrivacyCenterActivityPage

Storage

The SDK uses sessionStorage exclusively for all client-side storage (authentication tokens, user contact info, organization metadata, and language preferences). This means:

• Data is scoped to the browser tab and is not shared across tabs
• Data is automatically cleared when the tab or browser is closed
• The AuthProvider auto-extracts and syncs relevant data from the JWT payload to sessionStorage on initialization and token refresh

API Client

The SDK includes a built-in API client (createConsentClient) that handles:

• JWT token authentication with Bearer tokens
• Automatic error handling and retries
• Token refresh on expiration
• Request/response transformation

Peer Dependencies

The following peer dependency is required:

| Package | Version | Description | | ------- | ------------------------------------ | ------------- | | react | ^16.8.0 \|\| ^17 \|\| ^18 \|\| ^19 | React library |

Dependencies

The SDK depends on the following packages (installed automatically as dependencies):

• @tanstack/react-query: Data fetching and caching
• @tanstack/react-table: Table component library
• i18next: Internationalization framework
• i18next-browser-languagedetector: Browser language detection for i18next
• react-i18next: React bindings for i18next
• lucide-react: Icon library
• rizzui: UI component library
• react-toastify: Toast notification library
• react-icons: Icon library
• clsx: Utility for constructing className strings
• simplebar-react: Custom scrollbar component
• nprogress: Progress bar library
• dayjs: Date manipulation library
• lodash: Utility functions
• tailwind-merge: Tailwind CSS class merging utility

Development

Building the Package

# Build the package
pnpm run build

# Build in watch mode
pnpm run dev

Project Structure

privacy-center-sdk/
├── src/
│   ├── api/              # API client and utilities
│   ├── components/        # React components
│   ├── context/           # React context providers
│   ├── lib/               # Utility functions and types
│   ├── locales/           # Translation files
│   ├── ui/                # UI components
│   └── utils/             # Helper utilities
├── locales/               # Language translation files
└── package.json

TypeScript Support

The package includes full TypeScript support with type definitions. All components and utilities are fully typed.

License

Apache-2.0

Support

For issues, questions, or contributions, please refer to the main project repository.