npm - @authbridge/web-sdk - Versions diffs - 1.2.2 - Mend

@authbridge/web-sdk 1.2.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (365) hide show

package/dist/index.html ADDED Viewed

@@ -0,0 +1,610 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover" />
+    <link rel="icon" type="image/png" href="/authbridge-logo.png" />
+    <meta name="theme-color" content="#7C3AED" />
+    <!-- SEO Meta Tags -->
+    <meta name="description" content="AuthBridge Identity Verification SDK - Secure KYC/KYB verification for Botswana. Try our demo or integrate into your application." />
+    <meta name="keywords" content="AuthBridge, KYC, KYB, identity verification, Botswana, Omang, biometric, liveness detection" />
+    <!-- Open Graph -->
+    <meta property="og:title" content="AuthBridge - Identity Verification SDK" />
+    <meta property="og:description" content="Secure identity verification for Botswana. KYC/KYB compliance made simple." />
+    <meta property="og:image" content="https://sdk.authbridge.io/authbridge-logo.png" />
+    <meta property="og:url" content="https://sdk.authbridge.io" />
+    <meta property="og:type" content="website" />
+    <!-- PWA Manifest -->
+    <link rel="manifest" href="/manifest.json" />
+    <!-- iOS PWA Support -->
+    <meta name="apple-mobile-web-app-capable" content="yes" />
+    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
+    <meta name="apple-mobile-web-app-title" content="AuthBridge Verify" />
+    <link rel="apple-touch-icon" href="/icons/apple-touch-icon.png" />
+    <title>AuthBridge - Identity Verification SDK</title>
+    <style>
+      /* CSS Variables - Dark Confidence Theme */
+      :root {
+        --obsidian: #0A0F1A;
+        --void: #050810;
+        --ultraviolet: #7C3AED;
+        --ultraviolet-light: #A78BFA;
+        --electric-cyan: #06B6D4;
+        --emerald: #10B981;
+        --slate-200: #E2E8F0;
+        --slate-300: #CBD5E1;
+        --slate-400: #94A3B8;
+        --slate-500: #64748B;
+        --slate-600: #475569;
+        --slate-800: #1E293B;
+        --slate-900: #0F172A;
+      }
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      html, body {
+        height: 100%;
+        font-family: 'Avenir', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+        background: var(--obsidian);
+        color: var(--slate-200);
+        line-height: 1.6;
+      }
+      /* Avenir Font */
+      @font-face {
+        font-family: 'Avenir';
+        src: url('/fonts/Avenir-Book.ttf') format('truetype');
+        font-weight: 400;
+        font-style: normal;
+        font-display: swap;
+      }
+      @font-face {
+        font-family: 'Avenir';
+        src: url('/fonts/Avenir-Heavy.ttf') format('truetype');
+        font-weight: 800;
+        font-style: normal;
+        font-display: swap;
+      }
+      .container {
+        min-height: 100vh;
+        display: flex;
+        flex-direction: column;
+      }
+      /* Header */
+      header {
+        padding: 20px 40px;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        border-bottom: 1px solid var(--slate-800);
+      }
+      .logo {
+        display: flex;
+        align-items: center;
+        gap: 12px;
+        text-decoration: none;
+        color: var(--slate-200);
+      }
+      .logo img {
+        height: 40px;
+        width: auto;
+      }
+      .logo-text {
+        font-size: 24px;
+        font-weight: 800;
+        background: linear-gradient(135deg, var(--ultraviolet), var(--electric-cyan));
+        -webkit-background-clip: text;
+        -webkit-text-fill-color: transparent;
+        background-clip: text;
+      }
+      nav {
+        display: flex;
+        gap: 24px;
+        align-items: center;
+      }
+      nav a {
+        color: var(--slate-400);
+        text-decoration: none;
+        font-size: 14px;
+        transition: color 0.2s;
+      }
+      nav a:hover {
+        color: var(--electric-cyan);
+      }
+      /* Hero Section */
+      .hero {
+        flex: 1;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        padding: 60px 40px;
+        gap: 80px;
+      }
+      .hero-content {
+        max-width: 500px;
+      }
+      .hero h1 {
+        font-size: 48px;
+        font-weight: 800;
+        line-height: 1.2;
+        margin-bottom: 24px;
+      }
+      .hero h1 span {
+        background: linear-gradient(135deg, var(--ultraviolet), var(--electric-cyan));
+        -webkit-background-clip: text;
+        -webkit-text-fill-color: transparent;
+        background-clip: text;
+      }
+      .hero p {
+        font-size: 18px;
+        color: var(--slate-400);
+        margin-bottom: 32px;
+      }
+      .hero-buttons {
+        display: flex;
+        gap: 16px;
+        flex-wrap: wrap;
+      }
+      .btn {
+        padding: 14px 28px;
+        border-radius: 8px;
+        font-size: 16px;
+        font-weight: 600;
+        text-decoration: none;
+        cursor: pointer;
+        transition: all 0.2s;
+        border: none;
+        display: inline-flex;
+        align-items: center;
+        gap: 8px;
+      }
+      .btn-primary {
+        background: var(--ultraviolet);
+        color: white;
+      }
+      .btn-primary:hover {
+        background: var(--ultraviolet-light);
+        transform: translateY(-2px);
+        box-shadow: 0 8px 30px rgba(124, 58, 237, 0.3);
+      }
+      .btn-secondary {
+        background: transparent;
+        color: var(--slate-300);
+        border: 1px solid var(--slate-600);
+      }
+      .btn-secondary:hover {
+        border-color: var(--electric-cyan);
+        color: var(--electric-cyan);
+      }
+      /* Demo Preview */
+      .demo-preview {
+        width: 380px;
+        height: 680px;
+        background: var(--slate-900);
+        border-radius: 24px;
+        border: 1px solid var(--slate-800);
+        overflow: hidden;
+        box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
+        position: relative;
+      }
+      .demo-preview::before {
+        content: '';
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        background: linear-gradient(135deg, rgba(124, 58, 237, 0.1), rgba(6, 182, 212, 0.1));
+        pointer-events: none;
+      }
+      #sdk-container {
+        width: 100%;
+        height: 100%;
+      }
+      /* Features Section */
+      .features {
+        padding: 80px 40px;
+        background: var(--void);
+      }
+      .features h2 {
+        text-align: center;
+        font-size: 32px;
+        margin-bottom: 48px;
+      }
+      .features-grid {
+        display: grid;
+        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+        gap: 32px;
+        max-width: 1200px;
+        margin: 0 auto;
+      }
+      .feature-card {
+        background: var(--slate-900);
+        border: 1px solid var(--slate-800);
+        border-radius: 16px;
+        padding: 32px;
+        transition: all 0.2s;
+      }
+      .feature-card:hover {
+        border-color: var(--ultraviolet);
+        transform: translateY(-4px);
+      }
+      .feature-icon {
+        width: 48px;
+        height: 48px;
+        background: linear-gradient(135deg, var(--ultraviolet), var(--electric-cyan));
+        border-radius: 12px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-size: 24px;
+        margin-bottom: 16px;
+      }
+      .feature-card h3 {
+        font-size: 20px;
+        margin-bottom: 12px;
+      }
+      .feature-card p {
+        color: var(--slate-400);
+        font-size: 14px;
+      }
+      /* Footer */
+      footer {
+        padding: 40px;
+        border-top: 1px solid var(--slate-800);
+        text-align: center;
+        color: var(--slate-500);
+        font-size: 14px;
+      }
+      footer a {
+        color: var(--electric-cyan);
+        text-decoration: none;
+      }
+      /* Responsive */
+      @media (max-width: 1024px) {
+        .hero {
+          flex-direction: column;
+          text-align: center;
+        }
+        .hero-buttons {
+          justify-content: center;
+        }
+        .demo-preview {
+          width: 100%;
+          max-width: 380px;
+        }
+      }
+      @media (max-width: 640px) {
+        header {
+          padding: 16px 20px;
+          flex-direction: column;
+          gap: 16px;
+        }
+        .hero {
+          padding: 40px 20px;
+        }
+        .hero h1 {
+          font-size: 32px;
+        }
+        .features {
+          padding: 60px 20px;
+        }
+      }
+      /* Loading State */
+      .loader-container {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        height: 100%;
+        background: var(--obsidian);
+      }
+      .loader {
+        width: 48px;
+        height: 48px;
+        border: 3px solid var(--slate-800);
+        border-top-color: var(--ultraviolet);
+        border-radius: 50%;
+        animation: spin 1s linear infinite;
+      }
+      @keyframes spin {
+        to { transform: rotate(360deg); }
+      }
+    </style>
+  </head>
+  <body>
+    <div class="container">
+      <header>
+        <a href="/" class="logo">
+          <img src="/authbridge-logo.png" alt="AuthBridge" />
+          <span class="logo-text">AuthBridge</span>
+        </a>
+        <nav>
+          <a href="https://docs.authbridge.io" target="_blank">Documentation</a>
+          <a href="https://docs.authbridge.io/api-reference/overview" target="_blank">API Reference</a>
+          <a href="https://app.authbridge.io" target="_blank">Dashboard</a>
+          <a href="https://docs.authbridge.io/guides/web-sdk" target="_blank" class="btn btn-secondary">Get Started</a>
+        </nav>
+      </header>
+      <main class="hero">
+        <div class="hero-content">
+          <h1>Identity Verification <span>Made Simple</span></h1>
+          <p>Secure KYC/KYB verification for Botswana. Verify Omang, passports, and business documents with AI-powered OCR and biometric liveness detection.</p>
+          <div class="hero-buttons">
+            <button class="btn btn-primary" onclick="startDemo()">
+              <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                <polygon points="5 3 19 12 5 21 5 3"></polygon>
+              </svg>
+              Try Demo
+            </button>
+            <a href="https://docs.authbridge.io/quickstart" target="_blank" class="btn btn-secondary">
+              View Documentation
+            </a>
+          </div>
+        </div>
+        <div class="demo-preview">
+          <div id="sdk-container">
+            <div class="loader-container">
+              <div class="loader"></div>
+            </div>
+          </div>
+        </div>
+      </main>
+      <section class="features">
+        <h2>Why AuthBridge?</h2>
+        <div class="features-grid">
+          <div class="feature-card">
+            <div class="feature-icon">🇧🇼</div>
+            <h3>Built for Botswana</h3>
+            <p>Native support for Omang ID cards with specialized OCR extraction. Compliant with Data Protection Act 2024.</p>
+          </div>
+          <div class="feature-card">
+            <div class="feature-icon">🔒</div>
+            <h3>Liveness Detection</h3>
+            <p>AWS Rekognition-powered face liveness prevents spoofing attacks. 99%+ accuracy in detecting real users.</p>
+          </div>
+          <div class="feature-card">
+            <div class="feature-icon">⚡</div>
+            <h3>Fast Integration</h3>
+            <p>Add verification to your app in minutes. Simple JavaScript SDK with React, Vue, and vanilla JS support.</p>
+          </div>
+          <div class="feature-card">
+            <div class="feature-icon">🎨</div>
+            <h3>White-Label Ready</h3>
+            <p>Fully customizable UI with your brand colors, logos, and styling. Seamless user experience.</p>
+          </div>
+          <div class="feature-card">
+            <div class="feature-icon">📊</div>
+            <h3>Real-Time Dashboard</h3>
+            <p>Monitor verifications, review cases, and generate compliance reports from a single dashboard.</p>
+          </div>
+          <div class="feature-card">
+            <div class="feature-icon">🌍</div>
+            <h3>Multi-Language</h3>
+            <p>Support for English and Setswana. Easily add more languages with our translation system.</p>
+          </div>
+        </div>
+      </section>
+      <footer>
+        <p>© 2026 AuthBridge. All rights reserved. | <a href="https://docs.authbridge.io">Documentation</a> | <a href="mailto:support@authbridge.io">Support</a></p>
+      </footer>
+    </div>
+    <!-- SDK Script - UMD build for browser compatibility -->
+    <script src="/authbridge-sdk.umd.cjs" type="text/javascript"></script>
+    <script>
+      // Demo configuration - loaded from environment or defaults
+      const SDK_CONFIG = {
+        apiUrl: window.AUTHBRIDGE_API_URL || 'https://api.authbridge.io',
+        clientId: window.AUTHBRIDGE_CLIENT_ID || 'demo-client-' + Date.now(),
+      };
+      const demoConfig = {
+        endUserInfo: {
+          id: 'demo-user-' + Date.now(),
+          firstName: 'Demo',
+          lastName: 'User'
+        },
+        backendConfig: {
+          baseUrl: SDK_CONFIG.apiUrl,
+          auth: {
+            clientId: SDK_CONFIG.clientId
+          }
+        },
+        uiConfig: {
+          general: {
+            colors: {
+              primary: '#7C3AED',
+            },
+          },
+          flows: {
+            'demo-kyc-flow': {
+              steps: [
+                { name: 'welcome', id: 'welcome' },
+                {
+                  name: 'document-selection',
+                  id: 'document-selection',
+                  documentOptions: ['id_card', 'drivers_license', 'passport']
+                },
+                { name: 'document-photo', id: 'document-photo' },
+                { name: 'check-document', id: 'check-document' },
+                { name: 'document-photo-back-start', id: 'document-photo-back-start' },
+                { name: 'document-photo-back', id: 'document-photo-back' },
+                { name: 'check-document-photo-back', id: 'check-document-photo-back' },
+                { name: 'selfie-start', id: 'selfie-start' },
+                { name: 'selfie', id: 'selfie' },
+                { name: 'check-selfie', id: 'check-selfie' },
+                { name: 'loading', id: 'loading' },
+                { name: 'final', id: 'final' }
+              ]
+            }
+          }
+        },
+        translations: {
+          overrides: {
+            en: {
+              welcome: {
+                title: 'Welcome to AuthBridge Demo',
+                description: 'Experience our identity verification flow. This is a demo - no data is stored.'
+              }
+            }
+          }
+        }
+      };
+      // SDK initialization state
+      let sdkInitialized = false;
+      let initRetryCount = 0;
+      const MAX_RETRIES = 3;
+      // Error display helper
+      function showError(message, canRetry = true) {
+        const container = document.getElementById('sdk-container');
+        container.innerHTML = `
+          <div style="display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; padding: 40px; text-align: center; color: #94A3B8;">
+            <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="#EF4444" stroke-width="2" style="margin-bottom: 16px;">
+              <circle cx="12" cy="12" r="10"></circle>
+              <line x1="12" y1="8" x2="12" y2="12"></line>
+              <line x1="12" y1="16" x2="12.01" y2="16"></line>
+            </svg>
+            <p style="margin-bottom: 8px; color: #EF4444; font-weight: 600;">Failed to load SDK</p>
+            <p style="margin-bottom: 16px; font-size: 14px;">${message}</p>
+            ${canRetry ? `<button onclick="retryInit()" style="padding: 12px 24px; background: #7C3AED; color: white; border: none; border-radius: 8px; cursor: pointer; font-size: 16px;">
+              Retry
+            </button>` : ''}
+          </div>
+        `;
+      }
+      // Retry initialization
+      window.retryInit = async function() {
+        initRetryCount++;
+        if (initRetryCount > MAX_RETRIES) {
+          showError('Maximum retries exceeded. Please refresh the page.', false);
+          return;
+        }
+        await initializeSDK();
+      };
+      // Initialize SDK when page loads
+      async function initializeSDK() {
+        try {
+          const SDK = window.AuthBridgeSDK;
+          if (!SDK) {
+            throw new Error('SDK not loaded - check network connection');
+          }
+          await SDK.flows.init(demoConfig);
+          sdkInitialized = true;
+          // Auto-start the demo in the preview container
+          await SDK.flows.mount('demo-kyc-flow', 'sdk-container', {
+            callbacks: {
+              onFlowComplete: (payload) => {
+                console.log('Demo flow completed:', payload);
+                alert('Demo completed! In production, this would submit to your backend.');
+              },
+              onFlowExit: () => {
+                console.log('Demo flow exited');
+              },
+              onFlowError: (error) => {
+                console.error('Demo flow error:', error);
+                showError(error.message || 'An error occurred during verification');
+              }
+            }
+          });
+        } catch (error) {
+          console.error('Failed to initialize SDK demo:', error);
+          showError(error.message || 'Unknown error occurred');
+        }
+      }
+      // Initialize on DOM ready
+      window.addEventListener('DOMContentLoaded', initializeSDK);
+      // Start demo function (called by button)
+      window.startDemo = async function() {
+        if (sdkInitialized) {
+          // SDK already initialized, just remount
+          try {
+            const SDK = window.AuthBridgeSDK;
+            await SDK.flows.mount('demo-kyc-flow', 'sdk-container', {
+              callbacks: {
+                onFlowComplete: (payload) => {
+                  console.log('Demo flow completed:', payload);
+                  alert('Demo completed successfully!');
+                },
+                onFlowError: (error) => {
+                  console.error('Demo flow error:', error);
+                  showError(error.message || 'An error occurred');
+                }
+              }
+            });
+          } catch (error) {
+            console.error('Failed to start demo:', error);
+            showError(error.message || 'Failed to start demo');
+          }
+          return;
+        }
+        // Initialize and start
+        await initializeSDK();
+      };
+    </script>
+  </body>
+</html>

package/dist/lib/atoms/Button/Button.svelte.d.ts ADDED Viewed

	@@ -0,0 +1 @@
1	+ export { SvelteComponent as default } from 'svelte';

package/dist/lib/atoms/Button/Button.test.d.ts ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ export {};
2	+ //# sourceMappingURL=Button.test.d.ts.map

package/dist/lib/atoms/Button/Button.test.d.ts.map ADDED Viewed

	@@ -0,0 +1 @@
1	+ {"version":3,"file":"Button.test.d.ts","sourceRoot":"","sources":["../../../../src/lib/atoms/Button/Button.test.ts"],"names":[],"mappings":""}

package/dist/lib/atoms/Button/index.d.ts ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ export { default as Button } from './Button.svelte';
2	+ //# sourceMappingURL=index.d.ts.map

package/dist/lib/atoms/Button/index.d.ts.map ADDED Viewed

	@@ -0,0 +1 @@
1	+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/lib/atoms/Button/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,iBAAiB,CAAC"}

package/dist/lib/atoms/ButtonWithIcon/ButtonWithIcon.svelte.d.ts ADDED Viewed

	@@ -0,0 +1 @@
1	+ export { SvelteComponent as default } from 'svelte';

package/dist/lib/atoms/ButtonWithIcon/index.d.ts ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ export { default as ButtonWithIcon } from './ButtonWithIcon.svelte';
2	+ //# sourceMappingURL=index.d.ts.map

package/dist/lib/atoms/ButtonWithIcon/index.d.ts.map ADDED Viewed

	@@ -0,0 +1 @@
1	+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/lib/atoms/ButtonWithIcon/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,yBAAyB,CAAC"}

package/dist/lib/atoms/CameraButton/CameraButton.svelte.d.ts ADDED Viewed

	@@ -0,0 +1 @@
1	+ export { SvelteComponent as default } from 'svelte';

package/dist/lib/atoms/CameraButton/index.d.ts ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ export { default as CameraButton } from './CameraButton.svelte';
2	+ //# sourceMappingURL=index.d.ts.map

package/dist/lib/atoms/CameraButton/index.d.ts.map ADDED Viewed

	@@ -0,0 +1 @@
1	+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/lib/atoms/CameraButton/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,uBAAuB,CAAC"}

package/dist/lib/atoms/Container/Container.svelte.d.ts ADDED Viewed

	@@ -0,0 +1 @@
1	+ export { SvelteComponent as default } from 'svelte';

package/dist/lib/atoms/Container/index.d.ts ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ export { default as Container } from './Container.svelte';
2	+ //# sourceMappingURL=index.d.ts.map

package/dist/lib/atoms/Container/index.d.ts.map ADDED Viewed

	@@ -0,0 +1 @@
1	+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/lib/atoms/Container/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,oBAAoB,CAAC"}

package/dist/lib/atoms/DocumentOption/DocumentOption.svelte.d.ts ADDED Viewed

	@@ -0,0 +1 @@
1	+ export { SvelteComponent as default } from 'svelte';

package/dist/lib/atoms/DocumentOption/index.d.ts ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ export { default as DocumentOption } from './DocumentOption.svelte';
2	+ //# sourceMappingURL=index.d.ts.map

package/dist/lib/atoms/DocumentOption/index.d.ts.map ADDED Viewed

	@@ -0,0 +1 @@
1	+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/lib/atoms/DocumentOption/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,yBAAyB,CAAC"}

package/dist/lib/atoms/ErrorText/ErrorText.svelte.d.ts ADDED Viewed

	@@ -0,0 +1 @@
1	+ export { SvelteComponent as default } from 'svelte';

package/dist/lib/atoms/ErrorText/index.d.ts ADDED Viewed

	@@ -0,0 +1 @@
1	+ //# sourceMappingURL=index.d.ts.map

package/dist/lib/atoms/ErrorText/index.d.ts.map ADDED Viewed

	@@ -0,0 +1 @@
1	+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/lib/atoms/ErrorText/index.ts"],"names":[],"mappings":""}

package/dist/lib/atoms/FaceOval/FaceOval.svelte.d.ts ADDED Viewed

	@@ -0,0 +1 @@
1	+ export { SvelteComponent as default } from 'svelte';

package/dist/lib/atoms/FaceOval/index.d.ts ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ export { default as FaceOval } from './FaceOval.svelte';
2	+ //# sourceMappingURL=index.d.ts.map