Introduction

This tutorial teaches you how to build an age-gated web application where users can prove they’re 18 or older without revealing their actual birthdate. You’ll learn to integrate Concordium’s zero-knowledge proof system with a Next.js application, creating a privacy-preserving verification flow that’s both secure and user-friendly.

What You’ll Build

An age-gated application where users prove they’re 18+ without revealing their actual birthdate. The verification happens through:

• Zero-knowledge proofs (user proves age without sharing date of birth (DOB))

• Concordium ID wallet (user’s phone holds their credentials, ID information private)

• On-chain anchoring (verification is recorded on blockchain for audit or transparency purposes)

        sequenceDiagram
    participant User
    participant YourApp
    participant VerifierService
    participant ConcordiumWallet
    participant Blockchain

    User->>YourApp: Clicks "Verify Age"
    YourApp->>VerifierService: Create verification request
    VerifierService->>Blockchain: Anchor VRA (Verification Request Anchor)
    VerifierService-->>YourApp: Return VPR (Verifiable Presentation Request)
    YourApp->>ConcordiumWallet: Send VPR via WalletConnect
    ConcordiumWallet->>User: Show "Prove age 18+"
    User->>ConcordiumWallet: Approve
    ConcordiumWallet->>ConcordiumWallet: Generate ZK proof (age ≥ 18)
    ConcordiumWallet-->>YourApp: Return VP (Verifiable Presentation)
    YourApp->>VerifierService: Verify presentation
    VerifierService->>Blockchain: Anchor VAA (Verification Audit Anchor)
    VerifierService-->>YourApp: "Verified ✓"
    YourApp->>User: Grant access
    

Tutorial Code Disclaimer

Warning

This tutorial is designed for learning and development purposes. The code examples prioritize clarity and education over production-readiness.

What this tutorial provides

• Correct cryptographic implementation (zero-knowledge proofs work properly)

• Clean architecture (separation of concerns, reusable components)

• Educational comments (learn how everything works)

• Working integration (fully functional age verification)

Use this as a foundation to learn the concepts, then harden it for production use.

Prerequisites

Before starting this tutorial, ensure you have:

• Next.js 16+ application (this tutorial uses Next.js App Router with React Server Components)

• Docker Desktop installed (download)

• Node.js 18+ and npm

• Concordium account with keys (get testnet keys)

• Concordium ID wallet app (iOS / Android)

Resources

Additional resources for this tutorial:

• Concordium Docs

• Verification Web UI SDK

• WalletConnect Docs

• Verifier Service GitHub

Questions? Open an issue on GitHub