depa panjie purnama

Posted on Aug 23

Anonymous Whistleblower Inbox with Zero-Knowledge Proofs

#devchallenge #midnightchallenge #web3 #blockchain

This is a submission for the Midnight Network "Privacy First" Challenge - Protect That Data prompt

What I Built

Midnight Whistleblower is a privacy-first DApp that reimagines secure reporting. Imagine needing to report something sensitive (corruption, safety violations, or misconduct) but fearing retaliation. Traditional systems force you to choose: stay silent or risk exposure. Midnight Whistleblower breaks this dilemma.

The Magic ✨

Our platform combines three powerful privacy technologies:

Zero-Knowledge Proofs: Prove you're authorized to report without revealing who you are
Rate-Limit Nullifiers (RLN): Prevent spam while maintaining complete anonymity
End-to-End Encryption: Only the designated moderator can decrypt reports, not even our servers can read them

The Journey Through Every Page 🗺️

🏠 Home Page: Your gateway to anonymous truth

Clean, minimalist design that doesn't intimidate
Two clear paths: "I need to report something" or "I'm a moderator"
Privacy promise front and center: "Your identity is mathematically protected"

📝 Submit Report (Reporter Page): Where courage meets cryptography

Step 1: Trust Setup. Paste the moderator's public key (like choosing who gets to read your sealed letter)
Step 2: Your Story. Write your report with confidence. Add evidence. Every keystroke stays local until encrypted
Step 3: The Magic Moment. Click submit and watch as:
- Your browser generates a ZK proof (proving you can submit without saying who you are)
- Content gets encrypted with military-grade AES-GCM
- A unique nullifier prevents double-submission this epoch
- You get a mock transaction hash (no real money involved, per challenge rules)

🔐 Moderator Dashboard: The trusted guardian's toolkit

Key Vault: Generate, import, or export your cryptographic keys with password protection
Encrypted Inbox: See reports as mysterious locked boxes until you decrypt them
Proof Verification: Each report's ZK proof is verified before you can decrypt
Workflow Management: Mark as reviewed or archive (stats update instantly)
The Trust Model: Your private key never leaves your browser. Ever.

📊 Metrics Page: Understanding the flow of truth

Real-time counts: pending, reviewed, archived
Trend visualization over time
Helps moderators manage workload and spot patterns
All derived from encrypted data. no content exposure

📈 Public Stats: Transparency without compromise

Shows aggregate numbers to build public trust
"147 reports submitted, 89% reviewed"
No identifying information, just accountability metrics

⚙️ Settings: Your control center

Cloud Sync Toggle: One switch, no complexity
- OFF = Pure local mode, your data never leaves your device
- ON = Encrypted sync via Vercel KV for multi-device access
Smart Contract Mode: Enabled by default (mocked for the challenge)
Advanced Options: Hidden unless you need them. we respect your cognitive load

🛡️ Privacy Page: Our promises, explained

Plain English explanation of our cryptography
What we store (ciphertext), what we don't (your identity)
How RLN works without a PhD in mathematics
Your rights and our commitments

Demo

🔗 GitHub Repository: https://github.com/depapp/midnight-whistleblower
🌐 Live Demo: https://midnight-whistleblower.vercel.app

Architecture Overview

┌─────────────────────────────────────────────────────────┐
│                    USER BROWSER                         │
│  ┌─────────────────────────────────────────────────┐    │
│  │   React App + MidnightJS + Web Crypto API       │    │
│  └─────────────────────────────────────────────────┘    │
│                           │                             │
│        ┌──────────────────┼──────────────────┐          │
│        ▼                  ▼                  ▼          │
│  ┌──────────┐      ┌──────────┐      ┌──────────┐       │
│  │ZK Proofs │      │Encryption│      │   RLN    │       │
│  │(Groth16) │      │(AES-GCM) │      │Nullifiers│       │
│  └──────────┘      └──────────┘      └──────────┘       │
│                           │                             │
│                    ┌──────▼──────┐                      │
│                    │  IndexedDB  │                      │
│                    │(Local First)│                      │
│                    └──────┬──────┘                      │
└───────────────────────────┼─────────────────────────────┘
                            │ (Optional)
                    ┌───────▼────────┐
                    │  Vercel KV     │
                    │(Encrypted Only)│
                    └────────────────┘

How I Used Midnight's Technology

🔮 The Compact Circuit (`circuits/membership_rln.compact`)

// Simplified view of our RLN circuit
circuit MembershipRLN {
    // Public inputs
    merkleRoot: Field
    epoch: Field
    nullifier: Field
    signalHash: Field

    // Private inputs (never revealed!)
    identitySecret: Field
    merklePath: Field[20]

    // The magic: prove membership without revealing identity
    assert(verifyMerkleProof(identitySecret, merklePath) == merkleRoot)
    assert(hash(identitySecret, epoch) == nullifier)
}

🎯 MidnightJS Integration

Our src/lib/midnightjs.ts orchestrates the privacy symphony:

// Load compiled artifacts (proving key, verification key, WASM)
const artifacts = await ArtifactLoader.loadArtifacts('membership_rln');

// Generate proof (happens in reporter's browser)
const proof = await midnightJS.generateProof('membership_rln', {
    merkleRoot: organizationRoot,
    epoch: currentEpoch,
    identitySecret: userSecret,  // Never leaves the browser!
    merklePath: membershipPath
});

// Verify proof (happens in moderator's browser)
const isValid = await midnightJS.verifyProof('membership_rln', proof);

🚀 The Development Experience

We built a two-speed system:

Production Mode: Real ZK proofs using compiled Midnight artifacts
Dev Mode: Lightning-fast stubs for rapid iteration (VITE_USE_REAL_MIDNIGHT=false)

This means you can develop the UX at full speed, then switch to real proofs for testing.

Data Protection as a Core Feature

🔐 The Privacy Stack

Layer 1: Anonymous Identity

ZK membership proofs let you prove "I'm allowed to submit" without revealing who you are
Like showing you have a valid ticket without showing your name

Layer 2: Anti-Spam Without Tracking

RLN nullifiers prevent multiple submissions per day
The clever part: we can detect duplicates without knowing who submitted them
Nullifier = Hash(YourSecret + Today'sDate)

Layer 3: End-to-End Encryption

// In the reporter's browser
const encrypted = await encryptMessage(reportContent, moderatorPublicKey);
// Now it's gibberish to everyone except the moderator

// In the moderator's browser (and nowhere else!)
const decrypted = await decryptMessage(encrypted, moderatorPrivateKey);
// The report is revealed, but the identity remains hidden

Layer 4: Local-First Architecture

Your data lives in IndexedDB by default
Cloud sync is optional and only moves ciphertext
You own your data, we just help move it

🛡️ What Makes This Different

Traditional whistleblower systems:

❌ "Trust us, we'll protect your identity" (trust-based)
❌ "Use Tor and hope for the best" (network-based)
❌ "Create a throwaway email" (weak pseudonymity)

Midnight Whistleblower:

✅ Mathematical proof of anonymity (ZK-based)
✅ Encryption at rest and in transit (cryptography-based)
✅ No correlation possible across submissions (nullifier-based)
✅ Works even if our servers are compromised (client-based)

Set Up Instructions / Tutorial

🎯 Quick Start (5 minutes)

Prerequisites: Node.js 18+, Git

# 1. Clone the repository
git clone https://github.com/depapp/midnight-whistleblower.git
cd midnight-whistleblower

# 2. Install dependencies
npm install

# 3. Compile the Midnight circuits (this is the magic!)
npm run compile-circuits

# 4. Start the development server
npm run dev

# 5. Open http://localhost:5173

🎭 Playing Both Roles (Tutorial Mode)

Act 1: Become the Moderator

Navigate to /moderator
Click "Generate New Key Pair"
Copy your public key (this is what reporters need)
Optional: Export your keys with a password for backup

Act 2: Submit a Report

Open a new incognito window (for the full experience)
Go to /submit
Paste the moderator's public key
Write your report: "The coffee machine is plotting against us"
Attach evidence (optional): photo_of_suspicious_coffee_machine.jpg
Click Submit and watch the magic:
- Console shows: [MidnightJS] Generating proof...
- Progress bar indicates encryption
- You get a transaction hash (mock)

Act 3: Moderate the Report

Return to the moderator dashboard
See your encrypted report (looks like gibberish)
Click to decrypt (proof is verified first)
Read the shocking coffee machine revelation
Mark as "Reviewed" and watch the stats update

🚀 Production Deployment (10 minutes)

Deploy to Vercel with Cloud Sync:

# 1. Install Vercel CLI
npm i -g vercel

# 2. Deploy (follow prompts)
vercel

# 3. Add KV Storage in Vercel Dashboard
# Project Settings → Storage → Create Database → KV

# 4. Environment variables are auto-configured!

In your deployed app:

Go to Settings
Toggle "Cloud Sync" ON
That's it! Multi-device sync with zero configuration

🔧 Advanced Configuration

Development Modes:

# Fast iteration mode (stub proofs)
VITE_USE_REAL_MIDNIGHT=false npm run dev

# Disable mock contract
VITE_USE_CONTRACT=false npm run dev

# Custom sync endpoint (for self-hosting)
VITE_SYNC_BASE_URL=https://your-api.com npm run dev

Circuit Customization:

// Modify circuits/membership_rln.compact
// Recompile with: npm run compile-circuits
// New artifacts are auto-loaded!

🐛 Troubleshooting Guide

Problem	Solution
"Artifacts not found"	Run `npm run compile-circuits`
"Proof generation failed"	Check browser console for `[MidnightJS]` logs
"Can't decrypt report"	Verify you're using the correct private key
"Stats not updating"	Wait 500ms for cloud sync, then refresh
"CORS errors in dev"	Use `VITE_SYNC_BASE_URL` for cross-origin