AeThex-Connect/FRONTEND-INTEGRATION.md

Frontend Integration for aethex.tech

Quick Start

Download and extract aethex-tech-frontend-components.tar.gz to get the React components.

What's Included

components/
├── DomainVerification.jsx      ← Main verification UI
├── DomainVerification.css      
├── VerifiedDomainBadge.jsx     ← Display verified domain badge
└── VerifiedDomainBadge.css

Installation Steps

1. Copy Components

# Extract the archive
tar -xzf aethex-tech-frontend-components.tar.gz

# Copy to your aethex.tech src folder
cp -r components/* /path/to/aethex.tech/src/components/

2. Add to Your Profile/Settings Page

import DomainVerification from '@/components/DomainVerification';
import VerifiedDomainBadge from '@/components/VerifiedDomainBadge';

// In your profile settings section:
function ProfileSettings() {
  return (
    <div>
      <h2>Domain Verification</h2>
      <DomainVerification />
    </div>
  );
}

3. Display Badge on User Profiles

// In profile display component
function UserProfile({ user }) {
  return (
    <div>
      <h1>{user.name}</h1>
      {user.verified_domain && (
        <VerifiedDomainBadge 
          verifiedDomain={user.verified_domain}
          verifiedAt={user.domain_verified_at}
          verificationType="dns"
        />
      )}
    </div>
  );
}

How It Works

1. User clicks "Request Verification"

   • Frontend calls: POST api.aethex.cloud/api/passport/domain/request-verification
   • Gets back DNS TXT record to add

2. User adds TXT record to their DNS

   • Record name: _aethex-verify
   • Record value: aethex-verification=<token>

3. User clicks "Verify Domain"

   • Frontend calls: POST api.aethex.cloud/api/passport/domain/verify
   • Backend checks DNS records
   • If found, domain is verified ✓

4. Badge shows on profile

   • VerifiedDomainBadge component displays verified domain
   • Shows verification date
   • Green checkmark indicates ownership

API Endpoints Used

All endpoints are on api.aethex.cloud:

• POST /api/passport/domain/request-verification - Get verification token
• POST /api/passport/domain/verify - Verify ownership
• GET /api/passport/domain/status - Check current status

Authentication

Components automatically use your existing auth tokens from localStorage:

const token = localStorage.getItem('authToken');

Make sure your auth token is stored with key 'authToken' or update line 26 in DomainVerification.jsx.

Customization

Change API URL

If your API is at a different endpoint:

<DomainVerification apiBaseUrl="https://your-api.com/api/passport/domain" />

Styling

• Edit DomainVerification.css for the verification UI
• Edit VerifiedDomainBadge.css for the badge appearance
• Both use CSS variables for easy theming

Testing

1. Go to your profile settings on aethex.tech
2. Enter a domain you own (e.g., yourdomain.com)
3. Get the TXT record
4. Add it to your DNS (Cloudflare, Google Domains, etc.)
5. Wait 5-10 minutes
6. Click "Verify Domain"
7. Badge appears! ✓

Troubleshooting

"Network error"

• Check that api.aethex.cloud is accessible
• Verify CORS is configured for aethex.tech

"Verification token not found"

• Wait longer (DNS can take 10+ minutes)
• Check TXT record was added correctly: dig _aethex-verify.yourdomain.com TXT

Badge not showing

• Make sure user.verified_domain is populated from your user API
• Check database has verified_domain column on users table

Support

Questions? Check the main INTEGRATION.md in the AeThex-Connect repo.

---

Ready to verify domains! 🚀