Managing Consent

Learn how to implement a complete consent management system with the NDPA 2023 Toolkit

View Consent Demo Consent Component Docs

Introduction

Consent is a cornerstone of data protection under the Nigeria Data Protection Act (NDPA) 2023. Organizations must obtain valid consent before collecting, processing, or sharing personal data. This guide will help you implement a comprehensive consent management system using the NDPR Toolkit.

NDPA 2023 Consent Requirements

Under the NDPA 2023, valid consent must be:

Freely given: Data subjects must have a genuine choice and control
Specific: Consent must be granular for different types of processing
Informed: Data subjects must understand what they're consenting to
Unambiguous: Consent must be given through a clear affirmative action
Withdrawable: Data subjects must be able to withdraw consent easily

The Consent Lifecycle

A complete consent management system covers the entire lifecycle of consent, from collection to withdrawal. The NDPR Toolkit provides components for each stage of this lifecycle:

Consent Collection

The first step is collecting consent from data subjects. This typically happens when users first visit your website or when they sign up for your service. The NDPR Toolkit's ConsentBanner component is designed for this purpose.

Code Example

import { ConsentBanner } from '@tantainnovative/ndpr-toolkit';

function App() {
  const consentOptions = [
    {
      id: 'necessary',
      label: 'Necessary Cookies',
      description: 'These cookies are essential for the website to function properly.',
      required: true
    },
    {
      id: 'analytics',
      label: 'Analytics Cookies',
      description: 'These cookies help us understand how visitors interact with our website.',
      required: false
    },
    {
      id: 'marketing',
      label: 'Marketing Cookies',
      description: 'These cookies are used to track visitors across websites to display relevant advertisements.',
      required: false
    }
  ];

  const handleSaveConsent = (consents) => {
    // Save consent preferences to your backend or local storage
    console.log('Consent preferences:', consents);

    // Example: Save to localStorage
    localStorage.setItem('userConsents', JSON.stringify(consents));

    // Example: Send to backend API
    fetch('/api/consents', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify(consents),
    });
  };

  return (
    <div>
      <ConsentBanner
        options={consentOptions}
        onSave={handleSaveConsent}
        position="bottom"
      />
      {/* Rest of your application */}
    </div>
  );
}

Consent Storage

Once collected, consent preferences must be securely stored and easily retrievable. The NDPR Toolkit provides utilities for storing consent in various formats, including local storage, cookies, and server-side databases.

Code Example

import { ConsentStorage } from '@tantainnovative/ndpr-toolkit';
import type { ConsentSettings } from '@tantainnovative/ndpr-toolkit';

const emptySettings: ConsentSettings = {
  consents: { necessary: true },
  timestamp: Date.now(),
  version: '1.0',
  method: 'explicit',
  hasInteracted: false,
};

// Use the ConsentStorage component with autoLoad and autoSave
function ConsentStorageExample() {
  const [settings, setSettings] = useState<ConsentSettings | null>(null);

  return (
    <ConsentStorage
      settings={settings || emptySettings}
      storageOptions={{
        storageKey: 'my-app-consent',
        storageType: 'localStorage',
      }}
      onLoad={(loaded) => {
        if (loaded) setSettings(loaded);
      }}
      onSave={(saved) => console.log('Saved:', saved)}
      autoLoad={true}
      autoSave={true}
    >
      {({ saveSettings, clearSettings, loaded }) => (
        <div>
          <p>Settings loaded: {loaded ? 'Yes' : 'No'}</p>
          <button onClick={() => saveSettings(settings!)}>Save</button>
          <button onClick={() => clearSettings()}>Clear</button>
        </div>
      )}
    </ConsentStorage>
  );
}

Consent Verification

Before processing personal data, you must verify that the user has given consent for the specific processing activity. The NDPR Toolkit provides utilities for checking consent status.

Code Example

import { useConsent } from '@tantainnovative/ndpr-toolkit';

// Define your options once, outside the component
const consentOptions = [/* ... */];

function AnalyticsComponent() {
  const { hasConsent, isLoading } = useConsent({ options: consentOptions });

  useEffect(() => {
    if (!isLoading && hasConsent('analytics')) {
      // Initialize analytics only if user has given consent
      initializeAnalytics();
    }
  }, [hasConsent, isLoading]);

  if (isLoading) {
    return <div>Loading consent preferences...</div>;
  }

  if (!hasConsent('analytics')) {
    return (
      <div>
        <p>Analytics are disabled based on your consent preferences.</p>
        <button onClick={() => openConsentManager()}>
          Update Preferences
        </button>
      </div>
    );
  }

  return <div>Analytics are enabled and tracking your usage.</div>;
}

function MarketingComponent() {
  const { hasConsent, isLoading } = useConsent({ options: consentOptions });

  // Similar implementation for marketing features
  // if (!isLoading && hasConsent('marketing')) { ... }
}

Consent Management

Data subjects must be able to view and update their consent preferences at any time. The NDPR Toolkit's ConsentManager component provides a user interface for managing consent preferences.

Code Example

import { ConsentManager } from '@tantainnovative/ndpr-toolkit';

function PrivacySettingsPage() {
  const consentOptions = [
    {
      id: 'necessary',
      label: 'Necessary Cookies',
      description: 'These cookies are essential for the website to function properly.',
      required: true
    },
    {
      id: 'analytics',
      label: 'Analytics Cookies',
      description: 'These cookies help us understand how visitors interact with our website.',
      required: false
    },
    {
      id: 'marketing',
      label: 'Marketing Cookies',
      description: 'These cookies are used to track visitors across websites to display relevant advertisements.',
      required: false
    }
  ];

  const handleSaveConsent = (consents) => {
    // Save updated consent preferences
    console.log('Updated consent preferences:', consents);

    // Example: Save to localStorage
    localStorage.setItem('userConsents', JSON.stringify(consents));

    // Example: Send to backend API
    fetch('/api/consents', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify(consents),
    });
  };

  return (
    <div>
      <h1>Privacy Settings</h1>
      <p>
        Manage your consent preferences for how we use your data.
        You can change these settings at any time.
      </p>

      <ConsentManager
        options={consentOptions}
        onSave={handleSaveConsent}
      />
    </div>
  );
}

Consent Records

For compliance purposes, you must maintain records of consent, including when and how consent was given or withdrawn. The NDPR Toolkit provides utilities for maintaining detailed consent records.

Code Example

// Consent records should be maintained server-side.
// When saving consent via the ConsentManager, also record
// the event in your backend for audit compliance.

async function recordConsentEvent(userId, consents, eventType) {
  const consentRecord = {
    userId,
    eventType, // 'given', 'updated', 'withdrawn'
    consents,
    timestamp: new Date().toISOString(),
    source: eventType === 'given' ? 'banner' : 'settings',
    userAgent: navigator.userAgent,
    version: '1.0',
  };

  await fetch('/api/consent-records', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(consentRecord),
  });
}

// Use with the ConsentManager onSave callback
<ConsentManager
  options={consentOptions}
  onSave={(settings) => {
    recordConsentEvent(userId, settings.consents, 'given');
  }}
/>

Consent Withdrawal

Data subjects must be able to withdraw their consent as easily as they gave it. The NDPR Toolkit provides components and utilities for handling consent withdrawal.

Implementation Tip

When a user withdraws consent, you must stop processing their data for the purposes they've withdrawn consent for. This may include deleting data or disabling certain features. Make sure your application architecture supports this granular control.

Complete Implementation Example

Here's a complete example of how to implement a consent management system using the NDPR Toolkit:

import { useEffect } from 'react';
import {
  ConsentBanner,
  ConsentManager,
  useConsent,
} from '@tantainnovative/ndpr-toolkit';
import { localStorageAdapter } from '@tantainnovative/ndpr-toolkit/adapters';

// Define consent options once, outside components
const consentOptions = [
  {
    id: 'necessary',
    label: 'Necessary Cookies',
    description: 'These cookies are essential for the website to function properly.',
    required: true,
    purpose: 'Core website functionality',
  },
  {
    id: 'analytics',
    label: 'Analytics Cookies',
    description: 'These cookies help us understand how visitors interact with our website.',
    required: false,
    purpose: 'Usage analytics',
  },
  {
    id: 'marketing',
    label: 'Marketing Cookies',
    description: 'These cookies are used to track visitors across websites.',
    required: false,
    purpose: 'Marketing and advertising',
  },
];

// Main application with consent management
function App() {
  // v3 approach (recommended): use an adapter for storage
  const consent = useConsent({
    options: consentOptions,
    adapter: localStorageAdapter('my-app-consent'),
  });

  // v2 approach (deprecated, still works):
  // const consent = useConsent({
  //   options: consentOptions,
  //   storageOptions: { storageKey: 'my-app-consent' },
  // });

  return (
    <div>
      <header>
        <h1>My NDPA-Compliant Website</h1>
      </header>

      <main>
        <HomePage consent={consent} />
      </main>

      {/* Consent banner appears automatically for new visitors */}
      {consent.shouldShowBanner && (
        <ConsentBanner
          options={consentOptions}
          onSave={(settings) => consent.updateConsent(settings.consents)}
          position="bottom"
        />
      )}
    </div>
  );
}

// Example component that uses consent
function HomePage({ consent }) {
  const { hasConsent } = consent;

  useEffect(() => {
    if (hasConsent('analytics')) {
      console.log('Initializing analytics...');
    }
  }, [hasConsent]);

  useEffect(() => {
    if (hasConsent('marketing')) {
      console.log('Initializing marketing tools...');
    }
  }, [hasConsent]);

  return (
    <div>
      <h2>Welcome to our website</h2>
    </div>
  );
}

Best Practices

No Pre-checked Boxes

Never use pre-checked boxes for optional consent options. The NDPA 2023 requires that consent be given through a clear affirmative action, and pre-checked boxes do not meet this requirement.

Clear Language

Use clear, plain language to explain what data you're collecting, why you're collecting it, and how it will be used. Avoid legal jargon that may confuse users.

Granular Consent

Provide granular consent options for different types of processing. Do not bundle multiple purposes into a single consent option. This allows users to consent to some types of processing but not others.

Easy Withdrawal

Make it as easy to withdraw consent as it is to give it. Provide a clear, accessible way for users to update their consent preferences at any time.

Record Keeping

Maintain detailed records of consent, including when and how consent was given or withdrawn. This is essential for demonstrating compliance with the NDPA 2023.

Regular Review

Regularly review and update your consent mechanisms to ensure they remain compliant with the NDPA 2023 and effective for your users. Consider conducting user testing to ensure your consent mechanisms are clear and usable.

Common Pitfalls to Avoid

Cookie Walls:Blocking access to your website unless users accept all cookies is generally not considered valid consent under the NDPA 2023, as it doesn't give users a genuine choice.
Bundling Consent:Requiring users to consent to multiple unrelated purposes as a package deal is not compliant with the NDPA 2023's requirement for specific consent.
Ignoring Consent:Loading tracking scripts or cookies before obtaining consent is a common mistake that violates the NDPA 2023's requirement for valid consent.
Unclear Language:Using vague or technical language that users may not understand undermines the 'informed' aspect of valid consent.
Difficult Withdrawal:Making it difficult for users to withdraw consent, such as by hiding the option in a complex settings menu, is not compliant with the NDPA 2023's requirement for withdrawable consent.
Inadequate Records:Failing to maintain adequate records of consent can make it difficult to demonstrate compliance with the NDPA 2023's requirement for record-keeping.

Additional Resources

NDPA 2023 Official Text

Official text of the Nigeria Data Protection Act 2023, including consent requirements.

View Act

Consent Component Documentation

Technical documentation for the Consent Management components.

View Documentation