Web Sample Applications

Below are complete web sample applications demonstrating FIDO2 authentication using the Arculus JavaScript SDK (arculusfido.js). These examples are useful for developers building web applications that integrate with the Arculus FIDO2 Server.

Minimal Example

This minimal example shows the essential code to register and authenticate a user without any UI scaffolding or error handling. The Web SDK only supports the client-direct pattern.

<!DOCTYPE html>
<html>
<head>
    <script src="arculusfido.js"></script>
</head>
<body>
    <script>
        // Registration
        async function registerUser() {
            const result = await arculusfido.RegisterUser(
                "[email protected]",           // username
                "My Device",                  // displayName
                { deviceinfo: "Browser" },    // deviceInfo
                "",                           // serverUrlPrefix (empty for same origin)
                "",                           // queryParams
                {}                            // addHeaders
            );
            console.log("Registration:", result);
        }
        
        // Authentication
        async function authenticateUser() {
            const result = await arculusfido.AuthenticateUser(
                "[email protected]",           // username
                "",                           // serverUrlPrefix (empty for same origin)
                "",                           // queryParams
                {}                            // addHeaders
            );
            console.log("Authentication:", result);
        }
        
        // Call functions
        registerUser();
        authenticateUser();
    </script>
</body>
</html>

Complete Sample Applications

The following sections provide complete, production-ready sample applications with full error handling, UI components, and proper integration patterns.

Client-Direct Pattern

A complete HTML/JavaScript example demonstrating direct FIDO2 server communication:

HTML Structure

<!DOCTYPE html>
<html>
<head>
  <title>FIDO2 Authentication</title>
  <script src="arculusfido.js"></script>
</head>
<body>
  <!-- Login Form -->
  <div id="loginForm">
    <h2>Sign In</h2>
    <input type="email" id="email" placeholder="Email address">
    <button onclick="login()">Authenticate</button>
  </div>
  
  <!-- Registration Form -->
  <div id="registerForm">
    <h2>Create Account</h2>
    <input type="email" id="regEmail" placeholder="Email address">
    <input type="text" id="displayName" placeholder="Display Name">
    <button onclick="register()">Register</button>
  </div>

  <script>
    // Configure for cross-platform authenticator (Arculus Card)
    arculusfido.FidoSetPolicy("none", "cross-platform", "required", 0);
    
    async function login() {
      const email = document.getElementById("email").value;
      
      if (!email) {
        alert("Please enter your email");
        return;
      }
      
      const result = await arculusfido.AuthenticateUser(email, "", "", {});
      
      if (result.status) {
        alert("Authentication successful!");
        
        // Extract JWT token if present
        if (result.jwtToken) {
          localStorage.setItem("authToken", result.jwtToken);
        }
        
        window.location.href = "/dashboard";
      } else {
        alert("Authentication failed: " + (result.error || result.result));
      }
    }
    
    async function register() {
      const email = document.getElementById("regEmail").value;
      const displayName = document.getElementById("displayName").value;
      
      if (!email || !displayName) {
        alert("Please fill in all fields");
        return;
      }
      
      const result = await arculusfido.RegisterUser(
        email,
        displayName,
        { deviceinfo: navigator.userAgent },
        "",
        "",
        {}
      );
      
      if (result.status) {
        alert("Registration successful! You can now sign in.");
      } else {
        alert("Registration failed: " + (result.error || result.result));
      }
    }
  </script>
</body>
</html>

Enhanced Example with Error Handling

<!DOCTYPE html>
<html>
<head>
  <title>FIDO2 Authentication</title>
  <script src="arculusfido.js"></script>
  <style>
    body {
      font-family: Arial, sans-serif;
      max-width: 600px;
      margin: 50px auto;
      padding: 20px;
    }
    .form-group {
      margin-bottom: 15px;
    }
    label {
      display: block;
      margin-bottom: 5px;
    }
    input {
      width: 100%;
      padding: 8px;
      box-sizing: border-box;
    }
    button {
      background-color: #007bff;
      color: white;
      padding: 10px 20px;
      border: none;
      border-radius: 4px;
      cursor: pointer;
    }
    button:hover {
      background-color: #0056b3;
    }
    .error {
      color: red;
      margin-top: 10px;
    }
    .success {
      color: green;
      margin-top: 10px;
    }
  </style>
</head>
<body>
  <h1>FIDO2 Authentication Demo</h1>
  
  <!-- Login Form -->
  <div id="loginForm">
    <h2>Sign In</h2>
    <div class="form-group">
      <label for="email">Email address:</label>
      <input type="email" id="email" placeholder="[email protected]">
    </div>
    <button onclick="login()">Authenticate</button>
    <div id="loginStatus"></div>
  </div>
  
  <!-- Registration Form -->
  <div id="registerForm">
    <h2>Create Account</h2>
    <div class="form-group">
      <label for="regEmail">Email address:</label>
      <input type="email" id="regEmail" placeholder="[email protected]">
    </div>
    <div class="form-group">
      <label for="displayName">Display Name:</label>
      <input type="text" id="displayName" placeholder="John Doe">
    </div>
    <button onclick="register()">Register</button>
    <div id="registerStatus"></div>
  </div>

  <script>
    // Configure for cross-platform authenticator (Arculus Card)
    arculusfido.FidoSetPolicy("none", "cross-platform", "required", 0);
    
    async function login() {
      const email = document.getElementById("email").value;
      const statusDiv = document.getElementById("loginStatus");
      
      if (!email) {
        statusDiv.innerHTML = '<div class="error">Please enter your email</div>';
        return;
      }
      
      statusDiv.innerHTML = '<div>Authenticating...</div>';
      
      try {
        const result = await arculusfido.AuthenticateUser(email, "", "", {});
        
        if (result.status) {
          statusDiv.innerHTML = '<div class="success">Authentication successful!</div>';
          
          // Extract JWT token if present
          if (result.jwtToken) {
            localStorage.setItem("authToken", result.jwtToken);
            console.log("JWT token stored");
          }
          
          // Redirect after a short delay
          setTimeout(() => {
            window.location.href = "/dashboard";
          }, 1000);
        } else {
          let errorMsg = "Authentication failed";
          if (result.statuscode === 404) {
            errorMsg = "User not found. Please register first.";
          } else if (result.error) {
            errorMsg = result.error;
          } else if (result.result) {
            errorMsg = result.result;
          }
          statusDiv.innerHTML = `<div class="error">${errorMsg}</div>`;
        }
      } catch (error) {
        statusDiv.innerHTML = `<div class="error">Connection error: ${error.message}</div>`;
      }
    }
    
    async function register() {
      const email = document.getElementById("regEmail").value;
      const displayName = document.getElementById("displayName").value;
      const statusDiv = document.getElementById("registerStatus");
      
      if (!email || !displayName) {
        statusDiv.innerHTML = '<div class="error">Please fill in all fields</div>';
        return;
      }
      
      statusDiv.innerHTML = '<div>Registering...</div>';
      
      try {
        const result = await arculusfido.RegisterUser(
          email,
          displayName,
          { deviceinfo: navigator.userAgent },
          "",
          "",
          {}
        );
        
        if (result.status) {
          statusDiv.innerHTML = '<div class="success">Registration successful! You can now sign in.</div>';
          // Clear form
          document.getElementById("regEmail").value = "";
          document.getElementById("displayName").value = "";
        } else {
          let errorMsg = "Registration failed";
          if (result.error) {
            errorMsg = result.error;
          } else if (result.result) {
            errorMsg = result.result;
          }
          statusDiv.innerHTML = `<div class="error">${errorMsg}</div>`;
        }
      } catch (error) {
        statusDiv.innerHTML = `<div class="error">Connection error: ${error.message}</div>`;
      }
    }
  </script>
</body>
</html>

Multi-Tenant Example

For deployments with multiple relying parties:

// Registration with multi-tenant header
async function registerWithTenant(email, displayName, tenantId) {
  const result = await arculusfido.RegisterUser(
    email,
    displayName,
    { deviceinfo: navigator.userAgent },
    "",
    "",
    {"X-ArculusFido-RelyingParty": tenantId}
  );
  
  return result;
}

// Authentication with multi-tenant header
async function authenticateWithTenant(email, tenantId) {
  const result = await arculusfido.AuthenticateUser(
    email,
    "",
    "",
    {"X-ArculusFido-RelyingParty": tenantId}
  );
  
  return result;
}

Cross-Origin Example

When the FIDO2 Server is on a different domain:

// Configure server URL
const FIDO_SERVER_URL = "https://fido.example.com";

async function registerCrossOrigin(email, displayName) {
  const result = await arculusfido.RegisterUser(
    email,
    displayName,
    { deviceinfo: navigator.userAgent },
    FIDO_SERVER_URL,  // Server URL prefix
    "",
    {}
  );
  
  return result;
}

async function authenticateCrossOrigin(email) {
  const result = await arculusfido.AuthenticateUser(
    email,
    FIDO_SERVER_URL,  // Server URL prefix
    "",
    {}
  );
  
  return result;
}

Backend Implementation

Note: The Web SDK (arculusfido.js) only supports the client-direct pattern, where the web application communicates directly with the FIDO2 Server. There is no backend-proxied pattern for web applications.

The JavaScript SDK handles all FIDO2 Server REST API calls internally. Web developers do not need to implement a backend service for FIDO2 operations - the SDK abstracts all server communication.

If you need backend-proxied functionality for web applications, you would need to:

Build a custom backend service (similar to the Java servlet shown in 5.2 iOS Sample Applications)
Use the browser WebAuthn API directly instead of the arculusfido.js SDK
Have your backend proxy requests to the FIDO2 Server

PreviousDesktop Sample Applications NextPython Sample Applications

Last updated 1 month ago

hashtagMinimal Example

hashtagComplete Sample Applications

hashtagClient-Direct Pattern

hashtagHTML Structure

hashtagEnhanced Example with Error Handling

hashtagMulti-Tenant Example

hashtagCross-Origin Example

hashtagBackend Implementation