Rights Center — Web

The <RightCenter /> component (part of the @truconsent/consent-notice npm package) provides a pre-built UI for DPDPA data subject rights — letting users access, correct, or delete their personal data, withdraw consent, manage nominees, and file grievances.

Install

npm install @truconsent/consent-notice

Import the component and required styles:

import { RightCenter } from '@truconsent/consent-notice';
import '@truconsent/consent-notice/dist/consent-modal.css';

Basic usage

import React from 'react';
import { RightCenter } from '@truconsent/consent-notice';
import '@truconsent/consent-notice/dist/consent-modal.css';

export default function PrivacyPage() {
  return (
    <RightCenter
      userId="user-uuid"
      apiKey={import.meta.env.VITE_TRU_CONSENT_API_KEY}
      organizationId={import.meta.env.VITE_TRU_CONSENT_ORGANIZATION_ID}
      apiUrl={import.meta.env.VITE_TRU_CONSENT_API_URL}
      assetId={import.meta.env.VITE_TRU_CONSENT_ASSET_ID}
    />
  );
}

Resolve the user ID

Pass the authenticated user ID when the user is logged in. For unauthenticated visitors, generate and persist a stable guest UUID:

import { v4 as uuidv4 } from 'uuid';

function getOrCreateGuestId() {
  let id = localStorage.getItem('guest_id');
  if (!id) {
    id = uuidv4();
    localStorage.setItem('guest_id', id);
  }
  return id;
}

// In your component
const userId = currentUser?.id ?? getOrCreateGuestId();

Component props

* Required

Prop	Type	Description
`userId` *	string	Authenticated user ID. Must match the ID used when consent was recorded.
`apiKey` *	string	Consent-scope API key from the platform dashboard.
`organizationId` *	string	Your org ID — sent on every request as `X-Org-Id`.
`apiUrl` *	string	SDK base URL: `https://trukit-dev.truconsent.io`
`assetId` *	string	Asset UUID from the platform dashboard.
`settings`	object	Override default UI settings (colors, section visibility). See below.

Customise appearance

Pass a settings object to override colors, section titles, and which sections are shown:

<RightCenter
  userId={userId}
  apiKey={apiKey}
  organizationId={orgId}
  apiUrl={apiUrl}
  assetId={assetId}
  settings={{
    background_color: '#ffffff',
    primary_text_color: '#111827',
    button_color: '#6366f1',
    button_text_color: '#ffffff',
    show_dpo_section: true,
    show_transparency_section: false,
    grievance_mode: 'truconsent',   // or 'external'
    grievance_external_url: '',
  }}
/>

DPDPA rights surfaced

Right	DPDPA reference
Access personal data	Section 11
Correction and erasure	Section 12
Grievance redressal	Section 13
Withdraw consent	Section 6
Nominate a representative	Section 14

Next: Rights Center — npm package →