guides · January 8, 2025

How to Integrate Age Verification in 5 Minutes

A step-by-step guide to adding Xident age verification to your website using our JavaScript SDK.

Xident Team

Author

Adding age verification to your website doesn’t have to be complicated. In this guide, we’ll walk through integrating Xident in under 5 minutes.

Prerequisites

A Xident account (sign up free)
Your API key from the dashboard
A website where you want to add verification

Step 1: Install the SDK

Add the Xident SDK to your page:

<script src="https://cdn.xident.io/sdk/v1/xident.min.js"></script>

Or install via npm:

npm install @xident/sdk

import { Xident } from '@xident/sdk';

Step 2: Initialize

Initialize the SDK with your public API key:

Xident.init({
  apiKey: 'pk_live_your_api_key_here',
  
  // Called when verification succeeds
  onVerified: (result) => {
    console.log('User verified!', result);
    // result.token - Store this for the session
    // result.method - 'full' | 'token' | 'login'
    showProtectedContent();
  },
  
  // Called if verification fails or is cancelled
  onError: (error) => {
    console.error('Verification failed:', error);
  }
});

Step 3: Trigger Verification

Call verify() when you want to verify a user:

// Simple usage
document.getElementById('verify-button').onclick = () => {
  Xident.verify({ minAge: 18 });
};

With more options:

Xident.verify({
  minAge: 18,
  
  // Allow returning users to log in with Xident ID
  allowXidentId: true,
  
  // Customize the UI
  theme: 'light', // 'light' | 'dark' | 'system'
  
  // Your brand
  brandName: 'Your Site Name',
  brandLogo: 'https://yoursite.com/logo.png'
});

Step 4: Handle the Token

When verification succeeds, you receive a token:

onVerified: (result) => {
  // Store token in localStorage for returning users
  localStorage.setItem('xident_token', result.token);
  
  // Optionally verify on your backend
  fetch('/api/verify-age', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ token: result.token })
  });
  
  // Show protected content
  document.getElementById('protected-content').style.display = 'block';
  document.getElementById('age-gate').style.display = 'none';
}

Step 5: Backend Verification (Optional)

For extra security, verify the token on your backend:

// Node.js example
const response = await fetch('https://api.xident.io/v1/tokens/verify', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
    'X-API-Key': process.env.XIDENT_PUBLIC_KEY,
    'X-API-Secret': process.env.XIDENT_SECRET_KEY
  },
  body: JSON.stringify({ token: userToken })
});

const { valid, age_threshold } = await response.json();

if (valid && age_threshold >= 18) {
  // User is verified
}

Complete Example

Here’s a full working example:

<!DOCTYPE html>
<html>
<head>
  <title>Age Verified Content</title>
  <script src="https://cdn.xident.io/sdk/v1/xident.min.js"></script>
</head>
<body>
  <!-- Age Gate -->
  <div id="age-gate">
    <h1>This content is age-restricted</h1>
    <p>You must be 18 or older to access this content.</p>
    <button id="verify-btn">Verify My Age</button>
  </div>
  
  <!-- Protected Content (hidden by default) -->
  <div id="protected-content" style="display: none;">
    <h1>Welcome!</h1>
    <p>You've been verified. Enjoy the content.</p>
  </div>
  
  <script>
    // Check for existing token
    const existingToken = localStorage.getItem('xident_token');
    
    Xident.init({
      apiKey: 'pk_live_your_key',
      
      onVerified: (result) => {
        localStorage.setItem('xident_token', result.token);
        document.getElementById('age-gate').style.display = 'none';
        document.getElementById('protected-content').style.display = 'block';
      },
      
      onError: (error) => {
        alert('Verification failed. Please try again.');
      }
    });
    
    // Auto-verify if returning user
    if (existingToken) {
      Xident.verify({ token: existingToken });
    }
    
    // Manual verification
    document.getElementById('verify-btn').onclick = () => {
      Xident.verify({ minAge: 18, allowXidentId: true });
    };
  </script>
</body>
</html>

React Integration

For React apps:

import { XidentProvider, useXident } from '@xident/react';

function App() {
  return (
    <XidentProvider apiKey="pk_live_your_key">
      <AgeGatedContent />
    </XidentProvider>
  );
}

function AgeGatedContent() {
  const { verify, isVerified, isLoading } = useXident();
  
  if (isLoading) return <div>Checking verification...</div>;
  
  if (!isVerified) {
    return (
      <div>
        <h1>Age Verification Required</h1>
        <button onClick={() => verify({ minAge: 18 })}>
          Verify My Age
        </button>
      </div>
    );
  }
  
  return <ProtectedContent />;
}

Next Steps

Need help? Contact our support team.

#integration #javascript #tutorial #sdk

Share this article