Self Protocol Workshop

Learn to build privacy-preserving identity verification with Self Protocol - from frontend QR codes to smart contract attestations on Celo.

📺 New to Self? Watch the ETHGlobal Workshop first.

Prerequisites

• Node.js 20+
• Self Mobile App (iOS/Android)
• Celo wallet with testnet funds

---

Workshop Steps

Step 1: Repository Setup

# Clone the workshop repository
git clone <repository-url>
cd workshop

# Install frontend dependencies
cd app
npm install
cd ..

# Install contract dependencies
cd contracts
npm install        
forge install foundry-rs/forge-std

Step 2: Smart Contract Deployment

Navigate to the contracts folder and configure deployment:

# Copy and configure environment
cp .env.example .env

Edit .env with your values:

# Your private key (with 0x prefix)
PRIVATE_KEY=0xyour_private_key_here

# Network selection
NETWORK=celo-sepolia

# Scope calculation
SCOPE_SEED="self-workshop"

Deploy the contract:

# Make script executable
chmod +x script/deploy-proof-of-human.sh

# Deploy contract (handles everything automatically)
./script/deploy-proof-of-human.sh

⚠️ Troubleshooting Celo Sepolia: If you encounter a Chain 11142220 not supported error when using celo-sepolia, update Foundry to version 0.3.0:

foundryup --install 0.3.0

The script will:

• ✅ Build contracts with Foundry
• ✅ Deploy ProofOfHuman contract
• ✅ Verify contract on CeloScan
• ✅ Display deployment summary

Step 4: Frontend Configuration

Configure the frontend:

cd ../app  # Go to app directory
cp .env.example .env

Edit .env:

# Your deployed contract address from Step 3
# notice that the address should be lowercase
NEXT_PUBLIC_SELF_ENDPOINT=0xyour_contract_address



# App configuration
NEXT_PUBLIC_SELF_APP_NAME="Self Workshop"
NEXT_PUBLIC_SELF_SCOPE="self-workshop"

Step 4: Start Development

# Navigate to app directory and start the Next.js development server
cd app
npm run dev

Visit http://localhost:3000 to see your verification application!

---

🛠️ Detailed Configuration

Frontend SDK Configuration

The Self SDK is configured in your React components:

import { SelfAppBuilder } from '@selfxyz/core';

const selfApp = new SelfAppBuilder({
    // Contract integration settings
    endpoint: process.env.NEXT_PUBLIC_CONTRACT_ADDRESS,
    endpointType: "staging_celo",  // Use "celo" for mainnet
    userIdType: "hex",             // For wallet addresses
    version: 2,                    // Always use V2
    
    // App details
    appName: "Self Workshop",
    scope: "self-workshop",
    userId: userWalletAddress,

    disclosures: {
        // Verification requirements (must match your contract config)
        minimumAge: 18,
        excludedCountries: ["USA"],  // 3-letter country codes
        ofac: false,                 // OFAC compliance checking
        // disclosures
        name: true,                  // Request name disclosure
        nationality: true,           // Request nationality disclosure
        gender: true,                // Request gender disclosure
        date_of_birth: true,         // Request date of birth disclosure
        passport_number: true,       // Request passport number disclosure
        expiry_date: true,           // Request expiry date disclosure
    }
}).build();

Smart Contract Configuration

Your contract extends SelfVerificationRoot:

contract ProofOfHuman is SelfVerificationRoot {
    mapping(address => bool) public verifiedHumans;
    bytes32 public verificationConfigId;
    
    constructor(
        address _hubAddress,
        uint256 _scope,
        bytes32 _verificationConfigId
    ) SelfVerificationRoot(_hubAddress, _scope) {
        verificationConfigId = _verificationConfigId;
    }
    
    function customVerificationHook(
        ISelfVerificationRoot.GenericDiscloseOutputV2 memory output,
        bytes memory userData
    ) internal override {
        // Mark user as verified
        address userAddress = address(uint160(output.userIdentifier));
        verifiedHumans[userAddress] = true;
        
        emit VerificationCompleted(output, userData);
    }
}

Network Configuration

Celo Sepolia (Testnet)

• Hub Address: 0x16ECBA51e18a4a7e61fdC417f0d47AFEeDfbed74
• RPC: https://forno.celo-sepolia.celo-testnet.org
• Explorer: https://celo-sepolia.blockscout.com/
• Supports: Mock passports for testing

Celo Mainnet

• Hub Address: 0xe57F4773bd9c9d8b6Cd70431117d353298B9f5BF
• RPC: https://forno.celo.org
• Explorer: https://celoscan.io
• Supports: Real passport verification

---

Getting Help

• 📱 Telegram Community: Self Protocol Support
• 📖 Documentation: docs.self.xyz
• 🎥 Workshop Video: ETHGlobal Cannes
• 💬 GitHub Issues: Report workshop-specific issues

---

📁 Project Structure

workshop/
├── app/
│   ├── app/
│   │   ├── verified/page.tsx        # Success page
│   │   ├── page.tsx                 # Main QR code page
│   │   └── layout.tsx               # Root layout
│   └── components/                  # React components
├── contracts/
│   ├── src/ProofOfHuman.sol         # Main contract
│   ├── script/
│   │   ├── Deploy*.s.sol            # Deployment scripts
│   │   └── deploy-proof-of-human.sh # Deployment automation
│   ├── .env.example                 # Contract environment template
│   ├── foundry.toml                 # Foundry configuration
│   └── DEPLOYMENT.md                # Detailed deployment guide
├── public/                          # Static assets
├── .env.example                     # Frontend environment template
└── README.md                        # This file

---

🔗 Additional Resources

Documentation

• Self Protocol Docs - Complete protocol documentation
• Contract Integration Guide - Smart contract specifics
• Frontend SDK Reference - Frontend integration details
• Verification Disclosures - Available verification options

Tools & Utilities

• tools.self.xyz - Configuration and deployment tools
• Self Mobile Apps - iOS and Android apps
• Celo Documentation - Blockchain platform docs
• Foundry Documentation - Smart contract framework

Community & Support

• Self Protocol Telegram - Community support
• GitHub Repository - Source code and issues
• ETHGlobal Workshop - Video tutorial