Managing Consent

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

View DemosBack to Home
View Consent DemoConsent Component Docs

Introduction

Consent is a cornerstone of data protection under the Nigeria Data Protection Regulation (NDPR). 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.

NDPR Consent Requirements

Under the NDPR, 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

Complete Implementation Example

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

import { useState, useEffect } from 'react';
import { 
  ConsentBanner, 
  ConsentManager,
  ConsentStorage,
  ConsentRecorder,
  ConsentContext,
  useConsent
} from '@tantainnovative/ndpr-toolkit';

// Define consent options
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
  },
  {
    id: 'personalization',
    label: 'Personalization',
    description: 'These cookies allow us to provide personalized content and recommendations.',
    required: false
  }
];

// Create storage and recorder instances
const consentStorage = new ConsentStorage({ storageType: 'localStorage' });
const consentRecorder = new ConsentRecorder({ storageType: 'api', apiEndpoint: '/api/consent-records' });

// Main application with consent management
function App() {
  const [userId, setUserId] = useState(null);
  const [showBanner, setShowBanner] = useState(false);
  const [consents, setConsents] = useState(null);
  
  useEffect(() => {
    // Generate or retrieve user ID
    const storedUserId = localStorage.getItem('userId');
    if (storedUserId) {
      setUserId(storedUserId);
    } else {
      const newUserId = `user_${Date.now()}`;
      localStorage.setItem('userId', newUserId);
      setUserId(newUserId);
    }
  }, []);
  
  useEffect(() => {
    if (userId) {
      // Check if user has already given consent
      consentStorage.getConsent(userId).then(storedConsents => {
        if (storedConsents) {
          setConsents(storedConsents);
        } else {
          // No stored consents, show the banner
          setShowBanner(true);
        }
      });
    }
  }, [userId]);
  
  const handleSaveConsent = (newConsents) => {
    // Save the consent preferences
    setConsents(newConsents);
    consentStorage.saveConsent(userId, newConsents);
    
    // Record the consent event
    const eventType = consents ? 'updated' : 'given';
    consentRecorder.recordEvent({
      userId,
      eventType,
      consents: newConsents,
      timestamp: new Date().toISOString(),
      source: eventType === 'given' ? 'banner' : 'settings',
      userAgent: navigator.userAgent,
      version: '1.0'
    });
    
    // Hide the banner if it's showing
    setShowBanner(false);
  };
  
  const openConsentManager = () => {
    // Open a modal with the consent manager
    setShowConsentManager(true);
  };
  
  const [showConsentManager, setShowConsentManager] = useState(false);
  
  return (
    <ConsentContext.Provider value={{ consents, openConsentManager }}>
      <div className="app">
        <header>
          <h1>My NDPR-Compliant Website</h1>
          <nav>
            <ul>
              <li><a href="/">Home</a></li>
              <li><a href="/about">About</a></li>
              <li><a href="/contact">Contact</a></li>
              <li>
                <button onClick={openConsentManager}>
                  Privacy Settings
                </button>
              </li>
            </ul>
          </nav>
        </header>
        
        <main>
          {/* Main content of your application */}
          <HomePage />
        </main>
        
        <footer>
          <p>© 2023 My Company</p>
          <button onClick={openConsentManager}>
            Manage Cookie Preferences
          </button>
        </footer>
        
        {/* Consent banner */}
        {showBanner && (
          <ConsentBanner
            options={consentOptions}
            onSave={handleSaveConsent}
            privacyPolicyUrl="/privacy-policy"
            position="bottom"
            showCloseButton={false}
          />
        )}
        
        {/* Consent manager modal */}
        {showConsentManager && (
          <div className="modal">
            <div className="modal-content">
              <h2>Privacy Settings</h2>
              <ConsentManager
                options={consentOptions}
                onSave={(newConsents) => {
                  handleSaveConsent(newConsents);
                  setShowConsentManager(false);
                }}
                initialValues={consents || {}}
                onCancel={() => setShowConsentManager(false)}
              />
            </div>
          </div>
        )}
      </div>
    </ConsentContext.Provider>
  );
}

// Example component that uses consent
function HomePage() {
  const { hasConsent: hasAnalyticsConsent } = useConsent('analytics');
  const { hasConsent: hasMarketingConsent } = useConsent('marketing');
  const { hasConsent: hasPersonalizationConsent } = useConsent('personalization');
  const { openConsentManager } = useConsent();
  
  useEffect(() => {
    if (hasAnalyticsConsent) {
      // Initialize analytics
      console.log('Initializing analytics...');
    }
  }, [hasAnalyticsConsent]);
  
  useEffect(() => {
    if (hasMarketingConsent) {
      // Initialize marketing tools
      console.log('Initializing marketing tools...');
    }
  }, [hasMarketingConsent]);
  
  return (
    <div>
      <h2>Welcome to our website</h2>
      
      {hasPersonalizationConsent ? (
        <div>
          <h3>Personalized Content</h3>
          <p>Here's some content tailored just for you!</p>
        </div>
      ) : (
        <div>
          <h3>Standard Content</h3>
          <p>
            Enable personalization to see content tailored to your interests.
            <button onClick={openConsentManager}>
              Update Privacy Settings
            </button>
          </p>
        </div>
      )}
      
      {/* More content... */}
    </div>
  );
}

Best Practices

No Pre-checked Boxes

Never use pre-checked boxes for optional consent options. The NDPR 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. Don't 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 NDPR.

Regular Review

Regularly review and update your consent mechanisms to ensure they remain compliant with the NDPR 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 NDPR, 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 NDPR's requirement for specific consent.
  • Ignoring Consent: Loading tracking scripts or cookies before obtaining consent is a common mistake that violates the NDPR.
  • 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 NDPR.
  • Inadequate Records: Failing to maintain adequate records of consent can make it difficult to demonstrate compliance with the NDPR.

Additional Resources

NDPR Implementation Framework

Official guidance on implementing the NDPR, including consent requirements.

View Framework

Consent Component Documentation

Technical documentation for the Consent Management components.

View Documentation