Back to Playbook
PlaybookRequired for LaunchLegal

Cookie Compliance & Privacy

If you're launching in California (or anywhere really), you need cookie compliance. It's not optional - it's the law. Here's how to do it right.

Why Cookie Compliance Matters

Legal Requirements

California (CCPA/CPRA): Fines up to $7,500 per violation. Each user = potential violation.

Europe (GDPR): Fines up to 4% of annual revenue or €20 million.

Beyond Legal - Why Users Care:

  • Trust: Shows you respect user privacy
  • Professionalism: Signals a legitimate, well-built product
  • User Control: Let users decide their comfort level

When You Need Cookie Compliance

You MUST have cookie compliance if:

  • Your app is accessible from California (basically any public website)
  • You use ANY cookies beyond strictly essential (auth, analytics, preferences)
  • You have users in EU, UK, or other privacy-conscious regions

You might skip it if:

  • Internal tools with no external users
  • Truly static sites with zero cookies (rare with modern frameworks)

Pro tip: When in doubt, add it. Better to have it and not need it than get hit with fines or lose user trust.

Common Cookies in Modern Apps

Essential (Always Required):

• Authentication: NextAuth session tokens, CSRF tokens

• Security: Rate limiting, bot detection

• Core Function: Shopping cart, user preferences

Functional (Need Consent):

• Preferences: Theme, language, timezone

• Social: GitHub/Google OAuth linking

• Features: Recently viewed, saved filters

Analytics (Need Consent):

• Vercel Analytics: _va cookie

• Google Analytics: _ga, _gid cookies

• PostHog: ph_* cookies

Marketing (Need Consent):

• Facebook Pixel: _fbp cookie

• Google Ads: Conversion tracking

• Retargeting: Various ad network cookies

Implementation Strategy

1. Cookie Banner Component

// components/cookies/CookieBanner.tsx
import { CookieBanner } from "@/components/cookies/CookieBanner";

// Add to your root layout.tsx
export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        {children}
        <CookieBanner /> {/* Shows on first visit */}
      </body>
    </html>
  );
}

2. Check Consent Before Setting Cookies

// lib/analytics.ts
import { hasConsent } from "@/lib/cookies";

export function trackEvent(eventName: string) {
  // Only track if user consented to analytics
  if (!hasConsent('analytics')) return;
  
  // Safe to use analytics now
  if (window.gtag) {
    gtag('event', eventName);
  }
}

3. Cookie Policy Page

// app/cookies/page.tsx
- Detailed list of all cookies
- Purpose of each cookie
- Duration and provider
- How to manage preferences
- Link to privacy policy

Already Built! We've created all these components for Saucytech. Check out our cookie policy and see the banner in action (clear cookies to re-trigger).

Pre-Launch Compliance Checklist

Testing Your Implementation

Test Scenarios:

  1. 1.

    First-time visitor flow

    Clear cookies → Visit site → Banner should appear

  2. 2.

    Reject non-essential

    Check DevTools → Only essential cookies should be set

  3. 3.

    Accept all

    Analytics should start tracking → Check network tab

  4. 4.

    Manage preferences

    Toggle categories → Save → Refresh → Settings persist

Quick Browser Console Test:

// Check what cookies are set
document.cookie.split(';').forEach(c => console.log(c.trim()));

// Check consent status
localStorage.getItem('cookie_consent');

Common Mistakes to Avoid

❌ Setting cookies before consent

Analytics and tracking must wait for user consent. Only auth cookies are exempt.

❌ Fake consent (dark patterns)

\"Accept All\" can't be the only visible option. Reject must be equally prominent.

❌ Cookie walls

Can't block access to your site for users who reject cookies (unless cookies are truly essential for the service).

❌ Forgetting third-party cookies

Stripe, Auth providers, CDNs - document ALL cookies, not just yours.

❌ No way to change preferences

Users must be able to change their mind. Add a preferences link in footer.

Quick Implementation Guide

Copy Our Implementation!

We've built a complete, compliant cookie system for Saucytech. Feel free to adapt it for your project:

lib/cookies.ts

Consent management utilities

components/cookies/CookieBanner.tsx

The banner component

components/cookies/CookiePreferences.tsx

Preferences management modal

app/cookies/page.tsx

Cookie policy page

Time to implement: ~2 hours with our code as reference

Customization needed: Your cookie list, brand colors, copy

Resources & References

Legal References:

Implementation Guides:

Remember: This is legal compliance, not legal advice. When in doubt, consult with a privacy attorney, especially for complex apps or sensitive data.

Ready to Implement?

Don't launch without cookie compliance. It's a few hours of work that protects you from massive fines.

More Playbooks