Evrmore Authentication Demo

This demo shows how Evrmore Accounts works. Sign in with your Evrmore wallet to test the authentication flow.

Sign in with Evrmore

Don't have an Evrmore wallet? Get one here

API Documentation

The Evrmore Accounts API provides endpoints for authentication and user management.

Generate a Challenge

POST /api/challenge
Generate a challenge for a user to sign with their Evrmore wallet.
Request 
{
  "evrmore_address": "EViF16aYCetDH56MyKCcxfyeZ3F7Ao7ZBc"
}
Response 
{
  "challenge_text": "Sign this message to authenticate with Evrmore: EViF16aYCetDH56MyKCcxfyeZ3F7Ao7ZBc:1741810666:3fa805f556befabe",
  "expires_at": "2025-03-12T16:27:46.900042"
}

Try it

Authenticate

POST /api/authenticate
Authenticate a user with a signed challenge.
Request 
{
  "evrmore_address": "EViF16aYCetDH56MyKCcxfyeZ3F7Ao7ZBc",
  "challenge_text": "Sign this message to authenticate with Evrmore: EViF16aYCetDH56MyKCcxfyeZ3F7Ao7ZBc:1741810666:3fa805f556befabe",
  "signature": "H1MP+CwatCUG9YyTlMK5qNZQpShEHZdqkIFFV/gnoa9WW/TcMwSEPu1lNIrVgzAOQBm2ACNVgYCYsI+X/Fiy4j4="
}
Response 
{
  "token": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...",
  "expires_at": "2025-03-19T16:27:46.900042",
  "user": {
    "id": "60e0df21-820b-4771-ad5b-ca621bfe7e31",
    "evrmore_address": "EViF16aYCetDH56MyKCcxfyeZ3F7Ao7ZBc"
  }
}

Try it

Validate Token

POST /api/validate
Validate a JWT token.
Request 
{
  "token": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9..."
}
Response 
{
  "valid": true,
  "user_id": "60e0df21-820b-4771-ad5b-ca621bfe7e31",
  "evrmore_address": "EViF16aYCetDH56MyKCcxfyeZ3F7Ao7ZBc",
  "expires_at": "2025-03-19T16:27:46.900042"
}

Try it

Integration Guide

Follow these steps to integrate Evrmore Accounts into your web application.

1. Include the necessary files

Add the Evrmore Accounts JavaScript and CSS files to your HTML:

HTML 
<link rel="stylesheet" href="https://your-server.com/static/style.css">
<script src="https://your-server.com/static/accounts.js"></script>

2. Add an authentication button

Add a button for users to sign in with Evrmore:

HTML 
<button id="evrmoreSignIn" class="auth-signin-button">
  <img src="https://your-server.com/static/evrmore-logo.svg" alt="Evrmore">
  <span>Sign in with Evrmore</span>
</button>

3. Initialize the library

Initialize the Evrmore Accounts library:

JavaScript 
document.addEventListener('DOMContentLoaded', function() {
  // Initialize the library
  const evrmoreAccounts = EvrmoreAccounts.init({
    apiUrl: 'https://your-server.com/api',
    debug: false
  });
  
  // Initialize the sign-in button
  evrmoreAccounts.initSignInButton('#evrmoreSignIn');
  
  // Initialize the sign-out button (if available)
  evrmoreAccounts.initSignOutButton('#evrmoreSignOut');
  
  // Listen for authentication state changes
  evrmoreAccounts.onAuthStateChanged(function(user) {
    if (user) {
      console.log('User is signed in:', user);
      // Show user profile or authenticated UI
    } else {
      console.log('User is signed out');
      // Show sign-in UI
    }
  });
});

4. Handle authentication state

Update your UI based on authentication state:

JavaScript 
function updateUIForUser(user) {
  if (user) {
    // User is signed in
    document.getElementById('signInSection').classList.add('hidden');
    
    // Show profile section
    const profileSection = document.getElementById('profileSection');
    profileSection.classList.remove('hidden');
    
    // Update profile information
    document.getElementById('profileUsername').textContent = 
      user.username || `User ${user.id.substring(0, 8)}`;
    document.getElementById('profileAddress').textContent = user.evrmore_address;
    document.getElementById('profileImage').textContent = 
      (user.username || 'E').charAt(0).toUpperCase();
  } else {
    // User is signed out
    document.getElementById('signInSection').classList.remove('hidden');
    document.getElementById('profileSection').classList.add('hidden');
  }
}

// Use this function with the auth state change listener
evrmoreAccounts.onAuthStateChanged(updateUIForUser);