Walver.io Authentication Widget Demo

This demo shows how to integrate the Walver.io Authentication Widget into your website, allowing users to authenticate using their blockchain wallets.

Step 1: Include the Script

Add the Walver.io Authentication Widget script to your HTML page:

<script src="https://walver.io/static/js/walver-auth.js"></script>

Step 2: Initialize the Widget

Initialize the widget with your configuration options:

// Optional: Set the base URL (useful for development)
window.walverBaseUrl = 'https://walver.io';

// Initialize the authentication widget
WalverAuth.init({
    buttonText: 'Login with Walver.io', // Optional: Custom button text
    buttonClass: 'walver-auth-button', // Optional: Custom button class
    width: '360px', // Optional: Width of the iframe
    height: '480px', // Optional: Height of the iframe
    serviceName: 'Your Application Name', // Recommended: Your service name for the authentication
    container: '#my-auth-container', // Required: Container element or selector
    onSuccess: function(data) {
        // Handle successful authentication
        console.log('Authentication successful:', data);
        // data contains: wallet_address, signature, message, chain, nonce
        
    },
    onError: function(error) {
        // Handle authentication error
        console.error('Authentication error:', error);
    },
    onCancel: function() {
        // Handle authentication cancellation
        console.log('Authentication cancelled');
    }
});

Live Demo

Integration Guide

After the user successfully authenticates, your onSuccess callback will receive the authentication data with the following properties:

{
    walletAddress: "The user's blockchain wallet address",
    signature: "The signature proving wallet ownership",
    message: "The message that was signed",
    chain: "The blockchain used (e.g., 'solana', 'ethereum')",
    nonce: "The nonce used for the authentication",
    verifiedDomain: "The domain that the user authenticated from"
}

Security Features

The Walver.io Authentication Widget implements several security measures to ensure secure wallet-based authentication:

• Server-side Signature Verification: All signatures are verified on the server, never in the browser.
• Service-specific Messages: Each message includes your service name to prevent phishing.
• Domain Binding: Authentication is bound to your domain to prevent cross-site abuse.
• Time-limited Signatures: Messages expire after 5 minutes for security.
• Nonce Protection: Each authentication attempt uses a unique nonce that can only be used once.
• Origin Validation: Messages are only accepted from authorized origins.
• Content Security Policy: Strict CSP headers protect against XSS attacks.
• IP Monitoring: Rate limiting and suspicious activity detection are implemented.