@glideidentity/web-client-sdk 5.0.1 → 5.1.1-beta.3

package/dist/core/phone-auth/types.js

@@ -1,4 +1,11 @@
 "use strict";
+/**
+ * Phone Authentication Types
+ *
+ * This file exports the types used by the Phone Auth SDK.
+ * All API types are imported from api-types.ts to ensure consistency.
+ * No backward compatibility - using clean API specification only.
+ */
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     var desc = Object.getOwnPropertyDescriptor(m, k);
@@ -15,7 +22,16 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.AuthStatus = exports.BrowserName = exports.BrowserErrorCode = exports.BrowserError = void 0;
+// ============================================================================
+// RE-EXPORT ALL API TYPES
+// ============================================================================
 __exportStar(require("./api-types"), exports);
+// ============================================================================
+// BROWSER-SPECIFIC TYPES
+// ============================================================================
+/**
+ * Browser error names
+ */
 exports.BrowserError = {
     NOT_ALLOWED: 'NotAllowedError',
     NETWORK: 'NetworkError',
@@ -32,6 +48,9 @@ exports.BrowserError = {
     RANGE: 'RangeError',
     SYNTAX: 'SyntaxError'
 };
+/**
+ * Browser error codes
+ */
 exports.BrowserErrorCode = {
     USER_CANCELLED_DC_API: 19,
     PERMISSION_DENIED: 1,
@@ -42,6 +61,9 @@ exports.BrowserErrorCode = {
     NETWORK: 19,
     SECURITY: 18
 };
+/**
+ * Browser names for detection
+ */
 exports.BrowserName = {
     CHROME: 'Chrome',
     EDGE: 'Edge',
@@ -51,11 +73,21 @@ exports.BrowserName = {
     BRAVE: 'Brave',
     OTHER: 'other'
 };
+/**
+ * Authentication status constants
+ * Maps to both client-side states and backend responses
+ */
 exports.AuthStatus = {
+    /** Authentication in progress */
     PENDING: 'pending',
+    /** Authentication completed successfully */
     COMPLETED: 'completed',
+    /** User cancelled authentication */
     CANCELLED: 'cancelled',
+    /** Authentication failed or expired */
     FAILED: 'failed',
+    /** Session expired (backend returns 410 Gone) */
     EXPIRED: 'expired',
+    /** Session not found (backend returns 404) */
     NOT_FOUND: 'not_found'
 };

package/dist/core/phone-auth/ui/mobile-debug-console.js

@@ -1,4 +1,8 @@
 "use strict";
+/**
+ * Mobile Debug Console
+ * A lightweight console overlay for debugging on mobile devices where dev tools aren't available
+ */
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.MobileDebugConsole = void 0;
 class MobileDebugConsole {
@@ -35,13 +39,15 @@ class MobileDebugConsole {
         ['log', 'error', 'warn', 'debug', 'info'].forEach(method => {
             const originalMethod = this.originalConsole[method];
             console[method] = (...args) => {
+                // Call original
                 originalMethod.apply(console, args);
+                // Add to our display
                 this.addLog(method, args);
             };
         });
     }
     addLog(type, args) {
-        const timestamp = new Date().toTimeString().split(' ')[0];
+        const timestamp = new Date().toTimeString().split(' ')[0]; // HH:MM:SS
         const content = args.map(arg => {
             if (typeof arg === 'object') {
                 try {
@@ -53,6 +59,7 @@ class MobileDebugConsole {
             }
             return String(arg);
         }).join(' ');
+        // Create colored log entry
         const colors = {
             log: '#fff',
             error: '#ff6b6b',
@@ -68,6 +75,7 @@ class MobileDebugConsole {
       </div>
     `;
         this.logs.push(logHtml);
+        // Keep only last 500 logs
         if (this.logs.length > 500) {
             this.logs.shift();
         }
@@ -76,13 +84,17 @@ class MobileDebugConsole {
     updateDisplay() {
         if (!this.logsContainer || !this.isVisible)
             return;
+        // Check if scrolled to bottom before update
         this.isAtBottom = this.logsContainer.scrollHeight - this.logsContainer.scrollTop <= this.logsContainer.clientHeight + 50;
+        // Update content
         this.logsContainer.innerHTML = this.logs.join('');
+        // Auto-scroll only if was at bottom
         if (this.isAtBottom) {
             this.logsContainer.scrollTop = this.logsContainer.scrollHeight;
         }
     }
     createUI() {
+        // Create styles
         const style = document.createElement('style');
         style.textContent = `
       #mobile-debug-console {
@@ -175,11 +187,13 @@ class MobileDebugConsole {
       }
     `;
         document.head.appendChild(style);
+        // Create container
         this.container = document.createElement('div');
         this.container.id = 'mobile-debug-console';
         if (!this.isVisible) {
             this.container.className = 'hidden';
         }
+        // Create header
         const header = document.createElement('div');
         header.id = 'debug-header';
         const title = document.createElement('div');
@@ -187,12 +201,15 @@ class MobileDebugConsole {
         title.textContent = '📱 Mobile Debug Console';
         const buttons = document.createElement('div');
         buttons.id = 'debug-buttons';
+        // Clear button
         const clearBtn = document.createElement('button');
         clearBtn.textContent = 'Clear';
         clearBtn.onclick = () => this.clear();
+        // Show/Hide button
         const toggleBtn = document.createElement('button');
         toggleBtn.textContent = 'Hide';
         toggleBtn.onclick = () => this.toggle();
+        // Close button
         const closeBtn = document.createElement('button');
         closeBtn.textContent = '✕';
         closeBtn.style.color = '#ff6b6b';
@@ -202,20 +219,25 @@ class MobileDebugConsole {
         buttons.appendChild(closeBtn);
         header.appendChild(title);
         header.appendChild(buttons);
+        // Create logs container
         this.logsContainer = document.createElement('div');
         this.logsContainer.id = 'debug-logs';
+        // Track scroll position
         this.logsContainer.addEventListener('scroll', () => {
             this.isAtBottom = this.logsContainer.scrollHeight - this.logsContainer.scrollTop <= this.logsContainer.clientHeight + 50;
         });
+        // Assemble
         this.container.appendChild(header);
         this.container.appendChild(this.logsContainer);
         document.body.appendChild(this.container);
+        // Create floating toggle button
         this.floatingToggle = document.createElement('button');
         this.floatingToggle.id = 'debug-floating-toggle';
-        this.floatingToggle.innerHTML = '🖥️';
+        this.floatingToggle.innerHTML = '🖥️'; // Console icon
         this.floatingToggle.title = 'Show Debug Console';
         this.floatingToggle.onclick = () => this.toggle();
         document.body.appendChild(this.floatingToggle);
+        // Store reference for toggle button
         window.__debugToggleBtn = toggleBtn;
     }
     escapeHtml(text) {
@@ -246,15 +268,19 @@ class MobileDebugConsole {
         }
     }
     cleanup() {
+        // Restore original console
         Object.keys(this.originalConsole).forEach(method => {
             console[method] = this.originalConsole[method];
         });
+        // Remove UI
         if (this.container) {
             this.container.remove();
         }
+        // Remove floating toggle
         if (this.floatingToggle) {
             this.floatingToggle.remove();
         }
+        // Clean up references
         delete window.__debugToggleBtn;
     }
 }

package/dist/core/phone-auth/ui/modal.d.ts

@@ -2,19 +2,20 @@
  * Modal UI Component for Phone Authentication
  *
  * This file creates the UI components (modals, buttons) that are shown
- * when the SDK is NOT in headless mode.
+ * when the SDK is NOT in headless mode. Think of it like a popup window
+ * that handles the authentication flow for you.
  */
 import type { InvokeOptions } from '../api-types';
 import type { QRCodeData } from '../strategies/desktop';
-export type ModalViewMode = 'toggle' | 'dual' | 'pre-step';
-export type ModalTheme = 'dark' | 'light' | 'auto';
-export type AuthModalOptions = NonNullable<InvokeOptions['modalOptions']> & {
-    viewMode?: ModalViewMode;
-    /** Modal theme: 'dark', 'light', or 'auto' (uses system preference) */
-    theme?: ModalTheme;
-};
 /**
  * Creates and manages a modal dialog for authentication
+ *
+ * @example
+ * const modal = new AuthModal({
+ *   title: "Verify Your Phone",
+ *   description: "Complete authentication to continue"
+ * });
+ * modal.show();
  */
 export declare class AuthModal {
     private container;
@@ -23,44 +24,65 @@ export declare class AuthModal {
     private options;
     private callbacks;
     private closeCallback?;
-    private theme;
-    private currentStep;
-    private qrCodeData;
-    private statusMessage;
-    private originalBodyOverflow;
-    private isClosing;
-    private readonly iconApple;
-    private readonly iconAndroid;
-    private readonly iconBack;
-    constructor(options?: AuthModalOptions, callbacks?: InvokeOptions['callbacks']);
+    constructor(options?: InvokeOptions['modalOptions'], callbacks?: InvokeOptions['callbacks']);
+    private handleEscapeKey;
     /**
-     * Determines if dark mode should be used based on theme setting
+     * Escape HTML to prevent XSS attacks
      */
-    private shouldUseDarkMode;
-    private handleEscapeKey;
     private escapeHtml;
     /**
-     * Shows the modal with a QR code
+     * Shows the modal with a QR code for desktop authentication
+     * Supports both single QR code (legacy) and dual-platform QR codes (iOS + Android)
      */
     showQRCode(qrCodeData: string | QRCodeData, statusMessage?: string): void;
     /**
-     * Updates the status message shown in the modal
+     * Creates a modal with iOS/Android platform toggle
+     */
+    private createDualPlatformQRModal;
+    /**
+     * Sets a callback to be called when the modal is cancelled/closed
      */
-    updateStatus(status: string, isError?: boolean): void;
     setCloseCallback(callback: () => void): void;
-    private renderToggleMode;
-    private renderDualMode;
-    private renderPreStepMode;
-    private setupPreStepListeners;
-    private updatePreStepUI;
-    private setupBackButton;
+    /**
+     * Shows the modal with a button for Link authentication (App Clips)
+     * IMPORTANT: The button click is required for iOS to recognize the app link
+     */
+    showLinkButton(url: string, buttonText?: string): Promise<void>;
+    /**
+     * Shows the modal with a button for TS43 authentication
+     * IMPORTANT: The button click is required for Digital Credentials API (transient activation)
+     */
+    showTS43Button(onAuthenticate: () => Promise<any>): Promise<any>;
+    /**
+     * Updates the status message in the modal
+     */
+    updateStatus(message: string, isError?: boolean): void;
+    /**
+     * Creates the modal HTML structure
+     */
     private createModal;
-    private setupHelpInteraction;
+    /**
+     * Injects CSS styles for the modal
+     */
     private injectStyles;
+    /**
+     * Shows the modal with animation
+     */
     show(): void;
+    /**
+     * Setup click handlers for iOS/Android platform toggle
+     */
     private setupPlatformToggles;
-    private lockBodyScroll;
-    private unlockBodyScroll;
+    /**
+     * Closes the modal with animation
+     */
     close(): void;
+    /**
+     * Removes modal elements from DOM
+     */
     private cleanup;
+    /**
+     * Check if modal is currently open
+     */
+    isModalOpen(): boolean;
 }