@glideidentity/web-client-sdk 5.1.2 → 6.0.0-beta.1

package/dist/esm/core/{phone-auth/validation-utils.js → validators.js}

@@ -1,18 +1,30 @@
 /**
- * Validation utilities for phone authentication
+ * Validation utilities for phone authentication.
+ *
+ * Pure functions with no runtime dependencies.
+ * All validators return { valid: boolean; error?: string }.
  */
-import { USE_CASE } from './api-types';
+import { USE_CASE } from './types';
+/** E.164 phone number regex */
+export const E164_REGEX = /^\+[1-9]\d{1,14}$/;
 /**
- * Validates E.164 phone number format
+ * Validates E.164 phone number format.
+ *
  * @param phoneNumber - Phone number to validate
  * @returns Validation result with error if invalid
+ *
+ * @example
+ * ```typescript
+ * const result = validatePhoneNumber('+14155551234');
+ * if (!result.valid) {
+ *   console.error(result.error);
+ * }
+ * ```
  */
 export function validatePhoneNumber(phoneNumber) {
     if (!phoneNumber) {
         return { valid: true }; // Phone number is optional for GetPhoneNumber
     }
-    // E.164 format validation - strict, no cleaning
-    const e164Regex = /^\+[1-9]\d{1,14}$/;
     if (!phoneNumber.startsWith('+')) {
         return {
             valid: false,
@@ -31,14 +43,14 @@ export function validatePhoneNumber(phoneNumber) {
             error: 'Phone number too long for E.164 format (maximum 15 digits after +)'
         };
     }
-    // Check for any invalid characters (spaces, dashes, parentheses, etc.)
+    // Check for invalid characters (spaces, dashes, parentheses, etc.)
     if (!/^\+\d+$/.test(phoneNumber)) {
         return {
             valid: false,
             error: 'Phone number contains invalid characters. E.164 format only allows + followed by digits'
         };
     }
-    if (!e164Regex.test(phoneNumber)) {
+    if (!E164_REGEX.test(phoneNumber)) {
         return {
             valid: false,
             error: 'Invalid E.164 phone number format'
@@ -47,7 +59,11 @@ export function validatePhoneNumber(phoneNumber) {
     return { valid: true };
 }
 /**
- * Validates PLMN (MCC/MNC) values
+ * Validates PLMN (MCC/MNC) values.
+ *
+ * @deprecated PLMN validation will be removed with PLMN support.
+ * TODO: Remove in next major version
+ *
  * @param plmn - PLMN object with MCC and MNC
  * @returns Validation result
  */
@@ -70,14 +86,14 @@ export function validatePlmn(plmn) {
             error: 'MNC must be 2 or 3 digits'
         };
     }
-    // No range validation - allowing unofficial MCCs for telco labs
     return { valid: true };
 }
 /**
- * Validates use case and phone number combination
+ * Validates use case and required parameters combination.
+ *
  * @param useCase - The use case
  * @param phoneNumber - The phone number (required for VerifyPhoneNumber)
- * @param hasParentSessionId - Whether parent_session_id is provided (allows skipping normal validation)
+ * @param hasParentSessionId - Whether parent_session_id is provided
  * @returns Validation result
  */
 export function validateUseCaseRequirements(useCase, phoneNumber, hasParentSessionId) {
@@ -91,16 +107,45 @@ export function validateUseCaseRequirements(useCase, phoneNumber, hasParentSessi
     return { valid: true };
 }
 /**
- * Creates a validation error
- * @param code - Error code
- * @param message - Error message
- * @param field - Field that failed validation
+ * Validates nonce format.
+ *
+ * @param nonce - Nonce string to validate
+ * @returns Validation result
+ */
+export function validateNonce(nonce) {
+    const base64urlRegex = /^[A-Za-z0-9_-]+$/;
+    if (!nonce || nonce.length === 0) {
+        return {
+            valid: false,
+            error: 'Nonce is required'
+        };
+    }
+    if (!base64urlRegex.test(nonce)) {
+        return {
+            valid: false,
+            error: 'Nonce must be base64url encoded'
+        };
+    }
+    if (nonce.length < 32 || nonce.length > 128) {
+        return {
+            valid: false,
+            error: 'Nonce must be between 32 and 128 characters'
+        };
+    }
+    return { valid: true };
+}
+/**
+ * Validates session key format.
+ *
+ * @param sessionKey - Session key to validate
+ * @returns Validation result
  */
-export function createValidationError(code, message, field) {
-    const error = new Error(message);
-    error.code = code;
-    if (field) {
-        error.field = field;
+export function validateSessionKey(sessionKey) {
+    if (!sessionKey || sessionKey.length < 16) {
+        return {
+            valid: false,
+            error: 'Session key is required and must be at least 16 characters'
+        };
     }
-    return error;
+    return { valid: true };
 }

package/dist/esm/index.js

@@ -1,17 +1,45 @@
-// Phone Authentication
-export { PhoneAuthClient } from './core/phone-auth';
-// Phone Auth Error Utilities
-export { PhoneAuthErrorCode, isPhoneAuthError, isUserError, getUserMessage, isErrorCode, getRetryDelay, isRetryableError, serializeError, createErrorBreadcrumb } from './core/phone-auth';
-// Phone Auth Type Guards and Helpers
-export { isExtendedResponse, isCredential, isAuthCredential, isLinkStrategy, isTS43Strategy, isDesktopStrategy, getStrategy, hasPollingControls, hasTrigger, 
-// Deprecated aliases
-isHeadlessResult, requiresPolling, requiresUserAction } from './core/phone-auth';
-// Export constants for use case and strategy
-export { USE_CASE as UseCase, AUTHENTICATION_STRATEGY as AuthenticationStrategy, BrowserError, BrowserErrorCode, BrowserName } from './core/phone-auth/types';
-// Desktop Strategy Exports
-export { DesktopHandler } from './core/phone-auth/strategies/desktop';
-// Adapters
-export { useClient, usePhoneAuth } from './adapters/react';
-export { useClient as useVueClient, usePhoneAuth as useVuePhoneAuth } from './adapters/vue';
-export { ClientService, PhoneAuthService } from './adapters/angular';
-export { ClientManager, PhoneAuthManager } from './adapters/vanilla';
+/**
+ * Glide Phone Authentication SDK
+ *
+ * @example Basic Usage
+ * ```typescript
+ * import { PhoneAuthClient } from '@glideidentity/web-client-sdk';
+ *
+ * const client = new PhoneAuthClient({ debug: true });
+ * const result = await client.authenticate({
+ *   use_case: 'VerifyPhoneNumber',
+ *   phone_number: '+14155551234'
+ * });
+ * ```
+ *
+ * @example React
+ * ```typescript
+ * import { usePhoneAuth } from '@glideidentity/web-client-sdk/react';
+ * ```
+ *
+ * @example Vue
+ * ```typescript
+ * import { usePhoneAuth } from '@glideidentity/web-client-sdk/vue';
+ * ```
+ *
+ * @example Core Types Only
+ * ```typescript
+ * import type { PrepareRequest } from '@glideidentity/web-client-sdk/core';
+ * ```
+ */
+// Main client
+export { PhoneAuthClient } from './client/phone-auth-client';
+// Constants
+export { USE_CASE, AUTHENTICATION_STRATEGY } from './core/types';
+// Error codes and utilities
+export { ERROR_CODES } from './core/errors';
+export { isAuthError, isClientError, isRetryableError, getUserMessage, createAuthError, parseBackendError, } from './core/errors';
+// Type guards
+export { isInvokeResult, isAuthCredential, isTS43Strategy, isLinkStrategy, isDesktopStrategy, isCancellable, isTS43Data, isLinkData, isDesktopData, isGetPhoneNumberResponse, isVerifyPhoneNumberResponse, isErrorResponse, } from './core/type-guards';
+// Validators
+export { validatePhoneNumber, validatePlmn, validateUseCaseRequirements, validateNonce, validateSessionKey, E164_REGEX, } from './core/validators';
+// Client utilities (for advanced use)
+export { createHttpClient } from './client/http';
+export { createLogger, createNoopLogger } from './client/logger';
+// UI components
+export { AuthModal, createQRCodeDataFromDesktop } from './ui/modal';

package/dist/esm/ui/index.js

@@ -0,0 +1,5 @@
+/**
+ * UI Components for Phone Authentication SDK
+ */
+export { AuthModal, createQRCodeDataFromDesktop } from './modal';
+export { MobileDebugConsole } from './mobile-debug-console';

package/dist/esm/{core/phone-auth/ui → ui}/mobile-debug-console.js

@@ -50,24 +50,31 @@ export class MobileDebugConsole {
                 try {
                     return JSON.stringify(arg, null, 2);
                 }
-                catch (_a) {
+                catch {
                     return '[Object]';
                 }
             }
             return String(arg);
         }).join(' ');
-        // Create colored log entry
+        // Color scheme for log types
         const colors = {
-            log: '#fff',
-            error: '#ff6b6b',
-            warn: '#ffd93d',
-            info: '#6bcf7f',
-            debug: '#95a5a6'
+            log: '#abb2bf', // Light gray
+            error: '#e06c75', // Soft red
+            warn: '#e5c07b', // Yellow/gold
+            info: '#61afef', // Blue
+            debug: '#5c6370' // Dim gray
+        };
+        const badges = {
+            log: '#3c3c3c',
+            error: 'rgba(224, 108, 117, 0.2)',
+            warn: 'rgba(229, 192, 123, 0.2)',
+            info: 'rgba(97, 175, 239, 0.2)',
+            debug: '#2d2d2d'
         };
         const logHtml = `
-      <div style="margin: 4px 0; font-family: monospace; font-size: 11px; color: ${colors[type] || '#fff'};">
-        <span style="color: #666;">[${timestamp}]</span>
-        <span style="color: ${colors[type]}; font-weight: bold; text-transform: uppercase; font-size: 9px;">[${type}]</span>
+      <div style="margin: 3px 0; font-family: 'SF Mono', Menlo, Monaco, monospace; font-size: 11px; color: ${colors[type] || '#abb2bf'}; line-height: 1.5;">
+        <span style="color: #5c6370; font-size: 10px;">${timestamp}</span>
+        <span style="background: ${badges[type]}; color: ${colors[type]}; padding: 1px 5px; border-radius: 3px; font-size: 9px; font-weight: 500; text-transform: uppercase; margin: 0 6px;">${type}</span>
         <span style="white-space: pre-wrap; word-break: break-all;">${this.escapeHtml(content)}</span>
       </div>
     `;
@@ -100,12 +107,14 @@ export class MobileDebugConsole {
         left: 0;
         right: 0;
         height: 45vh;
-        background: rgba(0, 0, 0, 0.95);
+        background: #1e1e1e;
         z-index: 999999;
         display: flex;
         flex-direction: column;
-        font-family: monospace;
-        transition: transform 0.3s ease;
+        font-family: 'SF Mono', Menlo, Monaco, 'Courier New', monospace;
+        transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
+        border-top: 1px solid #3c3c3c;
+        box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.4);
       }
       
       #mobile-debug-console.hidden {
@@ -116,74 +125,136 @@ export class MobileDebugConsole {
         display: flex;
         justify-content: space-between;
         align-items: center;
-        padding: 10px;
-        background: #1a1a1a;
-        border-top: 2px solid #333;
+        padding: 8px 12px;
+        background: #2d2d2d;
+        border-bottom: 1px solid #3c3c3c;
+        min-height: 36px;
       }
       
       #debug-title {
-        color: #0f0;
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        color: #9da5b4;
         font-size: 12px;
-        font-weight: bold;
+        font-weight: 500;
+        letter-spacing: 0.3px;
+      }
+      
+      #debug-title svg {
+        width: 14px;
+        height: 14px;
+        opacity: 0.8;
       }
       
-      #debug-buttons {
+      /* Traffic light buttons - using ID for specificity */
+      #mobile-debug-console .debug-traffic-lights {
         display: flex;
-        gap: 10px;
+        gap: 8px;
+        align-items: center;
       }
       
-      #debug-buttons button {
-        padding: 5px 10px;
-        background: #333;
-        color: #fff;
-        border: 1px solid #555;
-        border-radius: 3px;
-        font-size: 11px;
+      #mobile-debug-console button.debug-traffic-btn {
+        width: 16px;
+        height: 16px;
+        min-width: 16px;
+        min-height: 16px;
+        border-radius: 50%;
+        border: none;
         cursor: pointer;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        padding: 0;
+        font-size: 0;
+        line-height: 1;
+      }
+      
+      #mobile-debug-console .debug-traffic-btn svg {
+        width: 8px;
+        height: 8px;
+      }
+      
+      #mobile-debug-console .debug-traffic-btn.close {
+        background: #ff5f57;
+      }
+      
+      #mobile-debug-console .debug-traffic-btn.close svg {
+        stroke: #820005;
+        stroke-width: 2;
+      }
+      
+      #mobile-debug-console .debug-traffic-btn.clear {
+        background: #febc2e;
       }
       
-      #debug-buttons button:active {
-        background: #555;
+      #mobile-debug-console .debug-traffic-btn.minimize {
+        background: #28c840;
+      }
+      
+      #mobile-debug-console .debug-traffic-btn.minimize svg {
+        stroke: #006500;
+        stroke-width: 2;
+      }
+      
+      #mobile-debug-console .debug-traffic-btn:active {
+        filter: brightness(0.85);
       }
       
       #debug-logs {
         flex: 1;
         overflow-y: auto;
-        padding: 10px;
+        padding: 12px;
+        background: #1e1e1e;
         -webkit-overflow-scrolling: touch;
       }
       
-      #debug-floating-toggle {
-        position: fixed;
-        bottom: 20px;
-        right: 20px;
-        width: 50px;
-        height: 50px;
-        border-radius: 50%;
-        background: rgba(0, 0, 0, 0.8);
-        border: 2px solid #0f0;
-        color: #0f0;
-        cursor: pointer;
-        z-index: 999998;
+      button#debug-floating-toggle {
+        position: fixed !important;
+        bottom: 20px !important;
+        right: 20px !important;
+        width: 42px !important;
+        height: 42px !important;
+        min-width: 42px !important;
+        min-height: 42px !important;
+        border-radius: 8px !important;
+        background: #2d2d2d !important;
+        border: 1px solid #3c3c3c !important;
+        color: #9da5b4 !important;
+        cursor: pointer !important;
+        z-index: 999998 !important;
         display: none;
-        align-items: center;
-        justify-content: center;
-        font-size: 24px;
-        box-shadow: 0 2px 10px rgba(0, 255, 0, 0.3);
-        transition: all 0.3s ease;
+        align-items: center !important;
+        justify-content: center !important;
+        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
+        transition: all 0.2s ease !important;
+        padding: 0 !important;
+        margin: 0 !important;
       }
       
-      #debug-floating-toggle:hover {
-        background: rgba(0, 0, 0, 0.9);
-        transform: scale(1.1);
-        box-shadow: 0 4px 15px rgba(0, 255, 0, 0.5);
+      button#debug-floating-toggle:hover {
+        background: #3c3c3c !important;
+        color: #fff !important;
+        transform: translateY(-2px) !important;
+        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4) !important;
       }
       
-      #debug-floating-toggle.visible {
-        display: flex;
+      button#debug-floating-toggle:active {
+        transform: translateY(0) !important;
+      }
+      
+      button#debug-floating-toggle.visible {
+        display: flex !important;
+      }
+      
+      button#debug-floating-toggle svg {
+        width: 20px !important;
+        height: 20px !important;
       }
     `;
         document.head.appendChild(style);
+        // Terminal icon SVG (>_)
+        const terminalIcon = `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="4 17 10 11 4 5"></polyline><line x1="12" y1="19" x2="20" y2="19"></line></svg>`;
         // Create container
         this.container = document.createElement('div');
         this.container.id = 'mobile-debug-console';
@@ -195,27 +266,33 @@ export class MobileDebugConsole {
         header.id = 'debug-header';
         const title = document.createElement('div');
         title.id = 'debug-title';
-        title.textContent = '📱 Mobile Debug Console';
-        const buttons = document.createElement('div');
-        buttons.id = 'debug-buttons';
-        // Clear button
+        title.innerHTML = `${terminalIcon}<span>Mobile Console</span>`;
+        // Traffic light control buttons
+        const trafficLights = document.createElement('div');
+        trafficLights.className = 'debug-traffic-lights';
+        // Close button (red) - ×
+        const closeBtn = document.createElement('button');
+        closeBtn.className = 'debug-traffic-btn close';
+        closeBtn.title = 'Close';
+        closeBtn.innerHTML = `<svg viewBox="0 0 10 10" fill="none"><line x1="2.5" y1="2.5" x2="7.5" y2="7.5" stroke="currentColor"/><line x1="7.5" y1="2.5" x2="2.5" y2="7.5" stroke="currentColor"/></svg>`;
+        closeBtn.onclick = () => this.cleanup();
+        // Clear button (yellow) - trash icon
         const clearBtn = document.createElement('button');
-        clearBtn.textContent = 'Clear';
+        clearBtn.className = 'debug-traffic-btn clear';
+        clearBtn.title = 'Clear';
+        clearBtn.innerHTML = `<svg viewBox="0 0 16 16" fill="currentColor"><path d="M5.5 5.5A.5.5 0 0 1 6 6v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5m2.5 0a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5m3 .5a.5.5 0 0 0-1 0v6a.5.5 0 0 0 1 0z"/><path d="M14.5 3a1 1 0 0 1-1 1H13v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V4h-.5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1H6a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1h3.5a1 1 0 0 1 1 1zM4.118 4 4 4.059V13a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4.059L11.882 4zM2.5 3h11V2h-11z"/></svg>`;
         clearBtn.onclick = () => this.clear();
-        // Show/Hide button
+        // Minimize button (green) - minimize to floating button
         const toggleBtn = document.createElement('button');
-        toggleBtn.textContent = 'Hide';
+        toggleBtn.className = 'debug-traffic-btn minimize';
+        toggleBtn.title = 'Minimize';
+        toggleBtn.innerHTML = `<svg viewBox="0 0 10 10" fill="none"><path d="M2 3L5 6L8 3" stroke="currentColor" fill="none"/></svg>`;
         toggleBtn.onclick = () => this.toggle();
-        // Close button
-        const closeBtn = document.createElement('button');
-        closeBtn.textContent = '✕';
-        closeBtn.style.color = '#ff6b6b';
-        closeBtn.onclick = () => this.cleanup();
-        buttons.appendChild(clearBtn);
-        buttons.appendChild(toggleBtn);
-        buttons.appendChild(closeBtn);
+        trafficLights.appendChild(closeBtn);
+        trafficLights.appendChild(clearBtn);
+        trafficLights.appendChild(toggleBtn);
+        header.appendChild(trafficLights);
         header.appendChild(title);
-        header.appendChild(buttons);
         // Create logs container
         this.logsContainer = document.createElement('div');
         this.logsContainer.id = 'debug-logs';
@@ -227,15 +304,13 @@ export class MobileDebugConsole {
         this.container.appendChild(header);
         this.container.appendChild(this.logsContainer);
         document.body.appendChild(this.container);
-        // Create floating toggle button
+        // Create floating toggle button with terminal icon
         this.floatingToggle = document.createElement('button');
         this.floatingToggle.id = 'debug-floating-toggle';
-        this.floatingToggle.innerHTML = '🖥️'; // Console icon
-        this.floatingToggle.title = 'Show Debug Console';
+        this.floatingToggle.innerHTML = terminalIcon;
+        this.floatingToggle.title = 'Show Console';
         this.floatingToggle.onclick = () => this.toggle();
         document.body.appendChild(this.floatingToggle);
-        // Store reference for toggle button
-        window.__debugToggleBtn = toggleBtn;
     }
     escapeHtml(text) {
         const div = document.createElement('div');
@@ -248,13 +323,11 @@ export class MobileDebugConsole {
             if (this.isVisible) {
                 this.container.classList.remove('hidden');
                 this.floatingToggle.classList.remove('visible');
-                window.__debugToggleBtn.textContent = 'Hide';
                 this.updateDisplay();
             }
             else {
                 this.container.classList.add('hidden');
                 this.floatingToggle.classList.add('visible');
-                window.__debugToggleBtn.textContent = 'Show';
             }
         }
     }
@@ -277,8 +350,6 @@ export class MobileDebugConsole {
         if (this.floatingToggle) {
             this.floatingToggle.remove();
         }
-        // Clean up references
-        delete window.__debugToggleBtn;
     }
 }
 MobileDebugConsole.instance = null;