CodeNewbie Community 🌱

Cover image for Build a Privacy-First Web App with ID Verification
Gaurav Dutt Kale
Gaurav Dutt Kale

Posted on

Build a Privacy-First Web App with ID Verification

I know “ID verification” and “privacy” don’t usually go in the same sentence... but hear me out.

New laws around the world are requiring ID verification for all kinds of applications, requiring age checks at the bare minimum. That’s going to happen whether we like it or not. But the way we do ID verification can make a huge difference.

Instead of forcing users to upload a photo of their government ID (👎) and processing that image (👎), storing it (👎), and figuring out how to comply with a dozen privacy and data residency laws (👎👎)...

Let’s do it the right way by using digital credentials.

With digital credentials, your app can ask just for what it needs:

  • Buying alcohol in the US - “Is this user over 21?” âś…
  • Renting a car - "Does this user have a valid driver's license" âś…

All without collecting or storing sensitive personal info. It's privacy-first by design.

🚀 What We'll Build

A minimal web app that verifies if the user is over the age of 21 using the digital ID on their phone.

Step 1: Install the Package

npm install id-verifier
Enter fullscreen mode Exit fullscreen mode

Step 2: Build the Request

//This should be done on your backend for maximum security

import {
  createCredentialsRequest,
  generateNonce,
  generateJWK,
  DocumentType,
  Claim
} from 'id-verifier';

try {
  // 1. Generate security parameters
  const nonce = generateNonce();
  const jwk = await generateJWK();

  // 2. Create the credentials request
  const requestParams = createCredentialsRequest({
    documentTypes: [DocumentType.MOBILE_DRIVERS_LICENSE],
    claims: [Claim.AGE_OVER_21],
    nonce,
    jwk
  });

  // 3. Securely store the nonce and jwk for later use
  // 4. Send the requestParams to your frontend

} catch (error) {
  console.error('Failed to create credentials request:', error.message);
}
Enter fullscreen mode Exit fullscreen mode

Step 3: Request Credentials from the User

//This should be done on your frontend website

import { requestCredentials } from 'id-verifier';

try {
  // 1. Request credentials from user
  const credentials = await requestCredentials(requestParams);

  // 2. Send the credentials response to your backend along with the origin
  const origin = window.location.origin;

} catch (error) {
  console.error('Credentials request failed:', error.message);
}
Enter fullscreen mode Exit fullscreen mode

Step 4: Process the Credentials Response

// Should be done on your backend for maximum security
import { processCredentials } from 'id-verifier';

try {
  // 1. Process and verify the received credentials
  const result = await processCredentials(credentials, {
    nonce,
    jwk,
    origin,
  });

  console.log('Credentials processed successfully!');
  console.log('Available claims:', result.claims);
  console.log('Trusted:', result.trusted);
  console.log('Valid:', result.valid);

} catch (error) {
  console.error('Failed to process credentials response:', error.message);
}
Enter fullscreen mode Exit fullscreen mode

That’s it. You're never given the user’s name, birthday, or ID image forcing you to comply with various regulations. Just the proof that they meet our age requirements.

đź§  Want to Dive Deeper?

Here are a few ways to level up:

Let me know if you try it out or run into any questions! More than happy to help out :)

Top comments (0)