Implement a user-facing data deletion mechanism

// DeletionRequestButton.tsx
import { useState } from 'react';
import { clearUserData } from '@/lib/privacy';
 
type DeletionState = 'idle' | 'confirming' | 'pending' | 'done' | 'error';
 
export function DeletionRequestButton() {
  const [state, setState] = useState<DeletionState>('idle');
 
  async function handleConfirm() {
    setState('pending');
    try {
      // 1. Clear all client-side storage immediately
      clearUserData();
 
      // 2. Send deletion request to the server
      const response = await fetch('/api/account/delete', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
      });
 
      if (!response.ok) throw new Error('Server deletion request failed');
 
      setState('done');
    } catch {
      setState('error');
    }
  }
 
  if (state === 'done') {
    return (
      <p role="status">
        Your deletion request has been received. Your data will be removed
        within 30 days. You have been signed out.
      </p>
    );
  }
 
  if (state === 'confirming') {
    return (
      <div role="alertdialog" aria-labelledby="delete-confirm-title">
        <h2 id="delete-confirm-title">Delete your account and all data?</h2>
        <p>This action cannot be undone. You will be signed out immediately.</p>
        <button onClick={handleConfirm} disabled={state === 'pending'}>
          {state === 'pending' ? 'Deleting…' : 'Yes, delete my data'}
        </button>
        <button onClick={() => setState('idle')}>Cancel</button>
      </div>
    );
  }
 
  return (
    <button onClick={() => setState('confirming')}>
      Delete my account and data
    </button>
  );
}

// lib/privacy.ts
 
/**
 * Removes all personal data from client-side storage.
 * Call this immediately when a deletion request is confirmed — do not wait
 * for the server response, as the user has already expressed intent to delete.
 */
export async function clearUserData(): Promise<void> {
  // 1. localStorage
  localStorage.clear();
 
  // 2. sessionStorage
  sessionStorage.clear();
 
  // 3. IndexedDB — delete every database the application has created
  const databases = await indexedDB.databases();
  await Promise.all(
    databases.map((db) => {
      if (!db.name) return Promise.resolve();
      return new Promise<void>((resolve, reject) => {
        const req = indexedDB.deleteDatabase(db.name!);
        req.onsuccess = () => resolve();
        req.onerror = () => reject(req.error);
      });
    })
  );
 
  // 4. Cookies — clear known application cookies
  const cookiesToDelete = ['session', 'refresh_token', 'user_prefs', '__stripe_mid'];
  for (const name of cookiesToDelete) {
    document.cookie = `${name}=; Max-Age=0; path=/; SameSite=Lax`;
  }
 
  // 5. Cache Storage (Service Worker caches)
  if ('caches' in window) {
    const cacheNames = await caches.keys();
    await Promise.all(cacheNames.map((name) => caches.delete(name)));
  }
}

// app/api/account/delete/route.ts (Next.js App Router)
import { NextResponse } from 'next/server';
import { getServerSession } from 'next-auth';
 
export async function POST() {
  const session = await getServerSession();
  if (!session?.user?.id) {
    return NextResponse.json({ error: 'Unauthenticated' }, { status: 401 });
  }
 
  // Queue deletion — process asynchronously within 30 days
  await scheduleDeletion({
    userId: session.user.id,
    requestedAt: new Date().toISOString(),
    // GDPR deadline: 30 calendar days from request
    deadline: new Date(Date.now() + 30 * 24 * 60 * 60 * 1000).toISOString(),
  });
 
  // Send confirmation email to the address on record before it is deleted
  await sendDeletionConfirmationEmail(session.user.email);
 
  return NextResponse.json({ received: true });
}