npm package: @redacto.io/privacy-center-sdk
Description: Standalone Privacy Center SDK for Redacto
Latest version: 3.7.0

# @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

```bash
# 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:

```bash
npm install react
```

See the [Peer Dependencies](#peer-dependencies) section for specific version requirements.

## Quick Start

```tsx
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

```tsx
<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

```bash
# 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.