Pt. Prashant tripathi

Posted on Jun 16

I built an Aadhaar QR reader that works 100% offline — no server, no data leak

#javascript #webdev #privacy #qr

Every time I handed my Aadhaar card to someone for KYC, one thought kept nagging me:

Where is this data actually going?

Most "digital Aadhaar verification" tools out there silently upload your card details to their servers. You have zero visibility into what gets logged, stored, or sold. For something as sensitive as a national biometric ID, that's a pretty terrible default.

So I built AadhaarQRCodeReader — a web app that scans the Secure QR on any Aadhaar card, decodes all the identity details, and does the entire thing inside your browser. No backend. No API calls. No data leaves your device. Ever.

PtPrashantTripathi / AadhaarQRCodeReader

🇮🇳 Offline Aadhaar QR Reader — scan or upload any Aadhaar card, no server, no data leak.

🇮🇳 Aadhaar QR Code Reader

Scan the Secure QR on any Aadhaar card to instantly verify identity details — 100 % offline, no server, no data leaves your device.

✨ Features

Feature	Details
📷 Live camera scan	Uses the rear camera on mobile, front on desktop
🖼️ Image upload	Pick any photo containing an Aadhaar QR from your gallery
🔒 100 % offline	All decoding happens in the browser — zero network requests
🪪 Full card details	Name, DOB, gender, address, mobile last-4, email (if present), issue date
🃏 3D card flip	Front (personal) ↔ Back (address) card flip animation
🔗 Shareable URL	Result is encoded in `?data=` so links can be bookmarked
📱 Mobile-first	Works on iOS Safari, Android Chrome, and desktop browsers

📸 Screenshots

Scanner	Verified Result (Front)	Verified Result (Back)

Point camera at any Aadhaar QR	Personal details on the front face	Address & reference date on

…

View on GitHub

🤔 Wait, what even is the Aadhaar Secure QR?

UIDAI added a Secure QR Code to modern Aadhaar cards (and letters) — it's that big QR, not the small one. It's essentially a compressed, binary-encoded snapshot of your Aadhaar record containing:

Name, DOB, gender
Full address (house no., street, locality, district, state, PIN)
Last 4 digits of your linked mobile
Email (if you linked one)
Issue / last-updated date
A JPEG 2000 encoded photo of you That last one is where things get interesting. The whole payload is gzip-compressed and encoded as a raw base-10 decimal string — not base64, not hex. Just a massive number. Decoding it correctly took some digging into UIDAI's spec.

🏗️ The tech stack (spoiler: it's boring in the best way)

No React. No Vue. No Webpack. No node_modules. Just:

Vanilla ES Modules — plain import/export, no bundler
jsQR — QR detection from raw canvas pixel data (via jsDelivr CDN)
openjpeg.js — Emscripten-compiled WASM for JPEG 2000 decoding
Native Web APIs — DecompressionStream, TextDecoder, DataView, Canvas That's genuinely it. The whole project is static files. You can run it with:

python3 -m http.server 8080

⚠️ Don't open index.html directly via file:// — ES Modules need an HTTP origin or you'll hit a CORS error. This is a browser thing, not a bug.

Here's how the files are organized:

AadhaarQRCodeReader/
├── index.html
├── css/
│   ├── base.css          # design tokens, layout
│   └── components.css    # scanner, card, animations
└── script/
    ├── main.js            # entry point, view orchestration
    ├── modules/
    │   ├── aadhaar.js     # 🧠 the core decoder
    │   ├── camera.js      # camera + file upload
    │   └── jpeg_decoder.js # JPEG 2000 via WASM
    └── utils/
        ├── bytes.js       # decimalToBytes, gunzip
        ├── dom.js         # status bar helper
        └── format.js      # number formatting, field extraction

Clean, readable, zero magic.

🔍 How the decoding pipeline actually works

This was the fun part to figure out. Here's what happens from the moment jsQR returns a string to the moment the card renders on screen:

1️⃣ Detect the QR

The camera stream (or uploaded image) is painted onto a hidden <canvas>. jsQR reads the raw RGBA pixel data and spits out the QR's string value — a massive decimal number.

2️⃣ Decimal → Bytes

// bytes.js
function decimalToBytes(decimalString) {
  // big-integer conversion → Uint8Array
}

UIDAI encodes the payload as base-10 digits. We convert that back to a Uint8Array using big-integer arithmetic before we can do anything else with it.

3️⃣ Gunzip with the browser's own API

const ds = new DecompressionStream('gzip');
// pipe the bytes through it

No pako, no zlib. The browser has had DecompressionStream natively since ~2022. This is one of those moments where you realize you don't actually need a library.

4️⃣ Parse the binary fields

The decompressed output follows a specific binary schema from UIDAI. aadhaar.js reads fixed-position fields — name, DOB, gender, address parts, masked mobile, photo offset — using DataView and TextDecoder.

5️⃣ Decode the JPEG 2000 photo

This was the trickiest bit. No browser natively supports JPEG 2000 decode via JavaScript (Safari renders J2K in <img> tags, but that's useless when you have raw bytes). The solution: pass the raw bytes into the openjpeg WASM module compiled with Emscripten. It outputs a raw bitmap we draw onto a canvas and export as PNG.

6️⃣ Render the flip card

Everything gets assembled into a 3D CSS flip card — personal details on the front, address on the back. The decoded data also gets URL-encoded into a ?data= query parameter so the result is shareable and bookmarkable without needing the physical card again.

🔒 The privacy guarantees (and how they're actually enforced)

I'm not just saying "it's private" — here's what the code actually does:

What I claim	What the code does
No network calls after load	Zero `fetch()` / `XHR` to any external endpoint post page-load
No storage	No writes to `localStorage`, `sessionStorage`, or cookies — anywhere
Client-side only	Gzip uses native `DecompressionStream`; JPEG 2000 uses WASM. Both local.
No sneaky telemetry	Vanilla JS — no framework injecting analytics behind the scenes

Your Aadhaar data touches exactly one machine: yours.

✨ A few details I'm proud of

The shareable ?data= URL
Once you scan, the URL looks like ?data=<encoded-payload>. You can bookmark it, send it to yourself on another device, or use it in a support workflow — without anyone needing to re-scan the physical card.

3D card flip in pure CSS
The result renders as two card faces — front for personal info, back for the address — animated with a CSS perspective + rotateY transform. No JS animation library. It just feels right when you tap "Flip Card".

WASM for J2K without a server
Using Emscripten-compiled openjpeg directly in the browser means the photo decode is as fast as a native call, completely offline. Most solutions I found for "decode JPEG 2000 in the browser" ended with "...send it to a Lambda function." Not here.

🚀 Try it live

No install needed:

👉 ptprashanttripathi.github.io/AadhaarQRCodeReader

Or clone and run locally:

git clone https://github.com/PtPrashantTripathi/AadhaarQRCodeReader.git
cd AadhaarQRCodeReader
npx serve .

🤝 Contributing

The project is GPL v3, open source, and PRs are welcome. Some things that'd be great to add:

Support for the older Aadhaar QR format (XML-based, not binary)
DigiLocker QR support
Better error messages when someone scans the wrong QR If any of that sounds interesting to you, the codebase is approachable — no build setup to fight, no framework to learn first.

⭐ Star it on GitHub if you found this useful or interesting!

Thanks for reading. If you have questions about the UIDAI Secure QR spec, the WASM decode approach, or anything else in the code — drop them in the comments, happy to go deeper on any of it. 🙏

DEV Community