A World ID Mini App built with Next.js that demonstrates authentication, payments, and smart contract interactions.

• 🔐 Authentication: World ID wallet authentication with session management
• 💰 Payments: USDC transfers using MiniKit payment commands
• 🔗 Smart Contracts: Counter contract interaction on Worldchain Sepolia
• 🎵 Audio: Background music playback
• 🎨 UI: World App compliant design using Mini Apps UI Kit

• Node.js 18+
• npm or yarn
• ngrok (for local development)
• World ID account

1. Clone and install dependencies

   git clone <your-repo>
   cd my-first-mini-app
   npm install

2. Environment setup

   cp .env.example .env.local

3. Configure environment variables

   • Run npx auth secret to generate AUTH_SECRET
   • Add your app ID from developer.worldcoin.org to NEXT_PUBLIC_APP_ID
   • Set HMAC_SECRET_KEY by running openssl rand -base64 32

4. Start development server

   npm run dev

5. Setup ngrok tunnel

   ngrok http 3000

6. Update configuration

   • Add your ngrok URL to AUTH_URL in .env.local
   • Add your ngrok domain to allowedDevOrigins in next.config.ts
   • Update your app URL in the developer portal

Place your audio file (sohamn5.mp3) in the /public folder. The app will automatically play it on loop when loaded.

src/
├── app/
│   ├── page.tsx              # Main app page with audio
│   └── layout.tsx            # Root layout
├── components/
│   ├── AuthButton/           # Authentication component
│   ├── Pay/                  # Payment & contract interaction
│   └── PageLayout/           # Page wrapper components
├── abi/
│   └── CounterABI.json       # Smart contract ABI
└── styles/
    └── globals.css           # Global styles

• Handles World ID wallet connection
• Manages user sessions with next-auth
• Displays user profile information

• Sends USDC payments to users
• Interacts with counter smart contract
• Monitors transaction confirmation status

• Contract Address: 0xf6c9f4A8e497677AC5e01DaF90e549605d5FFC5A
• Network: Worldchain Sepolia
• Function: Counter increment (inc())

• Framework: Next.js 14 with App Router
• Authentication: NextAuth.js + MiniKit wallet auth
• Blockchain: Worldchain Sepolia, Viem
• UI: Mini Apps UI Kit React
• Styling: Tailwind CSS

allowedDevOrigins: ['your-ngrok-domain.ngrok-free.app']

AUTH_SECRET="your-auth-secret"
HMAC_SECRET_KEY="your-hmac-key"
AUTH_URL="https://your-ngrok-url.ngrok-free.app/"
NEXT_PUBLIC_APP_ID="your-app-id"

1. Start your dev server: npm run dev
2. Run ngrok: ngrok http 3000
3. Update your app URL in the developer portal
4. Test in World App simulator or on mobile

• Use Eruda for mobile console debugging (enabled in development)
• Check browser console for transaction logs
• Monitor network requests in DevTools

For production deployment:

1. Update AUTH_URL to your production domain
2. Remove ngrok domain from allowedDevOrigins
3. Disable Eruda in production
4. Update app URL in developer portal

• World ID Mini Apps Documentation
• MiniKit JavaScript SDK
• Mini Apps UI Kit
• World App Design Guidelines

This template was made with help from the amazing supercorp-ai team.

MIT License