Skip to main content

Examples

Explore real-world implementations of Human Wallet integration to see best practices and get inspiration for your own projects.

Human Passport Verification Demo​

A comprehensive Next.js application that demonstrates the power of combining Human Wallet 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 Human Wallet 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
  • Human Wallet 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 Human Wallet 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)
};

Human Wallet Integration​

For complete method documentation, see our Methods Guide →

// Example: Wallet connection with Human Wallet SDK
import { initSilk } from "@silk-wallet/silk-wallet-sdk";

// Sets window.silk with all necessary methods
initSilk({
  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 Human Wallet 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

Contributing Examples​

Have you built something amazing with Human Wallet? We'd love to showcase your work!

Submit your example →

Include:

  • Live demo URL
  • GitHub repository link
  • Brief description of what makes it unique
  • Technologies used