# Frontend SDKs

The Redacto Consent SDK enables developers to easily integrate consent management functionality into their applications. This guide covers the React SDK, with other platforms coming soon.

## Supported Platforms

| Platform                | Status      | Package                         |
| ----------------------- | ----------- | ------------------------------- |
| React / Next.js         | Available   | `@redacto.io/consent-sdk-react` |
| JavaScript (Iframe/PHP) | Coming Soon | -                               |
| Android (Kotlin)        | Coming Soon | -                               |
| iOS (Swift)             | Coming Soon | -                               |
| Flutter                 | Coming Soon | -                               |
| React Native            | Coming Soon | -                               |

## Architecture

The SDK follows a client-server architecture pattern:

```
┌─────────────┐         ┌──────────────┐         ┌─────────────────┐
│   Client    │────────▶│ Your Backend │────────▶│  Redacto API    │
│  (React)    │◀────────│    Server    │◀────────│   (CMP API)     │
└─────────────┘         └──────────────┘         └─────────────────┘
     │                        │
     │                        │
     ▼                        ▼
┌─────────────────────────────────────────────┐
│     @redacto.io/consent-sdk-react           │
│  (RedactoNoticeConsent /                    │
│   RedactoNoticeConsentInline)               │
└─────────────────────────────────────────────┘
```

**How It Works:**

1. **Your Backend Server** acts as a proxy between your React application and Redacto's API, handling token generation and refresh
2. **Your React Application** uses SDK components to display consent notices and collect user choices
3. **SDK Components** fetch consent content, render UI, and submit consent records

## Installation

```bash
npm install @redacto.io/consent-sdk-react
```

**Requirements:**

* React 16.8.0 or higher (including React 17, 18, and 19)
* React DOM 16.8.0 or higher (including React DOM 17, 18, and 19)

## Components

### RedactoNoticeConsent

A modal popup component for consent collection. Displays a full-screen modal with consent options that blocks UI interaction until the user responds.

**Best for:** Initial consent collection, standalone consent flows

**Key Characteristics:**

* Requires tokens upfront (must be provided before rendering)
* Displays as a modal overlay
* Blocks UI interaction by default

**Props:**

| Prop              | Type                     | Required | Default | Description                       |
| ----------------- | ------------------------ | -------- | ------- | --------------------------------- |
| `noticeId`        | `string`                 | Yes      | -       | UUID of the consent notice        |
| `accessToken`     | `string`                 | Yes      | -       | JWT authentication token          |
| `refreshToken`    | `string`                 | Yes      | -       | Token for renewal                 |
| `baseUrl`         | `string`                 | No       | -       | Base URL for the consent API      |
| `blockUI`         | `boolean`                | No       | `true`  | Whether to block UI interaction   |
| `language`        | `string`                 | No       | `"en"`  | Language code                     |
| `settings`        | `object`                 | No       | -       | Custom styling options            |
| `applicationId`   | `string`                 | No       | -       | Application-specific UUID         |
| `validateAgainst` | `"all" \| "required"`    | No       | `"all"` | Consent validation mode           |
| `onAccept`        | `() => void`             | Yes      | -       | Callback when consent is accepted |
| `onDecline`       | `() => void`             | Yes      | -       | Callback when consent is declined |
| `onError`         | `(error: Error) => void` | No       | -       | Error handler callback            |

**validateAgainst Parameter:**

* `"all"` (default): Validates all purposes and data elements. Responses are cached for performance.
* `"required"`: Only validates required purposes. Responses bypass cache for fresh validation. Use for reconsent flows.

**Usage Example:**

```tsx
import { RedactoNoticeConsent } from "@redacto.io/consent-sdk-react";

function ConsentModal() {
  return (
    <RedactoNoticeConsent
      noticeId={NOTICE_UUID}
      accessToken={tokens.accessToken}
      refreshToken={tokens.refreshToken}
      baseUrl={BASE_URL}
      blockUI={true}
      language="en"
      validateAgainst="all"
      onAccept={() => console.log("Consent accepted")}
      onDecline={() => console.log("Consent declined")}
      onError={(error) => console.error("Error:", error)}
    />
  );
}
```

### RedactoNoticeConsentInline

An inline component for embedding consent directly in forms. Can load and display consent content without tokens, then auto-submits when tokens are provided.

**Best for:** Registration forms, checkout flows, multi-step processes

**Key Characteristics:**

* Can load content without tokens (tokens optional initially)
* Renders inline within your form
* Auto-submits consent when all conditions are met

**Display Requirements (to show the component):**

* `org_uuid` - Your organization UUID
* `workspace_uuid` - Your workspace UUID
* `notice_uuid` - The consent notice UUID

**Submit Requirements (to submit consent):**

1. `accessToken` must be provided
2. Consent content must be loaded
3. All required data elements must be checked

**Props:**

| Prop                 | Type                         | Required | Default | Description                            |
| -------------------- | ---------------------------- | -------- | ------- | -------------------------------------- |
| `org_uuid`           | `string`                     | Yes      | -       | Organization UUID                      |
| `workspace_uuid`     | `string`                     | Yes      | -       | Workspace UUID                         |
| `notice_uuid`        | `string`                     | Yes      | -       | Notice UUID                            |
| `accessToken`        | `string`                     | No       | -       | Authentication token                   |
| `refreshToken`       | `string`                     | No       | -       | Refresh token                          |
| `baseUrl`            | `string`                     | No       | -       | Base URL for the consent API           |
| `language`           | `string`                     | No       | `"en"`  | Language code                          |
| `settings`           | `object`                     | No       | -       | Custom styling options                 |
| `applicationId`      | `string`                     | No       | -       | Application-specific UUID              |
| `onAccept`           | `() => void`                 | No       | -       | Callback when consent is accepted      |
| `onDecline`          | `() => void`                 | No       | -       | Callback when consent is declined      |
| `onError`            | `(error: Error) => void`     | No       | -       | Error handler callback                 |
| `onValidationChange` | `(isValid: boolean) => void` | No       | -       | Callback when validation state changes |

**Usage Example:**

```tsx
import { RedactoNoticeConsentInline } from "@redacto.io/consent-sdk-react";

function RegistrationForm() {
  const [accessToken, setAccessToken] = useState();
  const [refreshToken, setRefreshToken] = useState();
  const [consentValid, setConsentValid] = useState(false);

  return (
    <form onSubmit={handleSubmit}>
      <input type="email" placeholder="Email" />

      <RedactoNoticeConsentInline
        org_uuid={ORG_UUID}
        workspace_uuid={WORKSPACE_UUID}
        notice_uuid={NOTICE_UUID}
        accessToken={accessToken}
				refreshToken={refreshToken}
        baseUrl={BASE_URL}
        onValidationChange={setConsentValid}
        onAccept={() => console.log("Consent submitted")}
        onError={(error) => console.error("Error:", error)}
      />

      <button type="submit" disabled={!consentValid}>
        Register
      </button>
    </form>
  );
}
```

## Component Comparison

| Feature                 | RedactoNoticeConsent              | RedactoNoticeConsentInline              |
| ----------------------- | --------------------------------- | --------------------------------------- |
| **Display Type**        | Modal popup overlay               | Inline form component                   |
| **Token Requirement**   | Required upfront                  | Optional (can load without)             |
| **Use Case**            | Initial consent, standalone flows | Embedded in forms, multi-step processes |
| **Auto-Submit**         | No (user clicks accept/decline)   | Yes (when token provided + validated)   |
| **Validation Callback** | No                                | Yes (`onValidationChange`)              |
| **UI Blocking**         | Yes (by default)                  | No (inline)                             |

## Custom Styling

Both components support extensive styling customization through the `settings` prop:

```tsx
const customSettings = {
  button: {
    accept: {
      backgroundColor: "#9810fa",
      textColor: "white",
    },
    decline: {
      backgroundColor: "#0a0a14",
      textColor: "white",
    },
    language: {
      backgroundColor: "#0a0a14",
      textColor: "white",
      selectedBackgroundColor: "#9810fa",
      selectedTextColor: "white",
    },
  },
  borderRadius: "8px",
  backgroundColor: "#1a1a2e",
  headingColor: "#ffffff",
  textColor: "#e6e6e6",
  borderColor: "white",
  link: "#9810fa",
  font: "Arial, sans-serif",
};

<RedactoNoticeConsent
  // ... other props
  settings={customSettings}
/>
```

**Available Style Properties:**

| Property          | Description                        |
| ----------------- | ---------------------------------- |
| `backgroundColor` | Background color of the modal/form |
| `headingColor`    | Color for headings                 |
| `textColor`       | Color for body text                |
| `borderColor`     | Color for borders                  |
| `borderRadius`    | Border radius for rounded corners  |
| `link`            | Color for links                    |
| `font`            | Font family (optional)             |
| `button.accept`   | Styles for accept button           |
| `button.decline`  | Styles for decline button          |
| `button.language` | Styles for language selector       |

## Localization

The SDK supports 20+ languages with a focus on Indian regional languages.

### Supported Languages

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

### Setting Language

Specify the language using the `language` prop:

```tsx
<RedactoNoticeConsent
  // ... other props
  language="hi"  // Display in Hindi
/>
```

The SDK will:

1. Fetch translated consent content for the specified language
2. Display all UI text in that language
3. Show a language selector for users to switch languages (if configured in your notice)

## Audio / Text-to-Speech

The SDK includes text-to-speech support for accessibility, allowing users to listen to consent notice content.

### Supported Languages for Audio

Audio is available for a subset of languages:

| Code | Language  |
| ---- | --------- |
| `en` | English   |
| `hi` | Hindi     |
| `bn` | Bengali   |
| `te` | Telugu    |
| `mr` | Marathi   |
| `ta` | Tamil     |
| `ur` | Urdu      |
| `gu` | Gujarati  |
| `kn` | Kannada   |
| `ml` | Malayalam |
| `pa` | Punjabi   |

### How It Works

1. Audio is automatically generated when consent notices are created/translated
2. Users see an audio playback control in the consent notice
3. Clicking play reads out the consent notice content
4. Audio is pre-generated and cached for fast playback

> **Note:** Audio generation is handled server-side. No additional configuration is needed in the SDK.

## Additional Features

* **TypeScript support** with full type definitions
* **ESM and CommonJS** module formats
* **Accessibility features** (ARIA labels, keyboard navigation)
* **Age verification** and guardian consent for minors
* **Reconsent flow** support