Cookie consent mechanism is present

GDPR Article 7 and the ePrivacy Directive Article 5(3) require affirmative, informed consent before setting non-essential cookies or activating tracking scripts for EU users. Loading Google Analytics, Mixpanel, Hotjar, or any advertising pixel without prior consent is a direct ePrivacy violation — not a gray area. Supervisory authorities across the EU have issued fines in this category ranging from four figures for small sites to multi-million-euro penalties for larger operators. CCPA §1798.120 adds opt-out requirements for California users. Most vibe-coded projects wire analytics unconditionally in app/layout.tsx without ever implementing a consent gate.

Gate analytics initialization behind a consent check. Show a banner on first visit; only load tracking scripts after the user accepts.

// components/cookie-banner.tsx
// Render on first visit; write consent decision to localStorage or a first-party cookie.
// Only initialize analytics after consent === 'accepted'.

The minimal compliant approach: render a banner with Accept/Decline on first visit, persist the choice in a first-party cookie, and conditionally load tracking scripts only when accepted. Libraries like react-cookie-consent handle the banner; wrap your analytics <Script> tag in a conditional. If your project genuinely uses only essential cookies (auth session, CSRF tokens), document this explicitly in your privacy policy — you do not need a banner.

• ID: cookie-consent

• Severity: high

• What to look for: Count all cookie-setting mechanisms and third-party scripts that use cookies. Enumerate whether a cookie consent banner or mechanism exists. Check for cookie consent banner components or libraries. Look for dependencies like react-cookie-consent, cookieyes, onetrust, osano, @porscheofficial/cookie-consent-banner. Check for any cookie consent component in the UI. Check if analytics scripts (Google Analytics, Mixpanel, etc.) are loaded conditionally based on consent state. Check for cookie consent configuration in any consent management platform configs.

• Pass criteria: A cookie consent mechanism is present that either (a) shows a consent banner before setting non-essential cookies, or (b) the project uses only essential/functional cookies and explicitly documents this. At least 1 cookie consent mechanism must be present if the site sets non-essential cookies.

• Fail criteria: Analytics, tracking, or advertising scripts are loaded without any consent mechanism, and no evidence of a purely-essential-cookies architecture exists.

• Skip (N/A) when: Skip if no analytics, tracking, or third-party cookies are used. Signal: no analytics dependencies (google-analytics, @analytics, mixpanel, segment, hotjar, etc.) and no advertising or tracking pixel integrations. Also skip for internal tools with no external users.

• Cross-reference: For privacy policy that describes cookie usage, see privacy-policy.

• Detail on fail: "Analytics or tracking scripts loaded without cookie consent mechanism — required under GDPR and ePrivacy Directive for EU users"

• Remediation: Loading analytics or tracking cookies without prior consent violates GDPR for EU users and similar laws globally. The fine exposure is real:

  // components/cookie-banner.tsx — consent banner
  // Use a library like cookie-consent or build a custom banner in app/layout.tsx
  

  1. Add a consent banner library: react-cookie-consent is simple for basic needs; CookieYes or Iubenda provide more comprehensive compliance tools.
  2. Wrap analytics initialization in a consent check — only load Google Analytics (or equivalent) after the user accepts.
  3. A minimal compliant approach: show a banner on first visit with Accept/Decline options. Store the preference in a first-party cookie. Load tracking scripts only when preference is accepted.
  4. If you genuinely only use essential cookies (session cookies for auth, CSRF tokens), document this in your privacy policy and you do not need a consent banner.