Introduction#
At a glance
This page introduces the Concordium age verification tutorial series and explains what you will build: an age-gated web application where users prove they are 18 or older without revealing their date of birth. You will need basic familiarity with React and web development. After reading this page, you will understand the tools, architecture, and overall flow before beginning the hands-on steps.
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)
Resources#
Additional resources for this tutorial:
Questions? Open an issue on GitHub
