Kordant/tasks/web-production/22-cookie-gdpr.md

22. Cookie Consent & GDPR Compliance

meta: id: web-production-22 feature: web-production priority: P2 depends_on: [] tags: [compliance, gdpr, cookies, production]

objective:

• Implement GDPR-compliant cookie consent with granular controls and data processing transparency

deliverables:

• Cookie consent banner component
• Granular cookie preference management
• Consent storage and enforcement
• GDPR compliance verification

steps:

1. Create cookie consent banner:
   • Banner appears on first visit
   • Accept all, reject non-essential, customize options
   • Links to cookie policy
   • Dismissible but persistent until choice made
   • Mobile-responsive design
2. Implement granular controls:
   • Essential cookies (always on): auth, security
   • Analytics cookies (opt-in): PostHog, Plausible
   • Marketing cookies (opt-in): retargeting, ads
   • Preference cookies (opt-in): theme, language
3. Create preference modal:
   • Toggle switches for each category
   • Description of each cookie type
   • Save preferences button
   • Re-openable from footer link
4. Implement consent enforcement:
   • Store consent in cookie/localStorage
   • Block analytics scripts until consent given
   • Block marketing scripts until consent given
   • Respect "Do Not Track" browser setting
5. Add GDPR-specific features:
   • Data processing notice in signup flow
   • Right to access data (export tool)
   • Right to erasure (delete account)
   • Right to portability (data export)
   • Data retention periods documented
6. Add consent logging:
   • Log consent choices with timestamp
   • Store for compliance audit trail
   • Allow users to view their consent history

tests:

• Unit: Test consent banner rendering and interaction
• Integration: Test analytics blocked until consent
• Compliance: Verify DNT respected

acceptance_criteria:

• Cookie banner appears on first visit to all users
• Users can accept, reject, or customize cookie preferences
• Analytics scripts load only after opt-in consent
• Marketing scripts load only after opt-in consent
• Essential cookies function without consent
• Consent preferences persist across sessions
• "Do Not Track" browser setting respected
• Consent choice logged with timestamp
• GDPR rights accessible from settings page
• Cookie policy linked from banner and footer

validation:

• Clear cookies → visit site → banner appears
• Click "Reject" → analytics network requests blocked
• Click "Customize" → toggle analytics on → requests allowed
• Enable DNT in browser → banner shows "DNT detected"
• Check localStorage → consent object stored

notes:

• Use CookieConsent by Orestbida or build custom with SolidJS
• Must comply with both GDPR (EU) and CCPA (California)
• Analytics must be completely blocked, not just paused
• Document consent choices for 2 years (regulatory requirement)