@sparkvault/sdk 1.0.0 → 1.1.5

package/dist/sparkvault.esm.js

@@ -726,7 +726,18 @@ class IdentityApi {
      * Start passkey registration
      */
     async startPasskeyRegister(email) {
-        return this.request('POST', '/passkey/register', { email });
+        // Backend returns { options: PublicKeyCredentialCreationOptions, session: {...} }
+        // Extract and flatten to match PasskeyChallengeResponse
+        const response = await this.request('POST', '/passkey/register', { email });
+        return {
+            challenge: response.options.challenge,
+            rpId: response.options.rp.id,
+            rpName: response.options.rp.name,
+            userId: response.options.user.id,
+            userName: response.options.user.name,
+            timeout: response.options.timeout,
+            session: response.session,
+        };
     }
     /**
      * Complete passkey registration
@@ -734,7 +745,7 @@ class IdentityApi {
     async completePasskeyRegister(params) {
         const attestation = params.credential.response;
         return this.request('POST', '/passkey/register/complete', {
-            email: params.email,
+            session: params.session,
             credential: {
                 id: params.credential.id,
                 rawId: arrayBufferToBase64url(params.credential.rawId),
@@ -750,7 +761,17 @@ class IdentityApi {
      * Start passkey verification
      */
     async startPasskeyVerify(email) {
-        return this.request('POST', '/passkey/verify', { email });
+        // Backend returns { options: PublicKeyCredentialRequestOptions, session: {...} }
+        // Extract and flatten to match PasskeyChallengeResponse
+        const response = await this.request('POST', '/passkey/verify', { email });
+        return {
+            challenge: response.options.challenge,
+            rpId: response.options.rpId,
+            rpName: 'SparkVault Identity', // Not returned by verify endpoint
+            timeout: response.options.timeout,
+            allowCredentials: response.options.allowCredentials,
+            session: response.session,
+        };
     }
     /**
      * Complete passkey verification
@@ -758,7 +779,7 @@ class IdentityApi {
     async completePasskeyVerify(params) {
         const assertion = params.credential.response;
         return this.request('POST', '/passkey/verify/complete', {
-            email: params.email,
+            session: params.session,
             credential: {
                 id: params.credential.id,
                 rawId: arrayBufferToBase64url(params.credential.rawId),
@@ -795,12 +816,16 @@ class IdentityApi {
         return `${this.baseUrl}/saml/${provider}?${params}`;
     }
     /**
-     * Send SparkLink email for identity verification
+     * Send SparkLink email for identity verification.
+     * Includes openerOrigin for postMessage-based completion notification.
      */
     async sendSparkLink(email) {
         return this.request('POST', '/sparklink/send', {
             email,
             type: 'verify_identity',
+            // Send opener origin for postMessage on verification completion
+            // This allows the ceremony page to notify the SDK directly instead of polling
+            openerOrigin: typeof window !== 'undefined' ? window.location.origin : undefined,
         });
     }
     /**
@@ -1243,15 +1268,15 @@ class PasskeyHandler {
      */
     async register() {
         try {
-            const challenge = await this.api.startPasskeyRegister(this.state.recipient);
+            const challengeResponse = await this.api.startPasskeyRegister(this.state.recipient);
             const publicKeyOptions = {
-                challenge: base64urlToArrayBuffer(challenge.challenge),
+                challenge: base64urlToArrayBuffer(challengeResponse.challenge),
                 rp: {
-                    id: challenge.rpId,
-                    name: challenge.rpName,
+                    id: challengeResponse.rpId,
+                    name: challengeResponse.rpName,
                 },
                 user: {
-                    id: base64urlToArrayBuffer(challenge.userId ?? this.state.recipient),
+                    id: base64urlToArrayBuffer(challengeResponse.userId ?? this.state.recipient),
                     name: this.state.recipient,
                     displayName: this.state.recipient,
                 },
@@ -1259,7 +1284,7 @@ class PasskeyHandler {
                     { type: 'public-key', alg: -7 }, // ES256
                     { type: 'public-key', alg: -257 }, // RS256
                 ],
-                timeout: challenge.timeout,
+                timeout: challengeResponse.timeout,
                 authenticatorSelection: {
                     residentKey: 'preferred',
                     userVerification: 'preferred',
@@ -1277,7 +1302,7 @@ class PasskeyHandler {
                 };
             }
             const response = await this.api.completePasskeyRegister({
-                email: this.state.recipient,
+                session: challengeResponse.session,
                 credential,
             });
             // Update state - user now has a passkey
@@ -1300,13 +1325,13 @@ class PasskeyHandler {
      */
     async verify() {
         try {
-            const challenge = await this.api.startPasskeyVerify(this.state.recipient);
+            const challengeResponse = await this.api.startPasskeyVerify(this.state.recipient);
             const publicKeyOptions = {
-                challenge: base64urlToArrayBuffer(challenge.challenge),
-                rpId: challenge.rpId,
-                timeout: challenge.timeout,
+                challenge: base64urlToArrayBuffer(challengeResponse.challenge),
+                rpId: challengeResponse.rpId,
+                timeout: challengeResponse.timeout,
                 userVerification: 'preferred',
-                allowCredentials: challenge.allowCredentials?.map((cred) => ({
+                allowCredentials: challengeResponse.allowCredentials?.map((cred) => ({
                     id: base64urlToArrayBuffer(cred.id),
                     type: cred.type,
                     transports: ['internal', 'hybrid', 'usb', 'ble', 'nfc'],
@@ -1323,7 +1348,7 @@ class PasskeyHandler {
                 };
             }
             const response = await this.api.completePasskeyVerify({
-                email: this.state.recipient,
+                session: challengeResponse.session,
                 credential,
             });
             return {
@@ -1731,7 +1756,7 @@ function getStyles(options) {
        ======================================== */
 
     .sv-body {
-      padding: 20px;
+      padding: 24px;
       overflow-y: auto;
       flex: 1;
     }
@@ -2276,6 +2301,71 @@ function getStyles(options) {
        TOTP VIEW
        ======================================== */
 
+    .sv-resend-row {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      margin-top: 16px;
+    }
+
+    .sv-resend-btn {
+      display: inline-flex;
+      align-items: center;
+      gap: 6px;
+      color: ${tokens.textSecondary};
+      font-size: 13px;
+      font-weight: 500;
+      text-decoration: none;
+      cursor: pointer;
+      background: none;
+      border: none;
+      padding: 0;
+      transition: color 0.15s ease;
+    }
+
+    .sv-resend-btn:hover:not(:disabled) {
+      color: ${tokens.primary};
+    }
+
+    .sv-resend-btn:disabled {
+      opacity: 0.5;
+      cursor: not-allowed;
+    }
+
+    .sv-resend-btn svg {
+      width: 14px;
+      height: 14px;
+    }
+
+    .sv-resend-timer {
+      font-size: 13px;
+      font-weight: 500;
+      color: ${tokens.textMuted};
+      min-width: 24px;
+      text-align: right;
+    }
+
+    .sv-alt-method-link {
+      display: block;
+      width: 100%;
+      text-align: center;
+      color: ${tokens.textSecondary};
+      font-size: 13px;
+      font-weight: 400;
+      text-decoration: none;
+      cursor: pointer;
+      background: none;
+      border: none;
+      padding: 16px 0 0 0;
+      margin-top: 8px;
+      transition: color 0.15s ease;
+    }
+
+    .sv-alt-method-link:hover {
+      color: ${tokens.primary};
+      text-decoration: underline;
+    }
+
     .sv-resend-container {
       text-align: center;
       margin-top: 16px;
@@ -2464,6 +2554,36 @@ function getStyles(options) {
       color: ${tokens.textSecondary};
     }
 
+    /* SparkLink Expired State */
+    .sv-sparklink-expired {
+      flex-direction: column;
+      gap: 12px;
+      background: ${tokens.bgSubtle};
+      border: 1px solid ${tokens.border};
+    }
+
+    .sv-sparklink-expired-icon {
+      display: flex;
+      justify-content: center;
+    }
+
+    .sv-sparklink-expired-icon svg {
+      width: 48px;
+      height: 48px;
+    }
+
+    .sv-sparklink-expired-text {
+      font-size: 14px;
+      font-weight: 500;
+      color: ${tokens.textSecondary};
+      text-align: center;
+    }
+
+    .sv-expired-icon {
+      width: 48px;
+      height: 48px;
+    }
+
     /* ========================================
        DIVIDER
        ======================================== */
@@ -2511,6 +2631,7 @@ function getStyles(options) {
     .sv-inline-container {
       display: flex;
       flex-direction: column;
+      height: 100%;
       background: ${tokens.bg};
       color: ${tokens.textPrimary};
       font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
@@ -2526,7 +2647,11 @@ function getStyles(options) {
     }
 
     .sv-inline-body {
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
       min-height: 200px;
+      flex: 1;
     }
 
     /* ========================================
@@ -2545,7 +2670,7 @@ function getStyles(options) {
       }
 
       .sv-body {
-        padding: 20px;
+        padding: 24px;
       }
 
       .sv-totp-digit {
@@ -2632,6 +2757,27 @@ function createBackArrowIcon() {
     }));
     return svg;
 }
+/**
+ * Resend/refresh icon - circular arrow
+ */
+function createResendIcon() {
+    const svg = createSvgElement('0 0 16 16');
+    svg.appendChild(createPath('M13.5 8a5.5 5.5 0 11-1.21-3.45', {
+        stroke: 'currentColor',
+        'stroke-width': '1.5',
+        'stroke-linecap': 'round',
+        'stroke-linejoin': 'round',
+        fill: 'none',
+    }));
+    svg.appendChild(createPath('M13.5 2.5v2.5H11', {
+        stroke: 'currentColor',
+        'stroke-width': '1.5',
+        'stroke-linecap': 'round',
+        'stroke-linejoin': 'round',
+        fill: 'none',
+    }));
+    return svg;
+}
 /**
  * Close (X) icon
  */
@@ -2689,6 +2835,32 @@ function createErrorIcon() {
     svg.appendChild(group);
     return svg;
 }
+/**
+ * Expired icon - grayscale triangle alert for expired states
+ */
+function createExpiredIcon() {
+    const svg = createSvgElement('0 0 48 48', 48, 48);
+    svg.classList.add('sv-expired-icon');
+    // Circle background - muted gray
+    svg.appendChild(createCircle(24, 24, 22, {
+        fill: '#F5F5F5',
+        stroke: '#E5E5E5',
+        'stroke-width': '1',
+    }));
+    // Alert triangle - gray
+    const group = document.createElementNS('http://www.w3.org/2000/svg', 'g');
+    group.setAttribute('transform', 'translate(10, 12)');
+    group.appendChild(createPath('M14 4L2 24h24L14 4z', { fill: '#737373' }));
+    // Exclamation
+    group.appendChild(createPath('M14 10v5', {
+        stroke: '#FFFFFF',
+        'stroke-width': '2',
+        'stroke-linecap': 'round',
+    }));
+    group.appendChild(createCircle(14, 19, 1, { fill: '#FFFFFF' }));
+    svg.appendChild(group);
+    return svg;
+}
 /**
  * Method icons
  */
@@ -3528,6 +3700,7 @@ class TotpVerifyView {
         this.inputElements = [];
         this.submitButton = null;
         this.resendButton = null;
+        this.timerDisplay = null;
         this.backLink = null;
         this.errorContainer = null;
         this.resendTimer = null;
@@ -3545,14 +3718,12 @@ class TotpVerifyView {
     }
     render() {
         const container = div();
-        this.backLink = this.createBackLink();
         const title = document.createElement('h3');
         title.className = 'sv-title';
         title.textContent = 'Enter verification code';
-        const methodText = this.props.method === 'email' ? 'email' : 'phone';
         const subtitle = document.createElement('p');
         subtitle.className = 'sv-subtitle';
-        subtitle.innerHTML = `We sent a 6-digit code to your ${methodText}<br><strong>${escapeHtml(this.props.email)}</strong>`;
+        subtitle.innerHTML = `Enter the 6 digit code that has been sent to <strong>${escapeHtml(this.props.email)}</strong> to log in.`;
         this.errorContainer = div();
         if (this.props.error) {
             this.errorContainer.appendChild(errorMessage(this.props.error));
@@ -3570,35 +3741,32 @@ class TotpVerifyView {
                 this.startBackoff(this.props.backoffExpires);
             }
         }
-        const resendContainer = div('sv-resend-container');
+        // Resend row: icon + text on left, timer on right
+        const resendContainer = div('sv-resend-row');
         this.resendButton = document.createElement('button');
-        this.resendButton.className = 'sv-back-link';
-        this.resendButton.textContent = 'Resend code';
+        this.resendButton.className = 'sv-resend-btn';
+        this.resendButton.appendChild(createResendIcon());
+        this.resendButton.appendChild(document.createTextNode('Resend code'));
         this.resendButton.addEventListener('click', this.boundHandleResend);
+        this.timerDisplay = document.createElement('span');
+        this.timerDisplay.className = 'sv-resend-timer';
         resendContainer.appendChild(this.resendButton);
-        // Use flex column layout so we can use CSS order for tab order control
-        container.style.display = 'flex';
-        container.style.flexDirection = 'column';
-        // Append in TAB ORDER (not visual order) - back link last for tab navigation
+        resendContainer.appendChild(this.timerDisplay);
+        // "Log in another way" link at bottom
+        this.backLink = document.createElement('button');
+        this.backLink.className = 'sv-alt-method-link';
+        this.backLink.textContent = 'Log in another way';
+        this.backLink.addEventListener('click', this.boundHandleBack);
         container.appendChild(title);
         container.appendChild(subtitle);
         container.appendChild(this.errorContainer);
         container.appendChild(inputGroup);
         container.appendChild(this.submitButton);
         container.appendChild(resendContainer);
-        container.appendChild(this.backLink); // Last in DOM = last in tab order
+        container.appendChild(this.backLink);
         this.focusTimeoutId = setTimeout(() => this.inputElements[0]?.focus(), 50);
         return container;
     }
-    createBackLink() {
-        const link = document.createElement('button');
-        link.className = 'sv-back-link';
-        link.style.order = '-1'; // Visually keep at top with flexbox (DOM order controls tab order)
-        link.appendChild(createBackArrowIcon());
-        link.appendChild(document.createTextNode(' Choose another method'));
-        link.addEventListener('click', this.boundHandleBack);
-        return link;
-    }
     createInputGroup() {
         const group = div('sv-totp-input-group');
         for (let i = 0; i < CODE_LENGTH; i++) {
@@ -3773,15 +3941,15 @@ class TotpVerifyView {
         this.resendTimer = new CooldownTimer({
             duration: 30,
             onTick: (secondsRemaining) => {
-                if (!this.resendButton)
+                if (!this.resendButton || !this.timerDisplay)
                     return;
-                this.resendButton.textContent = `Resend code (${secondsRemaining}s)`;
+                this.timerDisplay.textContent = `${secondsRemaining}s`;
                 this.resendButton.disabled = true;
             },
             onComplete: () => {
-                if (!this.resendButton)
+                if (!this.resendButton || !this.timerDisplay)
                     return;
-                this.resendButton.textContent = 'Resend code';
+                this.timerDisplay.textContent = '';
                 this.resendButton.disabled = false;
             },
         });
@@ -4021,6 +4189,8 @@ class SparkLinkWaitingView {
         this.expirationTimer = null;
         this.resendTimer = null;
         this.countdownElement = null;
+        this.countdownSection = null;
+        this.waitingSection = null;
         this.resendButton = null;
         this.backLink = null;
         this.fallbackButton = null;
@@ -4039,7 +4209,7 @@ class SparkLinkWaitingView {
         subtitle.className = 'sv-subtitle';
         subtitle.innerHTML = `We sent a secure link to<br><strong>${escapeHtml(this.props.email)}</strong>`;
         // Spinner with message
-        const waitingSection = div('sv-sparklink-waiting');
+        this.waitingSection = div('sv-sparklink-waiting');
         const spinner = document.createElement('div');
         spinner.className = 'sv-spinner sv-spinner-small';
         spinner.setAttribute('role', 'status');
@@ -4047,17 +4217,17 @@ class SparkLinkWaitingView {
         const waitingText = document.createElement('span');
         waitingText.className = 'sv-sparklink-waiting-text';
         waitingText.textContent = 'Waiting for you to click the link...';
-        waitingSection.appendChild(spinner);
-        waitingSection.appendChild(waitingText);
+        this.waitingSection.appendChild(spinner);
+        this.waitingSection.appendChild(waitingText);
         // Countdown timer
-        const countdownSection = div('sv-sparklink-countdown');
+        this.countdownSection = div('sv-sparklink-countdown');
         const countdownLabel = document.createElement('span');
         countdownLabel.textContent = 'Link expires in ';
         this.countdownElement = document.createElement('span');
         this.countdownElement.className = 'sv-sparklink-countdown-time';
         this.startExpirationTimer();
-        countdownSection.appendChild(countdownLabel);
-        countdownSection.appendChild(this.countdownElement);
+        this.countdownSection.appendChild(countdownLabel);
+        this.countdownSection.appendChild(this.countdownElement);
         // Resend button
         const resendContainer = div('sv-resend-container');
         this.resendButton = document.createElement('button');
@@ -4075,8 +4245,8 @@ class SparkLinkWaitingView {
         container.appendChild(this.backLink);
         container.appendChild(title);
         container.appendChild(subtitle);
-        container.appendChild(waitingSection);
-        container.appendChild(countdownSection);
+        container.appendChild(this.waitingSection);
+        container.appendChild(this.countdownSection);
         container.appendChild(resendContainer);
         container.appendChild(fallbackContainer);
         return container;
@@ -4118,13 +4288,36 @@ class SparkLinkWaitingView {
                 this.countdownElement.textContent = this.formatTime(secondsRemaining);
             },
             onExpired: () => {
-                if (!this.countdownElement)
-                    return;
-                this.countdownElement.textContent = 'Expired';
+                this.showExpiredState();
             },
         });
         this.expirationTimer.start();
     }
+    /**
+     * Switch to expired state - static icon, no animation, helpful message
+     */
+    showExpiredState() {
+        // Notify renderer to stop polling
+        this.props.onExpired();
+        // Update waiting section: replace spinner with expired icon
+        if (this.waitingSection) {
+            this.waitingSection.innerHTML = '';
+            this.waitingSection.classList.add('sv-sparklink-expired');
+            // Add expired icon
+            const iconContainer = div('sv-sparklink-expired-icon');
+            iconContainer.appendChild(createExpiredIcon());
+            this.waitingSection.appendChild(iconContainer);
+            // Add expired message
+            const expiredText = document.createElement('span');
+            expiredText.className = 'sv-sparklink-expired-text';
+            expiredText.textContent = 'This link has expired';
+            this.waitingSection.appendChild(expiredText);
+        }
+        // Hide countdown section
+        if (this.countdownSection) {
+            this.countdownSection.style.display = 'none';
+        }
+    }
     handleResend() {
         if (this.resendTimer?.isRunning() || !this.resendButton)
             return;
@@ -4251,8 +4444,9 @@ class IdentityRenderer {
         // View management
         this.currentView = null;
         this.focusTimeoutId = null;
-        // SparkLink polling
+        // SparkLink polling and postMessage listener
         this.pollingInterval = null;
+        this.messageListener = null;
         this.container = container;
         this.api = api;
         this.options = options;
@@ -4374,7 +4568,11 @@ class IdentityRenderer {
         this.currentView = view;
         clearChildren(body);
         body.appendChild(view.render());
-        const focusable = body.querySelector('input:not([disabled]), button:not([disabled])');
+        // Auto-focus: prefer inputs first, then primary/method buttons (skip back links)
+        const focusable = body.querySelector('input:not([disabled]), ' +
+            'button.sv-btn-primary:not([disabled]), ' +
+            'button.sv-btn-email-primary:not([disabled]), ' +
+            'button.sv-btn-method:not([disabled])');
         if (focusable) {
             // Clear any previous focus timeout to avoid stacking
             if (this.focusTimeoutId !== null) {
@@ -4447,6 +4645,7 @@ class IdentityRenderer {
                     onResend: () => this.handleSparkLinkResend(),
                     onFallback: () => this.handleSparkLinkFallback(),
                     onBack: () => this.showMethodSelect(),
+                    onExpired: () => this.stopSparkLinkPolling(),
                 });
             case 'oauth-pending':
                 return new LoadingView({ message: `Connecting to ${state.provider}...` });
@@ -4789,41 +4988,73 @@ class IdentityRenderer {
         this.callbacks.onSuccess(pendingResult);
     }
     /**
-     * Start polling for SparkLink verification status.
+     * Start listening for SparkLink verification completion.
+     * Uses postMessage as primary mechanism (instant notification from ceremony page),
+     * with polling as fallback for edge cases where postMessage might fail.
      */
     startSparkLinkPolling(sparkId) {
         this.stopSparkLinkPolling();
+        // Primary: Listen for postMessage from ceremony page
+        // This is faster and more reliable than polling
+        this.messageListener = (event) => {
+            // Validate message structure and type
+            if (!event.data || typeof event.data !== 'object')
+                return;
+            if (event.data.type !== 'sparklink_verified')
+                return;
+            const { token, identity, identityType } = event.data;
+            // Validate required fields
+            if (!token || !identity)
+                return;
+            this.handleSparkLinkVerified({
+                token,
+                identity,
+                identityType: identityType || 'email',
+            });
+        };
+        window.addEventListener('message', this.messageListener);
+        // Fallback: Poll status endpoint every 2 seconds
+        // This catches cases where postMessage might not work (popup blockers, etc)
         this.pollingInterval = setInterval(async () => {
             const status = await this.sparkLinkHandler.checkStatus(sparkId);
             if (status.verified && status.token && status.identity) {
-                this.stopSparkLinkPolling();
-                const result = {
+                this.handleSparkLinkVerified({
                     token: status.token,
                     identity: status.identity,
                     identityType: status.identityType || 'email',
-                };
-                // Check if we should prompt for passkey registration
-                if (await this.shouldShowPasskeyPrompt()) {
-                    this.setState({
-                        view: 'passkey-prompt',
-                        email: this.recipient,
-                        pendingResult: result,
-                    });
-                    return;
-                }
-                this.close();
-                this.callbacks.onSuccess(result);
+                });
             }
         }, 2000);
     }
     /**
-     * Stop SparkLink polling.
+     * Handle successful SparkLink verification (from either postMessage or polling).
+     */
+    async handleSparkLinkVerified(result) {
+        this.stopSparkLinkPolling();
+        // Check if we should prompt for passkey registration
+        if (await this.shouldShowPasskeyPrompt()) {
+            this.setState({
+                view: 'passkey-prompt',
+                email: this.recipient,
+                pendingResult: result,
+            });
+            return;
+        }
+        this.close();
+        this.callbacks.onSuccess(result);
+    }
+    /**
+     * Stop SparkLink polling and message listener.
      */
     stopSparkLinkPolling() {
         if (this.pollingInterval) {
             clearInterval(this.pollingInterval);
             this.pollingInterval = null;
         }
+        if (this.messageListener) {
+            window.removeEventListener('message', this.messageListener);
+            this.messageListener = null;
+        }
     }
     /**
      * Handle resending SparkLink.