@glideidentity/web-client-sdk 5.0.0 → 5.0.1

package/README.md

@@ -14,9 +14,19 @@ The official web SDK for integrating Glide's carrier-grade phone verification in
 - 🛡️ **Type Safe**: Full TypeScript support with type guards and IntelliSense
 - 🎯 **Developer Friendly**: Clear error messages and browser compatibility checks
 
-## What's New in v4.4
-
-### 🎉 Enhanced Control & Better DX
+## What's New in v5.0
+
+### 🎨 Redesigned Modal UI
+- **Glass Morphism Design**: Modern frosted glass aesthetic with blur effects
+- **Multiple View Modes**: Choose between `toggle`, `dual`, or `pre-step` layouts
+- **Theme Support**: `dark`, `light`, or `auto` (follows system preference)
+- **OS Icons**: Apple and Android icons in toggle and dual mode
+- **Smooth Animations**: Fade-in/scale transitions and sliding toggle switch
+- **Help Interaction**: Expandable help panel with smooth slide-out animation
+- **Body Scroll Lock**: Background page no longer scrolls when modal is open
+- **Improved Accessibility**: Keyboard support (Escape to close), proper ARIA labels
+
+### 🎉 Enhanced Control & Better DX (v4.4)
 - **Extended Mode**: More control with `executionMode: 'extended'` for granular authentication flow
 - **Prevent Default UI**: Use `preventDefaultUI: true` to disable all SDK modals
 - **Type Guards**: Helper functions for type-safe result handling
@@ -31,6 +41,7 @@ The official web SDK for integrating Glide's carrier-grade phone verification in
 - [Installation](#installation)
 - [Development](#development)
 - [Quick Start](#quick-start)
+- [Modal Customization](#modal-customization)
 - [Extended Mode - Advanced Control](#extended-mode---advanced-control)
 - [Authentication Strategies](#authentication-strategies)
 - [Framework Examples](#framework-examples)
@@ -146,6 +157,84 @@ function PhoneVerification() {
 }
 ```
 
+## Modal Customization
+
+The SDK provides a built-in modal for QR code display with extensive customization options.
+
+### View Modes
+
+Choose how the QR code is displayed to users:
+
+| Mode | Description | Best For |
+|------|-------------|----------|
+| `toggle` | Single QR with iOS/Android sliding toggle switch | Default, clean UI |
+| `dual` | Side-by-side QR codes for both platforms | When users might not know their OS |
+| `pre-step` | OS selection screen before showing QR | Guided experience |
+
+```javascript
+const credential = await phoneAuth.invokeSecurePrompt(prepareResult, {
+  modalOptions: {
+    viewMode: 'dual'  // 'toggle' | 'dual' | 'pre-step'
+  }
+});
+```
+
+### Theme Options
+
+Control the modal's appearance:
+
+```javascript
+const credential = await phoneAuth.invokeSecurePrompt(prepareResult, {
+  modalOptions: {
+    theme: 'auto',        // 'dark' | 'light' | 'auto' (follows system preference)
+    title: 'Scan to Verify',
+    showCloseButton: true,
+    closeOnBackdrop: true,
+    closeOnEscape: true
+  }
+});
+```
+
+### Full Modal Options
+
+```typescript
+modalOptions: {
+  // View mode
+  viewMode?: 'toggle' | 'dual' | 'pre-step';  // Default: 'toggle'
+  
+  // Theme
+  theme?: 'dark' | 'light' | 'auto';          // Default: 'auto'
+  
+  // Content
+  title?: string;                              // Modal title
+  
+  // Behavior
+  showCloseButton?: boolean;                   // Show X button (default: true)
+  closeOnBackdrop?: boolean;                   // Close when clicking outside (default: true)
+  closeOnEscape?: boolean;                     // Close on Escape key (default: true)
+  
+  // Styling
+  className?: string;                          // Custom CSS class for modal
+}
+```
+
+### View Mode Examples
+
+**Toggle Mode** (default) - Clean single QR with platform switcher:
+```javascript
+modalOptions: { viewMode: 'toggle' }
+```
+
+**Dual Mode** - Both QR codes visible at once:
+```javascript
+modalOptions: { viewMode: 'dual' }
+```
+
+**Pre-step Mode** - User selects platform first:
+```javascript
+modalOptions: { viewMode: 'pre-step' }
+```
+
 ## Extended Mode - Advanced Control
 
 The SDK supports an **Extended Mode** that provides granular control over the authentication flow. This mode returns an `ExtendedResponse` object with additional methods and data for custom implementations.
@@ -576,11 +665,22 @@ interface InvokeOptions {
   
   // UI customization (when preventDefaultUI is false)
   modalOptions?: {
-    className?: string;
-    title?: string;
-    description?: string;
-    buttonText?: string;
-    showCloseButton?: boolean;
+    // View mode
+    viewMode?: 'toggle' | 'dual' | 'pre-step';  // Default: 'toggle'
+    
+    // Theme
+    theme?: 'dark' | 'light' | 'auto';          // Default: 'auto' (system preference)
+    
+    // Content
+    title?: string;                              // Modal title text
+    
+    // Behavior
+    showCloseButton?: boolean;                   // Show X button (default: true)
+    closeOnBackdrop?: boolean;                   // Close on backdrop click (default: true)
+    closeOnEscape?: boolean;                     // Close on Escape key (default: true)
+    
+    // Styling
+    className?: string;                          // Custom CSS class
   };
   
   // Callbacks

package/dist/adapters/angular/index.js

@@ -5,7 +5,6 @@ var client_service_1 = require("./client.service");
 Object.defineProperty(exports, "ClientService", { enumerable: true, get: function () { return client_service_1.ClientService; } });
 var phone_auth_service_1 = require("./phone-auth.service");
 Object.defineProperty(exports, "PhoneAuthService", { enumerable: true, get: function () { return phone_auth_service_1.PhoneAuthService; } });
-// Export error utilities
 var phone_auth_1 = require("../../core/phone-auth");
 Object.defineProperty(exports, "PhoneAuthErrorCode", { enumerable: true, get: function () { return phone_auth_1.PhoneAuthErrorCode; } });
 Object.defineProperty(exports, "isPhoneAuthError", { enumerable: true, get: function () { return phone_auth_1.isPhoneAuthError; } });

package/dist/adapters/angular/phone-auth.service.d.ts

@@ -11,28 +11,10 @@ export declare class PhoneAuthService {
     result$: Observable<PhoneAuthResult | null>;
     currentStep$: Observable<AuthStep>;
     constructor();
-    /**
-     * Configure the phone auth client
-     */
     configure(config: AuthConfig): void;
-    /**
-     * Check if browser supports secure phone authentication
-     */
     isSupported(): boolean;
-    /**
-     * Verify phone number
-     */
     verify(options: PhoneAuthOptions): Promise<PhoneAuthResult>;
-    /**
-     * Get phone number
-     */
     getPhoneNumber(options?: Omit<PhoneAuthOptions, 'use_case' | 'phone_number'>): Promise<PhoneAuthResult>;
-    /**
-     * Verify specific phone number
-     */
     verifyPhoneNumber(phoneNumber: string, options?: Omit<PhoneAuthOptions, 'use_case' | 'phone_number'>): Promise<PhoneAuthResult>;
-    /**
-     * Reset state
-     */
     reset(): void;
 }

package/dist/adapters/angular/phone-auth.service.js

@@ -24,33 +24,22 @@ const phone_auth_1 = require("../../core/phone-auth");
 const rxjs_1 = require("rxjs");
 let PhoneAuthService = class PhoneAuthService {
     constructor() {
-        // State subjects
         this.isLoadingSubject = new rxjs_1.BehaviorSubject(false);
         this.errorSubject = new rxjs_1.BehaviorSubject(null);
         this.resultSubject = new rxjs_1.BehaviorSubject(null);
         this.currentStepSubject = new rxjs_1.BehaviorSubject('idle');
-        // Public observables
         this.isLoading$ = this.isLoadingSubject.asObservable();
         this.error$ = this.errorSubject.asObservable();
         this.result$ = this.resultSubject.asObservable();
         this.currentStep$ = this.currentStepSubject.asObservable();
         this.client = new phone_auth_1.PhoneAuthClient();
     }
-    /**
-     * Configure the phone auth client
-     */
     configure(config) {
         this.client = new phone_auth_1.PhoneAuthClient(config);
     }
-    /**
-     * Check if browser supports secure phone authentication
-     */
     isSupported() {
         return this.client.isSupported();
     }
-    /**
-     * Verify phone number
-     */
     verify(options) {
         return __awaiter(this, void 0, void 0, function* () {
             this.isLoadingSubject.next(true);
@@ -58,19 +47,14 @@ let PhoneAuthService = class PhoneAuthService {
             this.resultSubject.next(null);
             this.currentStepSubject.next('requesting');
             try {
-                // Step 1: Prepare request
                 const preparedRequest = yield this.client.preparePhoneRequest(options);
-                // Step 2: Show authenticating state
                 this.currentStepSubject.next('authenticating');
                 const credentialResponse = yield this.client.invokeSecurePrompt(preparedRequest);
-                // Step 3: Process response through appropriate endpoint
                 this.currentStepSubject.next('processing');
-                // Cast to credential type - adapters never use headless mode
                 const credential = credentialResponse;
                 const processedResult = options.use_case === 'GetPhoneNumber'
                     ? yield this.client.getPhoneNumber(credential, preparedRequest.session)
                     : yield this.client.verifyPhoneNumber(credential, preparedRequest.session);
-                // Create final result
                 const isVerifyResponse = 'verified' in processedResult;
                 const result = processedResult;
                 this.resultSubject.next(result);
@@ -78,7 +62,6 @@ let PhoneAuthService = class PhoneAuthService {
                 return result;
             }
             catch (error) {
-                // Enhance error with context
                 const authError = error;
                 const enhancedError = Object.assign(Object.assign({}, authError), { context: authError.context || {
                         useCase: options.use_case,
@@ -95,25 +78,16 @@ let PhoneAuthService = class PhoneAuthService {
             }
         });
     }
-    /**
-     * Get phone number
-     */
     getPhoneNumber(options) {
         return __awaiter(this, void 0, void 0, function* () {
             return this.verify(Object.assign({ use_case: 'GetPhoneNumber' }, options));
         });
     }
-    /**
-     * Verify specific phone number
-     */
     verifyPhoneNumber(phoneNumber, options) {
         return __awaiter(this, void 0, void 0, function* () {
             return this.verify(Object.assign({ use_case: 'VerifyPhoneNumber', phone_number: phoneNumber }, options));
         });
     }
-    /**
-     * Reset state
-     */
     reset() {
         this.isLoadingSubject.next(false);
         this.errorSubject.next(null);

package/dist/adapters/react/index.js

@@ -5,7 +5,6 @@ var usePhoneAuth_1 = require("./usePhoneAuth");
 Object.defineProperty(exports, "usePhoneAuth", { enumerable: true, get: function () { return usePhoneAuth_1.usePhoneAuth; } });
 var useClient_1 = require("./useClient");
 Object.defineProperty(exports, "useClient", { enumerable: true, get: function () { return useClient_1.useClient; } });
-// Export error utilities
 var phone_auth_1 = require("../../core/phone-auth");
 Object.defineProperty(exports, "PhoneAuthErrorCode", { enumerable: true, get: function () { return phone_auth_1.PhoneAuthErrorCode; } });
 Object.defineProperty(exports, "isPhoneAuthError", { enumerable: true, get: function () { return phone_auth_1.isPhoneAuthError; } });
@@ -16,13 +15,11 @@ Object.defineProperty(exports, "getRetryDelay", { enumerable: true, get: functio
 Object.defineProperty(exports, "isRetryableError", { enumerable: true, get: function () { return phone_auth_1.isRetryableError; } });
 Object.defineProperty(exports, "serializeError", { enumerable: true, get: function () { return phone_auth_1.serializeError; } });
 Object.defineProperty(exports, "createErrorBreadcrumb", { enumerable: true, get: function () { return phone_auth_1.createErrorBreadcrumb; } });
-// Export constants for use case and strategy
 var types_1 = require("../../core/phone-auth/types");
 Object.defineProperty(exports, "UseCase", { enumerable: true, get: function () { return types_1.USE_CASE; } });
 Object.defineProperty(exports, "AuthenticationStrategy", { enumerable: true, get: function () { return types_1.AUTHENTICATION_STRATEGY; } });
 Object.defineProperty(exports, "BrowserError", { enumerable: true, get: function () { return types_1.BrowserError; } });
 Object.defineProperty(exports, "BrowserErrorCode", { enumerable: true, get: function () { return types_1.BrowserErrorCode; } });
 Object.defineProperty(exports, "BrowserName", { enumerable: true, get: function () { return types_1.BrowserName; } });
-// Export the PhoneAuthClient class for direct use
 var phone_auth_2 = require("../../core/phone-auth");
 Object.defineProperty(exports, "PhoneAuthClient", { enumerable: true, get: function () { return phone_auth_2.PhoneAuthClient; } });

package/dist/adapters/react/useClient.js

@@ -31,7 +31,6 @@ function useClient(config) {
         };
     }, []);
     const authenticate = (authUrl, options) => __awaiter(this, void 0, void 0, function* () {
-        // Legacy authentication removed - use setToken directly
         const error = new Error('authenticate method is deprecated. Use client.setToken() directly.');
         setError(error);
         setLoading(false);

package/dist/adapters/react/usePhoneAuth.js

@@ -18,13 +18,8 @@ function usePhoneAuth(config = {}) {
     const [result, setResult] = (0, react_1.useState)(null);
     const [currentStep, setCurrentStep] = (0, react_1.useState)('idle');
     const lastRequestRef = (0, react_1.useRef)(null);
-    // Create client instance with callbacks
-    const client = (0, react_1.useMemo)(() => new phone_auth_1.PhoneAuthClient(Object.assign(Object.assign({}, config), { 
-        // Pass through callbacks if provided
-        onCrossDeviceDetected: config.onCrossDeviceDetected, onRetryAttempt: config.onRetryAttempt })), [JSON.stringify(config)]);
-    // Check browser support
+    const client = (0, react_1.useMemo)(() => new phone_auth_1.PhoneAuthClient(Object.assign(Object.assign({}, config), { onCrossDeviceDetected: config.onCrossDeviceDetected, onRetryAttempt: config.onRetryAttempt })), [JSON.stringify(config)]);
     const isSupported = (0, react_1.useMemo)(() => client.isSupported(), [client]);
-    // Verify method with silent retry support
     const verify = (0, react_1.useCallback)((options) => __awaiter(this, void 0, void 0, function* () {
         setIsLoading(true);
         setError(null);
@@ -32,14 +27,12 @@ function usePhoneAuth(config = {}) {
         setCurrentStep('requesting');
         lastRequestRef.current = options;
         try {
-            // Use the client's verify method which includes retry logic
             const verificationResult = yield client.verify(options);
             setResult(verificationResult);
             setCurrentStep('complete');
             return verificationResult;
         }
         catch (err) {
-            // Error is only set after all retries are exhausted
             const authError = err;
             setError(authError);
             setCurrentStep('idle');
@@ -49,47 +42,39 @@ function usePhoneAuth(config = {}) {
             setIsLoading(false);
         }
     }), [client]);
-    // Manual retry method
     const retryLastRequest = (0, react_1.useCallback)(() => __awaiter(this, void 0, void 0, function* () {
         if (!lastRequestRef.current) {
             throw new Error('No previous request to retry');
         }
         return verify(lastRequestRef.current);
     }), [verify]);
-    // Convenience methods
     const getPhoneNumber = (0, react_1.useCallback)((options) => verify(Object.assign({ use_case: 'GetPhoneNumber' }, options)), [verify]);
     const verifyPhoneNumber = (0, react_1.useCallback)((phoneNumber, options) => verify(Object.assign({ use_case: 'VerifyPhoneNumber', phone_number: phoneNumber }, options)), [verify]);
-    // Reset state
     const reset = (0, react_1.useCallback)(() => {
         setIsLoading(false);
         setError(null);
         setResult(null);
         setCurrentStep('idle');
     }, []);
-    // Expose granular methods directly from client for better discoverability
     const preparePhoneRequest = (0, react_1.useCallback)((options) => client.preparePhoneRequest(options), [client]);
     const invokeSecurePrompt = (0, react_1.useCallback)((prepareResponse) => client.invokeSecurePrompt(prepareResponse), [client]);
     const getPhoneNumberCredential = (0, react_1.useCallback)((credentialResponse, session) => client.getPhoneNumber(credentialResponse, session), [client]);
     const verifyPhoneNumberCredential = (0, react_1.useCallback)((credentialResponse, session) => client.verifyPhoneNumber(credentialResponse, session), [client]);
     return {
-        // State
         isLoading,
         error,
         result,
         currentStep,
         isSupported,
-        // High-level methods
         verify,
         getPhoneNumber,
         verifyPhoneNumber,
         retryLastRequest,
         reset,
-        // Granular methods (directly exposed for better discoverability)
         preparePhoneRequest,
         invokeSecurePrompt,
         getPhoneNumberCredential,
         verifyPhoneNumberCredential,
-        // Client instance (still available for advanced usage)
         client
     };
 }

package/dist/adapters/vanilla/client.js

@@ -17,7 +17,6 @@ class VanillaClient {
     }
     authenticate(authUrl, options) {
         return __awaiter(this, void 0, void 0, function* () {
-            // Legacy authentication removed - use setToken directly
             throw new Error('authenticate method is deprecated. Use client.setToken() directly.');
         });
     }

package/dist/adapters/vanilla/index.js

@@ -5,7 +5,6 @@ var client_1 = require("./client");
 Object.defineProperty(exports, "ClientManager", { enumerable: true, get: function () { return client_1.VanillaClient; } });
 var phone_auth_1 = require("./phone-auth");
 Object.defineProperty(exports, "PhoneAuthManager", { enumerable: true, get: function () { return phone_auth_1.PhoneAuthManager; } });
-// Export error utilities
 var phone_auth_2 = require("../../core/phone-auth");
 Object.defineProperty(exports, "PhoneAuthErrorCode", { enumerable: true, get: function () { return phone_auth_2.PhoneAuthErrorCode; } });
 Object.defineProperty(exports, "isPhoneAuthError", { enumerable: true, get: function () { return phone_auth_2.isPhoneAuthError; } });

package/dist/adapters/vanilla/phone-auth.js

@@ -23,18 +23,11 @@ class PhoneAuthManager {
             isSupported: this.client.isSupported()
         };
     }
-    /**
-     * Get current state
-     */
     getState() {
         return Object.assign({}, this.state);
     }
-    /**
-     * Subscribe to state changes
-     */
     subscribe(listener) {
         this.listeners.push(listener);
-        // Return unsubscribe function
         return () => {
             const index = this.listeners.indexOf(listener);
             if (index !== -1) {
@@ -42,16 +35,10 @@ class PhoneAuthManager {
             }
         };
     }
-    /**
-     * Update state and notify listeners
-     */
     updateState(updates) {
         this.state = Object.assign(Object.assign({}, this.state), updates);
         this.listeners.forEach(listener => listener(this.getState()));
     }
-    /**
-     * Verify phone number
-     */
     verify(options) {
         return __awaiter(this, void 0, void 0, function* () {
             this.updateState({
@@ -61,19 +48,14 @@ class PhoneAuthManager {
                 currentStep: 'requesting'
             });
             try {
-                // Step 1: Prepare request
                 const preparedRequest = yield this.client.preparePhoneRequest(options);
-                // Step 2: Show authenticating state
                 this.updateState({ currentStep: 'authenticating' });
                 const credentialResponse = yield this.client.invokeSecurePrompt(preparedRequest);
-                // Step 3: Process response through appropriate endpoint
                 this.updateState({ currentStep: 'processing' });
-                // Cast to credential type - adapters never use headless mode
                 const credential = credentialResponse;
                 const processedResult = options.use_case === 'GetPhoneNumber'
                     ? yield this.client.getPhoneNumber(credential, preparedRequest.session)
                     : yield this.client.verifyPhoneNumber(credential, preparedRequest.session);
-                // Create final result
                 const isVerifyResponse = 'verified' in processedResult;
                 const result = processedResult;
                 this.updateState({
@@ -84,7 +66,6 @@ class PhoneAuthManager {
                 return result;
             }
             catch (error) {
-                // Enhance error with context
                 const authError = error;
                 const enhancedError = Object.assign(Object.assign({}, authError), { context: authError.context || {
                         useCase: options.use_case,
@@ -101,25 +82,16 @@ class PhoneAuthManager {
             }
         });
     }
-    /**
-     * Get phone number
-     */
     getPhoneNumber(options) {
         return __awaiter(this, void 0, void 0, function* () {
             return this.verify(Object.assign({ use_case: 'GetPhoneNumber' }, options));
         });
     }
-    /**
-     * Verify specific phone number
-     */
     verifyPhoneNumber(phoneNumber, options) {
         return __awaiter(this, void 0, void 0, function* () {
             return this.verify(Object.assign({ use_case: 'VerifyPhoneNumber', phone_number: phoneNumber }, options));
         });
     }
-    /**
-     * Reset state
-     */
     reset() {
         this.updateState({
             isLoading: false,
@@ -128,9 +100,6 @@ class PhoneAuthManager {
             currentStep: 'idle'
         });
     }
-    /**
-     * Check if browser supports secure phone authentication
-     */
     isSupported() {
         return this.state.isSupported;
     }

package/dist/adapters/vue/index.js

@@ -9,8 +9,6 @@ var client_1 = require("../../core/client");
 Object.defineProperty(exports, "SDKClient", { enumerable: true, get: function () { return client_1.SDKClient; } });
 var phone_auth_1 = require("../../core/phone-auth");
 Object.defineProperty(exports, "PhoneAuthClient", { enumerable: true, get: function () { return phone_auth_1.PhoneAuthClient; } });
-// API response types are already exported via core/phone-auth/types
-// Export error utilities
 var phone_auth_2 = require("../../core/phone-auth");
 Object.defineProperty(exports, "PhoneAuthErrorCode", { enumerable: true, get: function () { return phone_auth_2.PhoneAuthErrorCode; } });
 Object.defineProperty(exports, "isPhoneAuthError", { enumerable: true, get: function () { return phone_auth_2.isPhoneAuthError; } });
@@ -21,14 +19,12 @@ Object.defineProperty(exports, "getRetryDelay", { enumerable: true, get: functio
 Object.defineProperty(exports, "isRetryableError", { enumerable: true, get: function () { return phone_auth_2.isRetryableError; } });
 Object.defineProperty(exports, "serializeError", { enumerable: true, get: function () { return phone_auth_2.serializeError; } });
 Object.defineProperty(exports, "createErrorBreadcrumb", { enumerable: true, get: function () { return phone_auth_2.createErrorBreadcrumb; } });
-// Export constants for use case and strategy
 var types_1 = require("../../core/phone-auth/types");
 Object.defineProperty(exports, "UseCase", { enumerable: true, get: function () { return types_1.USE_CASE; } });
 Object.defineProperty(exports, "AuthenticationStrategy", { enumerable: true, get: function () { return types_1.AUTHENTICATION_STRATEGY; } });
 Object.defineProperty(exports, "BrowserError", { enumerable: true, get: function () { return types_1.BrowserError; } });
 Object.defineProperty(exports, "BrowserErrorCode", { enumerable: true, get: function () { return types_1.BrowserErrorCode; } });
 Object.defineProperty(exports, "BrowserName", { enumerable: true, get: function () { return types_1.BrowserName; } });
-// Export API constants from api-types
 var api_types_1 = require("../../core/phone-auth/api-types");
 Object.defineProperty(exports, "USE_CASE", { enumerable: true, get: function () { return api_types_1.USE_CASE; } });
 Object.defineProperty(exports, "ERROR_CODE", { enumerable: true, get: function () { return api_types_1.ERROR_CODE; } });

package/dist/adapters/vue/useClient.js

@@ -44,17 +44,14 @@ function useClient(config) {
             const authenticate = (authUrl) => __awaiter(this, void 0, void 0, function* () {
                 loading.value = true;
                 error.value = null;
-                // Clean up previous authentication if exists
                 if (cleanup) {
                     cleanup();
                     cleanup = null;
                 }
-                // Legacy authentication removed - use setToken directly
                 error.value = new Error('authenticate method is deprecated. Use client.setToken() directly.');
                 loading.value = false;
                 throw error.value;
             });
-            // Cleanup on component unmount
             (0, vue_1.onUnmounted)(() => {
                 if (cleanup) {
                     cleanup();
@@ -107,7 +104,6 @@ function useClient(config) {
                     loading.value = false;
                 }
             });
-            // Low-level methods for advanced control
             const preparePhoneRequest = (options) => __awaiter(this, void 0, void 0, function* () {
                 return client.value.phoneAuth.preparePhoneRequest(options);
             });
@@ -121,7 +117,6 @@ function useClient(config) {
                 isSupported,
                 getPhoneNumber,
                 verifyPhoneNumber,
-                // Low-level API for advanced usage
                 preparePhoneRequest,
                 invokeSecurePrompt
             };

package/dist/adapters/vue/usePhoneAuth.js

@@ -13,43 +13,31 @@ exports.usePhoneAuth = usePhoneAuth;
 const vue_1 = require("vue");
 const phone_auth_1 = require("../../core/phone-auth");
 function usePhoneAuth(config = {}) {
-    // State management
     const isLoading = (0, vue_1.ref)(false);
     const error = (0, vue_1.ref)(null);
     const result = (0, vue_1.ref)(null);
     const currentStep = (0, vue_1.ref)('idle');
-    // Create client instance with callbacks
-    const client = new phone_auth_1.PhoneAuthClient(Object.assign(Object.assign({}, config), { 
-        // Callbacks are now properly typed through AuthConfig
-        onCrossDeviceDetected: config.onCrossDeviceDetected, onRetryAttempt: config.onRetryAttempt }));
-    // Check browser support
+    const client = new phone_auth_1.PhoneAuthClient(Object.assign(Object.assign({}, config), { onCrossDeviceDetected: config.onCrossDeviceDetected, onRetryAttempt: config.onRetryAttempt }));
     const isSupported = (0, vue_1.computed)(() => client.isSupported());
-    // Verify method - internal wrapper that converts to API format
     const verify = (options) => __awaiter(this, void 0, void 0, function* () {
         isLoading.value = true;
         error.value = null;
         result.value = null;
         currentStep.value = 'requesting';
         try {
-            // Step 1: Prepare the request
             const preparedRequest = yield client.preparePhoneRequest(options);
-            // Step 2: User authentication
             currentStep.value = 'authenticating';
             const credentialResponse = yield client.invokeSecurePrompt(preparedRequest);
-            // Step 3: Process the response through appropriate endpoint
             currentStep.value = 'processing';
-            // Cast to credential type - adapters never use headless mode
             const credential = credentialResponse;
             const verificationResult = options.use_case === 'GetPhoneNumber'
                 ? yield client.getPhoneNumber(credential, preparedRequest.session)
                 : yield client.verifyPhoneNumber(credential, preparedRequest.session);
-            // Use the result directly - it's already the correct type
             result.value = verificationResult;
             currentStep.value = 'complete';
             return result.value;
         }
         catch (err) {
-            // Enhance error with context if it's an AuthError
             const authError = err;
             const enhancedError = Object.assign(Object.assign({}, authError), { context: authError.context || {
                     useCase: options.use_case,
@@ -65,39 +53,32 @@ function usePhoneAuth(config = {}) {
             isLoading.value = false;
         }
     });
-    // Convenience methods
     const getPhoneNumber = (options) => verify(Object.assign({ use_case: 'GetPhoneNumber' }, options));
     const verifyPhoneNumber = (phoneNumber, options) => verify(Object.assign({ use_case: 'VerifyPhoneNumber', phone_number: phoneNumber }, options));
-    // Reset state
     const reset = () => {
         isLoading.value = false;
         error.value = null;
         result.value = null;
         currentStep.value = 'idle';
     };
-    // Expose granular methods directly from client for better discoverability
     const preparePhoneRequest = client.preparePhoneRequest.bind(client);
     const invokeSecurePrompt = client.invokeSecurePrompt.bind(client);
     const getPhoneNumberCredential = client.getPhoneNumber.bind(client);
     const verifyPhoneNumberCredential = client.verifyPhoneNumber.bind(client);
     return {
-        // State (readonly)
         isLoading: (0, vue_1.readonly)(isLoading),
         error: (0, vue_1.readonly)(error),
         result: (0, vue_1.readonly)(result),
         currentStep: (0, vue_1.readonly)(currentStep),
         isSupported: (0, vue_1.readonly)(isSupported),
-        // High-level methods
         verify,
         getPhoneNumber,
         verifyPhoneNumber,
         reset,
-        // Granular methods (directly exposed for better discoverability)
         preparePhoneRequest,
         invokeSecurePrompt,
         getPhoneNumberCredential,
         verifyPhoneNumberCredential,
-        // Client instance (still available for advanced usage)
         client
     };
 }