@redacto.io/consent-sdk-react 5.0.0 → 5.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +6 -0
- package/README.md +98 -1
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
package/README.md
CHANGED
|
@@ -6,6 +6,17 @@ A comprehensive consent management SDK that provides seamless integration with R
|
|
|
6
6
|
|
|
7
7
|
The Redacto Consent SDK enables developers to easily integrate consent management functionality into their React applications. It provides a consistent user experience for collecting and managing user consent while maintaining compliance with privacy regulations.
|
|
8
8
|
|
|
9
|
+
## Entry Points
|
|
10
|
+
|
|
11
|
+
The package ships two import paths so consumers only pull in what they need:
|
|
12
|
+
|
|
13
|
+
| Import path | What you get |
|
|
14
|
+
| ------------------------------------------------- | --------------------------------------------------------------------------------------------------------- |
|
|
15
|
+
| `@redacto.io/consent-sdk-react` | Consent notice components: `RedactoNoticeConsent`, `RedactoNoticeConsentInline`, and `DigiLockerCallback` |
|
|
16
|
+
| `@redacto.io/consent-sdk-react/privacy-center` | Privacy Center: certified `RedactoPrivacyCenter`, composable pages, headless API client, hooks, contexts |
|
|
17
|
+
|
|
18
|
+
The notice entry point has minimal dependencies. The Privacy Center entry point depends on the optional peers listed under [Peer Dependencies](#peer-dependencies).
|
|
19
|
+
|
|
9
20
|
## Architecture
|
|
10
21
|
|
|
11
22
|
The SDK follows a client-server architecture pattern:
|
|
@@ -51,7 +62,7 @@ The SDK follows a client-server architecture pattern:
|
|
|
51
62
|
| Android | Native Android (Kotlin) | 🚧 | 🚧 |
|
|
52
63
|
| iOS | Native iOS (Swift) | 🚧 | 🚧 |
|
|
53
64
|
| Flutter | Flutter applications | 🚧 | 🚧 |
|
|
54
|
-
| React Native | React Native applications |
|
|
65
|
+
| React Native | React Native applications | ✅ | 🚧 |
|
|
55
66
|
|
|
56
67
|
## Features
|
|
57
68
|
|
|
@@ -89,6 +100,18 @@ The SDK follows a client-server architecture pattern:
|
|
|
89
100
|
npm install @redacto.io/consent-sdk-react
|
|
90
101
|
```
|
|
91
102
|
|
|
103
|
+
### Peer Dependencies
|
|
104
|
+
|
|
105
|
+
The SDK declares `react` and `react-dom` (16.8+) as required peers. The Privacy Center surface (`@redacto.io/consent-sdk-react/privacy-center`) additionally depends on the following optional peers — install them only if you import from `/privacy-center`:
|
|
106
|
+
|
|
107
|
+
```bash
|
|
108
|
+
npm install @tanstack/react-query @tanstack/react-table \
|
|
109
|
+
i18next i18next-browser-languagedetector react-i18next \
|
|
110
|
+
lucide-react react-icons dayjs lodash
|
|
111
|
+
```
|
|
112
|
+
|
|
113
|
+
If you only use `RedactoNoticeConsent` or `RedactoNoticeConsentInline`, these peers are not needed.
|
|
114
|
+
|
|
92
115
|
### Backend Server Setup
|
|
93
116
|
|
|
94
117
|
Before using the SDK components, you need to set up backend server endpoints that generate access tokens by calling Redacto's API. Your server should implement the following endpoints:
|
|
@@ -627,6 +650,80 @@ const customSettings = {
|
|
|
627
650
|
| **UI Blocking** | Yes (by default) | No (inline) |
|
|
628
651
|
| **Props Required** | `noticeId`, `accessToken`, `refreshToken` | `org_uuid`, `workspace_uuid`, `notice_uuid` |
|
|
629
652
|
|
|
653
|
+
## Privacy Center
|
|
654
|
+
|
|
655
|
+
The Privacy Center is a separate entry point (`@redacto.io/consent-sdk-react/privacy-center`) that lets end-users review and manage the consent they've given, see request activity, and file Data Subject Rights (DSR) cases. It ships in three layers — a certified UI, composable building blocks, and a headless core — so you can drop in the full screen or compose your own.
|
|
656
|
+
|
|
657
|
+
### Certified UI
|
|
658
|
+
|
|
659
|
+
`RedactoPrivacyCenter` renders the full Privacy Center experience (consent manager, form, activity, case details) with a built-in layout, navigation, auth, and i18n.
|
|
660
|
+
|
|
661
|
+
```tsx
|
|
662
|
+
import { RedactoPrivacyCenter } from "@redacto.io/consent-sdk-react/privacy-center";
|
|
663
|
+
|
|
664
|
+
<RedactoPrivacyCenter
|
|
665
|
+
baseUrl={BASE_URL}
|
|
666
|
+
slug="acme-co"
|
|
667
|
+
accessToken={accessToken}
|
|
668
|
+
refreshToken={refreshToken}
|
|
669
|
+
theme="light"
|
|
670
|
+
initialPage="consent-manager"
|
|
671
|
+
onError={(error) => {
|
|
672
|
+
console.error(error);
|
|
673
|
+
return false; // return true if you've handled it
|
|
674
|
+
}}
|
|
675
|
+
/>;
|
|
676
|
+
```
|
|
677
|
+
|
|
678
|
+
**Props:**
|
|
679
|
+
|
|
680
|
+
| Prop | Type | Required | Default | Description |
|
|
681
|
+
| -------------- | -------------------------------------------------------------------------------------------------------------------------- | -------- | -------------------- | -------------------------------------------------------- |
|
|
682
|
+
| `baseUrl` | `string` | Yes | - | Consent server base URL |
|
|
683
|
+
| `slug` | `string` | Yes | - | Workspace slug |
|
|
684
|
+
| `accessToken` | `string` | Yes | - | JWT access token |
|
|
685
|
+
| `refreshToken` | `string` | Yes | - | JWT refresh token |
|
|
686
|
+
| `onError` | `(error: Error) => boolean` | Yes | - | Error handler; return `true` if handled |
|
|
687
|
+
| `theme` | `"light" \| "dark"` | No | `"light"` | Theme variant |
|
|
688
|
+
| `initialPage` | `"consent-manager" \| "form" \| "activity" \| "case-details"` | No | `"consent-manager"` | Page to render first |
|
|
689
|
+
| `onBack` | `"back" \| "signout"` | No | - | Behaviour of the navbar back/signout control |
|
|
690
|
+
|
|
691
|
+
### Composable Pages and Layout
|
|
692
|
+
|
|
693
|
+
If you want to compose your own shell (e.g. embed the Privacy Center inside an existing app chrome), import the page-level building blocks instead of the certified component:
|
|
694
|
+
|
|
695
|
+
| Export | Purpose |
|
|
696
|
+
| ----------------------------------- | ------------------------------------------------------------------------ |
|
|
697
|
+
| `PrivacyCenterLayout` | Outer chrome (navbar, sidebar, footer, theme) |
|
|
698
|
+
| `PrivacyCenterHomePage` | Default home that switches between the pages below |
|
|
699
|
+
| `PrivacyCenterConsentManagerPage` | "Manage Consents" view |
|
|
700
|
+
| `PrivacyCenterFormPage` | DSR / grievance form |
|
|
701
|
+
| `PrivacyCenterActivityPage` | List of past requests |
|
|
702
|
+
| `PrivacyCenterCaseDetailsPage` | Case detail / messaging view |
|
|
703
|
+
|
|
704
|
+
These rely on the same context providers (`AuthProvider`, `BaseUrlProvider`, `NavigationProvider`) — wrap them yourself if you compose the pages directly.
|
|
705
|
+
|
|
706
|
+
### Headless Core
|
|
707
|
+
|
|
708
|
+
For consumers who want their own UI, the headless core exposes the API client, orchestration helpers, hooks, and auth utilities:
|
|
709
|
+
|
|
710
|
+
- **API client**: `createConsentClient` (returns a typed `BaseRequest`-aware fetcher)
|
|
711
|
+
- **Orchestration helpers** (handle auth retry / token refresh internally): `getFormData`, `createCaseRequest`, `fetchProducts`, `fetchUserConsents`, `manageConsent`, `fetchActivities`, `fetchCaseHistory`, `createOtp`, `verifyOtp`, `exchangeToken`
|
|
712
|
+
- **Auth utilities**: `decodeJwtToken`, `isJwtExpired`, `ensureValidToken`, `signOutPrivacyCenter`, `getCookieValue`, `setRefreshTokenCookie`, `checkAndRefreshAuth`, `compareEmails`, `isUserAuthenticated`, `getInitialState`, `getActivityTypeStatus`, `formatActivityType`
|
|
713
|
+
- **React Query hook**: `useCaseHistory`
|
|
714
|
+
- **Context providers**: `AuthProvider` + `useAuth`, `BaseUrlProvider` + `useBaseUrl`, `NavigationProvider` + `useInternalNavigation`
|
|
715
|
+
- **Types**: `Workspace`, `OrganizationDetail`, `DataElement`, `Purpose`, `UserConsent`, `Activity`, `CaseHistoryDetail`, `RequestTypeEnum`, `GrievanceTypeEnum`, `ConsentStatusEnum`, and more (see `privacy-center.ts` for the full export list)
|
|
716
|
+
|
|
717
|
+
### Style Injection
|
|
718
|
+
|
|
719
|
+
The Privacy Center stylesheet is injected automatically when you mount `RedactoPrivacyCenter`. If you compose the headless pages yourself, call `injectPCStyles()` once at app startup:
|
|
720
|
+
|
|
721
|
+
```ts
|
|
722
|
+
import { injectPCStyles } from "@redacto.io/consent-sdk-react/privacy-center";
|
|
723
|
+
|
|
724
|
+
injectPCStyles();
|
|
725
|
+
```
|
|
726
|
+
|
|
630
727
|
## Best Practices
|
|
631
728
|
|
|
632
729
|
1. **Backend Token Generation**: Always generate tokens on your backend server, never expose API keys or authentication tokens to the frontend
|