ZeroSurf Age Verification Button

A React component for zero-knowledge age verification using the ZeroSurf mobile app and Aadhaar authentication.

Features

• Zero-Knowledge Proof: Age verification without revealing personal data
• Mobile Integration: Seamless deeplink integration with ZeroSurf app
• Easy Integration: Drop-in React component
• Customizable: Multiple themes and styling options
• Analytics Ready: Built-in event tracking support
• TypeScript: Full type definitions included

Installation

npm install zerosurf-age-verify-button

Quick Start

import { ZeroSurfButton } from 'zerosurf-age-verify-button';

function App() {
  return (
    <ZeroSurfButton
      onSuccess={(result) => {
        console.log('User verified!', result);
        // redirect to age-restricted content
      }}
      onError={(error) => {
        console.error('Verification failed:', error);
      }}
      buttonText="Verify Age with ZeroSurf"
      theme="dark"
    />
  );
}

How It Works

1. User clicks the verification button
2. Browser opens ZeroSurf mobile app via deeplink
3. User scans their Aadhaar QR code in the app
4. App generates zero-knowledge proof of age (18+)
5. User returns to website with verification result
6. Website receives proof without any personal data

Props

Required Props

None - component works with sensible defaults.

Optional Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | onSuccess | (result: VerificationResult) => void | - | Called when verification succeeds | | onError | (error: Error) => void | - | Called when verification fails | | onCancel | () => void | - | Called when user cancels | | buttonText | string | "🙋‍♂️ I swear I am 18+ years old" | Button text | | loadingText | string | "Opening ZeroSurf..." | Loading text | | theme | 'light' \| 'dark' \| 'custom' | 'light' | Button theme | | className | string | '' | CSS class name | | style | React.CSSProperties | {} | Inline styles | | disabled | boolean | false | Disable button | | timeout | number | 3000 | App launch timeout (ms) | | customDeeplinkScheme | string | 'zerosurf' | Custom deeplink scheme | | customChallenge | string | auto-generated | Custom challenge string | | enableAnalytics | boolean | false | Enable event tracking |

Types

interface VerificationResult {
  verified: boolean;
  proof?: string;
  timestamp: number;
}

Styling

Themes

// Light theme (default)
<ZeroSurfButton theme="light" />

// Dark theme
<ZeroSurfButton theme="dark" />

// Custom styling
<ZeroSurfButton 
  theme="custom"
  style={{
    background: 'linear-gradient(45deg, #purple, #pink)',
    color: 'white',
    borderRadius: '20px'
  }}
/>

CSS Classes

<ZeroSurfButton 
  className="my-custom-button"
  style={{ width: '100%' }}
/>

Advanced Usage

Custom Analytics

<ZeroSurfButton
  enableAnalytics={true}
  onSuccess={(result) => {
    // your analytics
    gtag('event', 'age_verification_success');
  }}
/>

Custom Deeplink Scheme

<ZeroSurfButton
  customDeeplinkScheme="myapp"
  customChallenge="custom-verification-id"
/>

Error Handling

<ZeroSurfButton
  onError={(error) => {
    if (error.message.includes('install')) {
      // show app installation instructions
      showAppInstallModal();
    } else {
      // handle other errors
      showErrorMessage(error.message);
    }
  }}
/>

Utility Functions

import { 
  createDeeplinkUrl, 
  parseVerificationResult,
  isMobileDevice 
} from 'zerosurf-age-verify-button';

// create custom deeplink
const url = createDeeplinkUrl('https://mysite.com', 'my-challenge');

// check if on mobile
if (isMobileDevice()) {
  // show mobile-specific UI
}

// manually parse verification result
const result = parseVerificationResult();

Requirements

• React 16.8+
• ZeroSurf mobile app installed on user's device
• Website must be served over HTTPS (required for deeplinks)

Browser Support

• Chrome 70+
• Firefox 65+
• Safari 12+
• Edge 79+

Security Notes

• Zero personal data is transmitted to your website
• Only age verification (18+) status and proof hash are shared
• Proof is cryptographically verifiable but reveals no identity
• No tracking or storage of user information

License

MIT

Support

• GitHub Issues
• Documentation
• ZeroSurf App

Made with ❤️ by the bluntbrain