@glideidentity/web-client-sdk 4.4.8-beta.1

package/dist/esm/core/phone-auth/ui/modal.js

@@ -0,0 +1,570 @@
+/**
+ * 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. Think of it like a popup window
+ * that handles the authentication flow for you.
+ */
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+/**
+ * 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 class AuthModal {
+    constructor(options, callbacks) {
+        this.container = null;
+        this.backdrop = null;
+        this.isOpen = false;
+        this.options = options || {};
+        this.callbacks = callbacks || {};
+        // Bind escape key handler
+        this.handleEscapeKey = this.handleEscapeKey.bind(this);
+    }
+    handleEscapeKey(event) {
+        var _a, _b;
+        if (event.key === 'Escape' && this.isOpen) {
+            // Check if escape closing is enabled (default true)
+            if (((_a = this.options) === null || _a === void 0 ? void 0 : _a.closeOnEscape) !== false) {
+                (_b = this.closeCallback) === null || _b === void 0 ? void 0 : _b.call(this); // Call the cancellation callback if set
+                this.close();
+            }
+        }
+    }
+    /**
+     * 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, statusMessage = 'Scan QR code with your phone') {
+        console.log('[Modal] showQRCode called with:', qrCodeData);
+        // Check if it's the new dual-platform format with VALID Android QR code
+        if (typeof qrCodeData === 'object' && qrCodeData.iosQRCode) {
+            const hasValidAndroidQR = qrCodeData.androidQRCode &&
+                qrCodeData.androidQRCode.length > 0 &&
+                qrCodeData.androidQRCode !== qrCodeData.iosQRCode;
+            console.log('[Modal] Has valid Android QR?', hasValidAndroidQR);
+            if (hasValidAndroidQR) {
+                console.log('[Modal] Using dual-platform modal');
+                this.createDualPlatformQRModal(qrCodeData, statusMessage);
+            }
+            else {
+                console.log('[Modal] Android QR missing/empty, using single iOS QR');
+                // Only iOS QR code available - show single QR
+                this.createModal(`
+          <div class="glide-auth-qr-container">
+            <img src="${qrCodeData.iosQRCode}" alt="QR Code" class="glide-auth-qr-code" />
+            <p class="glide-auth-status">Scan with your iPhone to authenticate</p>
+          </div>
+        `);
+            }
+        }
+        else {
+            console.log('[Modal] Using legacy single QR code modal');
+            // Legacy single QR code
+            this.createModal(`
+        <div class="glide-auth-qr-container">
+          <img src="${qrCodeData}" alt="QR Code" class="glide-auth-qr-code" />
+          <p class="glide-auth-status">${statusMessage}</p>
+        </div>
+      `);
+        }
+        this.show();
+    }
+    /**
+     * Creates a modal with iOS/Android platform toggle
+     */
+    createDualPlatformQRModal(qrCodeData, statusMessage) {
+        this.createModal(`
+      <div class="glide-auth-qr-container">
+        <!-- Platform Switcher -->
+        <div class="glide-platform-switcher">
+          <button class="glide-platform-btn glide-platform-ios active" data-platform="ios">
+            <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor">
+              <path d="M17.05 20.28c-.98.95-2.05.88-3.08.4-1.09-.5-2.08-.48-3.24 0-1.44.62-2.2.44-3.06-.4C2.79 15.25 3.51 7.59 9.05 7.31c1.35.07 2.29.74 3.08.8 1.18-.24 2.31-.93 3.57-.84 1.51.12 2.65.72 3.4 1.8-3.12 1.87-2.38 5.98.48 7.13-.57 1.5-1.31 2.99-2.54 4.09l.01-.01zM12.03 7.25c-.15-2.23 1.66-4.07 3.74-4.25.29 2.58-2.34 4.5-3.74 4.25z"/>
+            </svg>
+            <span>iOS</span>
+          </button>
+          <button class="glide-platform-btn glide-platform-android" data-platform="android">
+            <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor">
+              <path d="M17.6 9.48l1.84-3.18c.16-.31.04-.69-.26-.85-.29-.15-.65-.06-.83.22l-1.88 3.24c-2.86-1.21-6.08-1.21-8.94 0L5.65 5.67c-.19-.28-.54-.38-.83-.22-.3.16-.42.54-.26.85l1.84 3.18C4.08 11.08 2.4 13.97 2.4 17.2h19.2c0-3.23-1.68-6.12-4.0-7.72zM7.0 14.8c-.66 0-1.2-.54-1.2-1.2s.54-1.2 1.2-1.2 1.2.54 1.2 1.2-.54 1.2-1.2 1.2zm10 0c-.66 0-1.2-.54-1.2-1.2s.54-1.2 1.2-1.2 1.2.54 1.2 1.2-.54 1.2-1.2 1.2z"/>
+            </svg>
+            <span>Android</span>
+          </button>
+        </div>
+
+        <!-- QR Code Image -->
+        <img 
+          id="glide-qr-code-img" 
+          src="${qrCodeData.iosQRCode}" 
+          alt="QR Code" 
+          class="glide-auth-qr-code" 
+          data-ios="${qrCodeData.iosQRCode}"
+          data-android="${qrCodeData.androidQRCode}"
+        />
+        
+        <!-- Status Message -->
+        <p class="glide-auth-status" id="glide-platform-message">Scan with your iPhone to authenticate</p>
+      </div>
+    `);
+    }
+    /**
+     * Sets a callback to be called when the modal is cancelled/closed
+     */
+    setCloseCallback(callback) {
+        this.closeCallback = callback;
+    }
+    /**
+     * 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, buttonText) {
+        return new Promise((resolve) => {
+            var _a, _b, _c;
+            const text = buttonText || ((_a = this.options) === null || _a === void 0 ? void 0 : _a.buttonText) || 'Open Verification App';
+            this.createModal(`
+        <div class="glide-auth-link-container">
+          <p class="glide-auth-description">
+            ${((_b = this.options) === null || _b === void 0 ? void 0 : _b.description) || 'Click below to verify your phone number'}
+          </p>
+          <button class="glide-auth-button" id="glide-auth-link-button">
+            ${text}
+          </button>
+          <p class="glide-auth-helper-text">
+            You'll be redirected to complete verification
+          </p>
+        </div>
+      `);
+            // Show modal first so elements are in the DOM
+            this.show();
+            // Add click handler for the button AFTER modal is in DOM
+            // CRITICAL: This click event is required for iOS to recognize the app link
+            // Do NOT call window.open automatically - it must be triggered by user interaction
+            const button = (_c = this.container) === null || _c === void 0 ? void 0 : _c.querySelector('#glide-auth-link-button');
+            if (button) {
+                button.addEventListener('click', (event) => {
+                    var _a, _b;
+                    (_b = (_a = this.callbacks) === null || _a === void 0 ? void 0 : _a.onAuthStart) === null || _b === void 0 ? void 0 : _b.call(_a);
+                    // User-initiated click is required for app links to work properly on iOS
+                    // This ensures the OS recognizes it should open an app, not just a browser tab
+                    window.open(url, '_blank');
+                    resolve();
+                });
+            }
+            else {
+                console.error('[Modal] Link button not found in modal');
+            }
+        });
+    }
+    /**
+     * Shows the modal with a button for TS43 authentication
+     * IMPORTANT: The button click is required for Digital Credentials API (transient activation)
+     */
+    showTS43Button(onAuthenticate) {
+        return new Promise((resolve, reject) => {
+            var _a, _b, _c;
+            const text = ((_a = this.options) === null || _a === void 0 ? void 0 : _a.buttonText) || 'Verify with Carrier';
+            this.createModal(`
+        <div class="glide-auth-ts43-container">
+          <p class="glide-auth-description">
+            ${((_b = this.options) === null || _b === void 0 ? void 0 : _b.description) || 'Verify using your carrier credentials'}
+          </p>
+          <button class="glide-auth-button" id="glide-auth-ts43-button">
+            ${text}
+          </button>
+          <p class="glide-auth-helper-text">
+            Secure verification through your mobile carrier
+          </p>
+        </div>
+      `);
+            // Show modal first so elements are in the DOM
+            this.show();
+            // Add click handler for the button AFTER modal is in DOM
+            // CRITICAL: Digital Credentials API requires "transient activation" (user interaction)
+            // Do NOT call onAuthenticate automatically - it must be triggered by user click
+            const button = (_c = this.container) === null || _c === void 0 ? void 0 : _c.querySelector('#glide-auth-ts43-button');
+            if (button) {
+                button.addEventListener('click', (event) => __awaiter(this, void 0, void 0, function* () {
+                    var _a, _b, _c, _d, _e, _f;
+                    (_b = (_a = this.callbacks) === null || _a === void 0 ? void 0 : _a.onAuthStart) === null || _b === void 0 ? void 0 : _b.call(_a);
+                    button.setAttribute('disabled', 'true');
+                    button.textContent = 'Verifying...';
+                    try {
+                        const result = yield onAuthenticate();
+                        (_d = (_c = this.callbacks) === null || _c === void 0 ? void 0 : _c.onAuthComplete) === null || _d === void 0 ? void 0 : _d.call(_c, result);
+                        resolve(result);
+                        this.close();
+                    }
+                    catch (error) {
+                        (_f = (_e = this.callbacks) === null || _e === void 0 ? void 0 : _e.onError) === null || _f === void 0 ? void 0 : _f.call(_e, error);
+                        button.removeAttribute('disabled');
+                        button.textContent = text;
+                        reject(error);
+                    }
+                }));
+            }
+            else {
+                console.error('[Modal] TS43 button not found in modal');
+            }
+        });
+    }
+    /**
+     * Updates the status message in the modal
+     */
+    updateStatus(message, isError = false) {
+        var _a;
+        const statusEl = (_a = this.container) === null || _a === void 0 ? void 0 : _a.querySelector('.glide-auth-status');
+        if (statusEl) {
+            statusEl.textContent = message;
+            statusEl.className = isError ? 'glide-auth-status glide-auth-error' : 'glide-auth-status';
+        }
+    }
+    /**
+     * Creates the modal HTML structure
+     */
+    createModal(content) {
+        var _a, _b, _c;
+        // Clean up any existing modal
+        this.cleanup();
+        // Create backdrop (dark overlay)
+        this.backdrop = document.createElement('div');
+        this.backdrop.className = 'glide-auth-backdrop';
+        this.backdrop.style.cssText = `
+      position: fixed;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      background: rgba(0, 0, 0, 0.5);
+      z-index: 9998;
+      opacity: 0;
+      transition: opacity 0.3s ease;
+    `;
+        // Create modal container
+        this.container = document.createElement('div');
+        this.container.className = `glide-auth-modal ${((_a = this.options) === null || _a === void 0 ? void 0 : _a.className) || ''}`;
+        this.container.style.cssText = `
+      position: fixed;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%) scale(0.9);
+      background: white;
+      border-radius: 12px;
+      padding: 24px;
+      max-width: 400px;
+      width: 90%;
+      box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
+      z-index: 9999;
+      opacity: 0;
+      transition: opacity 0.3s ease, transform 0.3s ease;
+    `;
+        // Add modal content
+        this.container.innerHTML = `
+      <div class="glide-auth-header">
+        ${((_b = this.options) === null || _b === void 0 ? void 0 : _b.showCloseButton) !== false ? `
+          <button class="glide-auth-close" aria-label="Close">
+            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+              <line x1="18" y1="6" x2="6" y2="18"></line>
+              <line x1="6" y1="6" x2="18" y2="18"></line>
+            </svg>
+          </button>
+        ` : ''}
+        <h2 class="glide-auth-title">${((_c = this.options) === null || _c === void 0 ? void 0 : _c.title) || 'Phone Verification'}</h2>
+      </div>
+      <div class="glide-auth-content">
+        ${content}
+      </div>
+    `;
+        // Add styles
+        this.injectStyles();
+        // Add close button handler
+        const closeBtn = this.container.querySelector('.glide-auth-close');
+        if (closeBtn) {
+            closeBtn.addEventListener('click', () => this.close());
+        }
+        // Add backdrop click handler
+        this.backdrop.addEventListener('click', (e) => {
+            var _a, _b;
+            // Only close if backdrop itself was clicked and closeOnBackdrop is enabled (default true)
+            if (e.target === this.backdrop && ((_a = this.options) === null || _a === void 0 ? void 0 : _a.closeOnBackdrop) !== false) {
+                (_b = this.closeCallback) === null || _b === void 0 ? void 0 : _b.call(this); // Call cancellation callback if set
+                this.close();
+            }
+        });
+    }
+    /**
+     * Injects CSS styles for the modal
+     */
+    injectStyles() {
+        if (document.getElementById('glide-auth-styles'))
+            return;
+        const styles = document.createElement('style');
+        styles.id = 'glide-auth-styles';
+        styles.textContent = `
+      .glide-auth-backdrop {
+        backdrop-filter: blur(4px);
+      }
+
+      .glide-auth-modal {
+        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
+      }
+
+      .glide-auth-header {
+        position: relative;
+        margin-bottom: 20px;
+      }
+
+      .glide-auth-close {
+        position: absolute;
+        top: 0;
+        right: 0;
+        background: none;
+        border: none;
+        cursor: pointer;
+        padding: 0;
+        color: #666;
+        transition: color 0.2s;
+      }
+
+      .glide-auth-close:hover {
+        color: #000;
+      }
+
+      .glide-auth-title {
+        margin: 0;
+        font-size: 24px;
+        font-weight: 600;
+        color: #333;
+        text-align: center;
+      }
+
+      .glide-auth-content {
+        text-align: center;
+      }
+
+      .glide-auth-description {
+        color: #666;
+        margin: 0 0 20px 0;
+        font-size: 16px;
+        line-height: 1.5;
+      }
+
+      .glide-auth-button {
+        background: #007AFF;
+        color: white;
+        border: none;
+        border-radius: 8px;
+        padding: 12px 24px;
+        font-size: 16px;
+        font-weight: 500;
+        cursor: pointer;
+        transition: background 0.2s, transform 0.1s;
+        min-width: 200px;
+      }
+
+      .glide-auth-button:hover:not(:disabled) {
+        background: #0051D5;
+        transform: translateY(-1px);
+      }
+
+      .glide-auth-button:active {
+        transform: translateY(0);
+      }
+
+      .glide-auth-button:disabled {
+        opacity: 0.6;
+        cursor: not-allowed;
+      }
+
+      .glide-auth-helper-text {
+        color: #999;
+        font-size: 14px;
+        margin: 16px 0 0 0;
+      }
+
+      .glide-auth-qr-code {
+        max-width: 256px;
+        width: 100%;
+        height: auto;
+        margin: 20px auto;
+        display: block;
+      }
+
+      .glide-auth-status {
+        color: #666;
+        font-size: 16px;
+        margin: 16px 0;
+      }
+
+      .glide-auth-error {
+        color: #FF3B30;
+      }
+
+      .glide-auth-qr-container,
+      .glide-auth-link-container,
+      .glide-auth-ts43-container {
+        padding: 20px 0;
+      }
+
+      /* Platform Switcher Styles */
+      .glide-platform-switcher {
+        display: flex;
+        justify-content: center;
+        gap: 10px;
+        margin-bottom: 20px;
+      }
+
+      .glide-platform-btn {
+        display: flex;
+        align-items: center;
+        gap: 6px;
+        padding: 10px 20px;
+        border: 2px solid;
+        background: transparent;
+        border-radius: 8px;
+        cursor: pointer;
+        font-size: 14px;
+        font-weight: 600;
+        transition: all 0.2s ease;
+      }
+
+      .glide-platform-btn svg {
+        flex-shrink: 0;
+      }
+
+      .glide-platform-ios {
+        border-color: #007AFF;
+        color: #007AFF;
+      }
+
+      .glide-platform-ios.active {
+        background: #007AFF;
+        color: white;
+      }
+
+      .glide-platform-ios:hover:not(.active) {
+        background: rgba(0, 122, 255, 0.1);
+      }
+
+      .glide-platform-android {
+        border-color: #3DDC84;
+        color: #3DDC84;
+      }
+
+      .glide-platform-android.active {
+        background: #3DDC84;
+        color: white;
+      }
+
+      .glide-platform-android:hover:not(.active) {
+        background: rgba(61, 220, 132, 0.1);
+      }
+    `;
+        document.head.appendChild(styles);
+    }
+    /**
+     * Shows the modal with animation
+     */
+    show() {
+        var _a, _b;
+        if (!this.container || !this.backdrop || this.isOpen)
+            return;
+        document.body.appendChild(this.backdrop);
+        document.body.appendChild(this.container);
+        // Add escape key listener for closing modal
+        document.addEventListener('keydown', this.handleEscapeKey);
+        // Setup platform toggle handlers if they exist
+        this.setupPlatformToggles();
+        // Trigger animation
+        requestAnimationFrame(() => {
+            if (this.backdrop && this.container) {
+                this.backdrop.style.opacity = '1';
+                this.container.style.opacity = '1';
+                this.container.style.transform = 'translate(-50%, -50%) scale(1)';
+            }
+        });
+        this.isOpen = true;
+        (_b = (_a = this.callbacks) === null || _a === void 0 ? void 0 : _a.onOpen) === null || _b === void 0 ? void 0 : _b.call(_a);
+    }
+    /**
+     * Setup click handlers for iOS/Android platform toggle
+     */
+    setupPlatformToggles() {
+        var _a, _b, _c;
+        const platformBtns = (_a = this.container) === null || _a === void 0 ? void 0 : _a.querySelectorAll('.glide-platform-btn');
+        const qrImg = (_b = this.container) === null || _b === void 0 ? void 0 : _b.querySelector('#glide-qr-code-img');
+        const message = (_c = this.container) === null || _c === void 0 ? void 0 : _c.querySelector('#glide-platform-message');
+        if (!platformBtns || !qrImg)
+            return;
+        platformBtns.forEach((btn) => {
+            btn.addEventListener('click', (e) => {
+                const target = e.currentTarget;
+                const platform = target.getAttribute('data-platform');
+                // Update active state
+                platformBtns.forEach(b => b.classList.remove('active'));
+                target.classList.add('active');
+                // Switch QR code
+                if (platform === 'ios') {
+                    qrImg.src = qrImg.getAttribute('data-ios') || '';
+                    if (message)
+                        message.textContent = 'Scan with your iPhone to authenticate';
+                }
+                else if (platform === 'android') {
+                    qrImg.src = qrImg.getAttribute('data-android') || '';
+                    if (message)
+                        message.textContent = 'Scan with your Android device to authenticate';
+                }
+            });
+        });
+    }
+    /**
+     * Closes the modal with animation
+     */
+    close() {
+        if (!this.container || !this.backdrop || !this.isOpen)
+            return;
+        // Remove escape key listener
+        document.removeEventListener('keydown', this.handleEscapeKey);
+        // Animate out
+        this.backdrop.style.opacity = '0';
+        this.container.style.opacity = '0';
+        this.container.style.transform = 'translate(-50%, -50%) scale(0.9)';
+        // Clear any stored callbacks
+        this.closeCallback = undefined;
+        // Remove after animation
+        setTimeout(() => {
+            var _a, _b;
+            this.cleanup();
+            this.isOpen = false;
+            (_b = (_a = this.callbacks) === null || _a === void 0 ? void 0 : _a.onClose) === null || _b === void 0 ? void 0 : _b.call(_a);
+        }, 300);
+    }
+    /**
+     * Removes modal elements from DOM
+     */
+    cleanup() {
+        var _a, _b;
+        (_a = this.container) === null || _a === void 0 ? void 0 : _a.remove();
+        (_b = this.backdrop) === null || _b === void 0 ? void 0 : _b.remove();
+        this.container = null;
+        this.backdrop = null;
+    }
+    /**
+     * Check if modal is currently open
+     */
+    isModalOpen() {
+        return this.isOpen;
+    }
+}

package/dist/esm/core/phone-auth/validation-utils.d.ts

@@ -0,0 +1,66 @@
+/**
+ * Validation utilities for phone authentication
+ */
+import { PhoneAuthErrorCode } from './error-utils';
+import type { PLMN, UseCase } from './api-types';
+/**
+ * Validates E.164 phone number format
+ * @param phoneNumber - Phone number to validate
+ * @returns Validation result with error if invalid
+ */
+export declare function validatePhoneNumber(phoneNumber?: string): {
+    valid: boolean;
+    error?: string;
+};
+/**
+ * Validates PLMN (MCC/MNC) values
+ * @param plmn - PLMN object with MCC and MNC
+ * @returns Validation result
+ */
+export declare function validatePlmn(plmn?: PLMN): {
+    valid: boolean;
+    error?: string;
+};
+/**
+ * Validates use case and phone number 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)
+ * @returns Validation result
+ */
+export declare function validateUseCaseRequirements(useCase: UseCase, phoneNumber?: string, hasParentSessionId?: boolean): {
+    valid: boolean;
+    error?: string;
+};
+/**
+ * Validates consent data
+ * @param consentData - Consent data object
+ * @returns Validation result
+ */
+export declare function validateConsentData(consentData?: {
+    consent_text: string;
+    policy_link: string;
+    policy_text: string;
+}): {
+    valid: boolean;
+    error?: string;
+};
+/**
+ * Creates a validation error
+ * @param code - Error code
+ * @param message - Error message
+ * @param field - Field that failed validation
+ */
+export declare function createValidationError(code: PhoneAuthErrorCode, message: string, field?: string): Error & {
+    code: PhoneAuthErrorCode;
+    field?: string;
+};
+/**
+ * Validates nonce format
+ * @param nonce - Nonce string to validate
+ * @returns Validation result
+ */
+export declare function validateNonce(nonce: string): {
+    valid: boolean;
+    error?: string;
+};