Este documento descreve as medidas de conformidade da biblioteca react-lgpd-consent com a Lei Geral de Proteção de Dados (LGPD) e as diretrizes da ANPD, detalhando as ferramentas que auxiliam os desenvolvedores a manter a conformidade.
Referências Oficiais:
Este documento descreve as medidas de conformidade da biblioteca react-lgpd-consent com a Lei Geral de Proteção de Dados (LGPD) e as diretrizes da ANPD, detalhando as ferramentas que auxiliam os desenvolvedores a manter a conformidade.
A biblioteca implementa os seguintes princípios e requisitos da LGPD:
ConsentProvider. Isso reduz a superfície de dados e atende ao princípio da minimização.version (versão da estrutura do cookie), consentDate (data do primeiro consentimento), lastUpdate (data da última alteração) e source (origem da ação: "banner" ou "modal").SameSite=Lax por padrão e o atributo secure é ativado automaticamente quando o site é servido via HTTPS.A biblioteca inclui um sistema que orienta os desenvolvedores durante a implementação, exibindo informações úteis no console para garantir que a configuração esteja correta.
Em ambiente de desenvolvimento (NODE_ENV !== 'production'), a biblioteca exibe:
[🍪 LGPD-CONSENT] ⚠️ Avisos de Configuração
[🍪 LGPD-CONSENT] Nenhuma configuração de categorias especificada. Usando padrão: necessary + analytics.
[🍪 LGPD-CONSENT] 🔧 Categorias Ativas (para UI customizada)
┌─────────────┬──────────────────────┬─────────────┬─────────────┐
│ ID │ Nome │ Toggle UI? │ Essencial? │
├─────────────┼──────────────────────┼─────────────┼─────────────┤
│ necessary │ Cookies Necessários │ ❌ NÃO │ 🔒 SIM │
│ analytics │ Cookies Analíticos │ ✅ SIM │ ⚙️ NÃO │
└─────────────┴──────────────────────┴─────────────┴─────────────┘
IMPORTANTE: Este sistema é automaticamente desativado em produção. Para forçar a desativação em qualquer ambiente, use a prop disableDeveloperGuidance={true} no ConsentProvider.
Para garantir a conformidade, especifique apenas as categorias de cookies que seu projeto realmente utiliza através da prop categories:
<ConsentProvider
categories={{
// Habilita apenas as categorias que você realmente usa
enabledCategories: ['analytics', 'marketing'],
}}
>
<App />
</ConsentProvider>
necessary é sempre presente e cobre cookies essenciais (autenticação, segurança, operação básica do site).analytics, marketing, functional, etc.) são opcionais e devem refletir apenas o que seu negócio realmente utiliza. Não habilite o que não usa.categories do ConsentProvider. A UI e as integrações usam exatamente essa definição. Não declare categorias em outros lugares.Exemplo mínimo (somente necessários):
<ConsentProvider categories={{ enabledCategories: [] }}>
<App />
</ConsentProvider>
Exemplo completo (site com analytics/marketing):
<ConsentProvider categories={{ enabledCategories: ['analytics', 'marketing', 'functional'] }}>
<App />
</ConsentProvider>
Para construir componentes de UI customizados que reagem à configuração, utilize os hooks:
useCategories(): Fornece uma lista completa das categorias ativas no projeto.useCategoryStatus('id'): Verifica o status de uma categoria específica (se está ativa, se é essencial, etc.).import { useCategoryStatus } from 'react-lgpd-consent'
function AnalyticsFeature() {
const analytics = useCategoryStatus('analytics')
// Não renderiza o componente se a categoria 'analytics' não estiver configurada no ConsentProvider
if (!analytics.isActive) {
return null
}
return <AnalyticsDashboard />
}
storage.namespace e storage.version geram automaticamente a chave (namespace__v<versão>) via buildConsentStorageKey.storage.domain propaga a mesma chave para subdomínios (.example.com, .gov.br etc.), evitando duplicação de banners.ConsentProvider remove o cookie antigo, reseta o estado e dispara o hook onConsentVersionChange.{ previousKey, nextKey, resetConsent } para que o controlador limpe caches auxiliares (localStorage, indexedDB, dataLayers) antes de liberar a nova experiência. O reset base já ocorre automaticamente.storage continuam com o comportamento padrão (lgpd-consent__v1).storage.version força o re-consentimento; demais instalações permanecem inalteradas.storage.version em produção força o fluxo de re-consentimento completo, incluindo remoção do cookie legado..example.com) mantêm um único consentimento sincronizado.import { ConsentProvider } from '@react-lgpd-consent/mui'
export function LGPDBoundary({ children }: { children: React.ReactNode }) {
return (
<ConsentProvider
categories={{ enabledCategories: ['analytics', 'marketing'] }}
storage={{ namespace: 'portal.gov.br', version: '2025-Q4', domain: '.gov.br' }}
onConsentVersionChange={({ previousKey, nextKey, resetConsent }) => {
console.info('[LGPD] Versão atualizada', { previousKey, nextKey })
localStorage.removeItem('marketing-overrides')
resetConsent()
}}
>
{children}
</ConsentProvider>
)
}
ConsentProvider injeta automaticamente a categoria necessary e a mantém como true em qualquer fluxo (UI, hooks, integrações).setPreference('necessary', false) ou setPreferences({ necessary: false, ... }) são ignoradas, com logs de aviso.PreferencesModal bloqueia o toggle e sinaliza visualmente “Cookies necessários (sempre ativos)”.writeConsentCookie) força necessary=true, protegendo contra mutações diretas ou plugins de terceiros.readConsentCookie + validateProjectPreferences) também assegura que valores corrompidos sejam normalizados.necessary=true de forma consistente.