Skip to main content

Integration with Human Passport

A comprehensive Next.js application that demonstrates the power of combining WaaP with Human Passport for identity verification and Web3 authentication.

Live Demo​

→ Try the live demo at welcome.human.tech

What This Demo Showcases​

This application is a perfect example of how to integrate WaaP in a real-world scenario, demonstrating:

  • Human Passport Integration: Verify human identity using Human Passport scores with a configurable threshold
  • Seamless Authentication: Multiple login methods including social logins (Google, Twitter, Discord, GitHub), email, and wallet connections
  • WaaP SDK: Full integration with human.tech's wallet solution
  • Multi-chain Support: Connect to different Ethereum networks seamlessly
  • Modern UI/UX: Responsive design with smooth animations using Framer Motion
  • Real-time Updates: Live passport score updates and verification status

🛠 Technical Implementation​

The demo uses a modern tech stack:

  • Framework: Next.js 15 with App Router
  • Frontend: React 19, TypeScript, Tailwind CSS
  • Web3: Wagmi, Viem, Ethers.js integration
  • State Management: Zustand for wallet state
  • Animations: Framer Motion for smooth UX
  • Identity Verification: Human Passport API integration

🔗 Explore the Code​

→ View source code on GitHub

The repository includes:

  • Complete WaaP SDK integration
  • Human Passport score verification implementation
  • Responsive UI components
  • Configuration examples
  • Environment setup guide
  • Deployment instructions

Key Features Demonstrated​

Identity Verification Flow​

// Example: Human Passport integration
const verifyHumanity = async (address: string) => {
  const response = await fetch(`https://api.passport.xyz/v2/stamps/${scorerId}/score/${address}`, {
    headers: { 'X-API-KEY': apiKey }
  });
  const data = await response.json();
  return data.score >= threshold; // Configurable threshold (default: 25)
};

WaaP Integration​

For complete method documentation, see our Methods Guide →

// Example: Wallet connection with WaaP SDK
import { initWaaP } from "@human.tech/waap-sdk";

// Sets window.waap with all necessary methods
initWaaP({
  config: {
    allowedSocials: ['google', 'twitter', 'discord', 'github'],
    authenticationMethods: ['email', 'social'],
    styles: { darkMode: true }
  }
});

📚 Learn From This Example​

This demo serves as an excellent reference for:

  1. Production-Ready Setup: See how to configure WaaP for production use
  2. Error Handling: Robust error handling patterns for wallet connections
  3. State Management: How to manage wallet state across your application
  4. UI/UX Best Practices: Creating intuitive wallet connection flows
  5. Human Passport Integration: Implementing identity verification in real applications

Customization Ideas​

Use this demo as inspiration to build your own unique implementations:

  • Customize the verification threshold based on your use case
  • Add additional social login providers
  • Implement custom UI themes and animations
  • Integrate with your existing user management system
  • Add features like NFT gating or token-based access control