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

package/README.md

@@ -14,19 +14,9 @@ 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 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)
+## What's New in v4.4
+
+### 🎉 Enhanced Control & Better DX
 - **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
@@ -41,7 +31,6 @@ 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)
@@ -157,84 +146,6 @@ 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.
@@ -665,22 +576,11 @@ interface InvokeOptions {
   
   // UI customization (when preventDefaultUI is false)
   modalOptions?: {
-    // 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
+    className?: string;
+    title?: string;
+    description?: string;
+    buttonText?: string;
+    showCloseButton?: boolean;
   };
   
   // Callbacks

package/dist/adapters/angular/index.js

@@ -5,6 +5,7 @@ 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,10 +11,28 @@ 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,22 +24,33 @@ 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);
@@ -47,14 +58,19 @@ 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);
@@ -62,6 +78,7 @@ 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,
@@ -78,16 +95,25 @@ 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,6 +5,7 @@ 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; } });
@@ -15,11 +16,13 @@ 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,6 +31,7 @@ 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,8 +18,13 @@ 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);
-    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)]);
+    // 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 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);
@@ -27,12 +32,14 @@ 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');
@@ -42,39 +49,47 @@ 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,6 +17,7 @@ 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,6 +5,7 @@ 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,11 +23,18 @@ 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) {
@@ -35,10 +42,16 @@ 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({
@@ -48,14 +61,19 @@ 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({
@@ -66,6 +84,7 @@ 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,
@@ -82,16 +101,25 @@ 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,
@@ -100,6 +128,9 @@ class PhoneAuthManager {
             currentStep: 'idle'
         });
     }
+    /**
+     * Check if browser supports secure phone authentication
+     */
     isSupported() {
         return this.state.isSupported;
     }

package/dist/adapters/vue/index.js

@@ -9,6 +9,8 @@ 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; } });
@@ -19,12 +21,14 @@ 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,14 +44,17 @@ 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();
@@ -104,6 +107,7 @@ 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);
             });
@@ -117,6 +121,7 @@ function useClient(config) {
                 isSupported,
                 getPhoneNumber,
                 verifyPhoneNumber,
+                // Low-level API for advanced usage
                 preparePhoneRequest,
                 invokeSecurePrompt
             };

package/dist/adapters/vue/usePhoneAuth.js

@@ -13,31 +13,43 @@ 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');
-    const client = new phone_auth_1.PhoneAuthClient(Object.assign(Object.assign({}, config), { onCrossDeviceDetected: config.onCrossDeviceDetected, onRetryAttempt: config.onRetryAttempt }));
+    // 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 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,
@@ -53,32 +65,39 @@ 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
     };
 }