@quiltt/vue 5.1.2

package/dist/components/index.js

@@ -0,0 +1,703 @@
+import { version as version$1, inject, computed, ref, watch, onMounted, onUnmounted, toValue, defineComponent, h } from 'vue';
+import { AuthAPI, JsonWebTokenParse, cdnBase } from '@quiltt/core';
+import { getSDKAgent as getSDKAgent$1, getBrowserInfo, extractVersionNumber } from '@quiltt/core/utils';
+
+const oauthRedirectUrlDeprecationWarning = '[Quiltt] `oauthRedirectUrl` is deprecated. Use `appLauncherUrl` instead. `oauthRedirectUrl` will be removed in the next major release.';
+
+/**
+ * Gets the Vue version from the runtime
+ */ const getVueVersion = ()=>{
+    return version$1 || 'unknown';
+};
+/**
+ * Detects if running in a Capacitor native environment
+ */ const getCapacitorInfo = ()=>{
+    if (typeof window === 'undefined') return null;
+    try {
+        if (window.Capacitor?.isNativePlatform?.()) {
+            const platform = window.Capacitor.getPlatform?.() || 'native';
+            // Map platform names to correct capitalization
+            const platformNames = {
+                ios: 'iOS',
+                android: 'Android',
+                web: 'Web'
+            };
+            const platformName = platformNames[platform.toLowerCase()] || platform;
+            return `Capacitor/${platformName}`;
+        }
+    } catch  {
+    // Ignore errors
+    }
+    return null;
+};
+/**
+ * Generates platform information string for Vue web
+ * Format: Vue/<version>; <browser>/<version>
+ * Or with Capacitor: Vue/<version>; Capacitor/<platform>; <browser>/<version>
+ */ const getPlatformInfo = ()=>{
+    const versionStr = getVueVersion();
+    const capacitorInfo = getCapacitorInfo();
+    const browserInfo = getBrowserInfo();
+    if (capacitorInfo) {
+        return `Vue/${versionStr}; ${capacitorInfo}; ${browserInfo}`;
+    }
+    return `Vue/${versionStr}; ${browserInfo}`;
+};
+/**
+ * Generates User-Agent string for Vue SDK
+ * Format: Quiltt/<sdk-version> (Vue/<vue-version>; <browser>/<version>)
+ */ const getSDKAgent = (sdkVersion)=>{
+    const platformInfo = getPlatformInfo();
+    return getSDKAgent$1(sdkVersion, platformInfo);
+};
+
+var version = "5.1.2";
+
+/**
+ * Injection keys and types for Quiltt Vue plugin
+ */ // Injection keys for Quiltt state
+const QuilttSessionKey = Symbol.for('quiltt-session');
+const QuilttSetSessionKey = Symbol.for('quiltt-set-session');
+const QuilttClientIdKey = Symbol.for('quiltt-client-id');
+
+// Initialize JWT parser
+const parse = JsonWebTokenParse;
+/**
+ * Composable for managing Quiltt session state
+ *
+ * Provides methods for importing, creating, and revoking sessions.
+ * Session state is automatically synchronized across components.
+ * Requires QuilttPlugin provider context and throws when used without it.
+ */ const useQuilttSession = ()=>{
+    const sessionRef = inject(QuilttSessionKey);
+    const setSession = inject(QuilttSetSessionKey);
+    const clientIdRef = inject(QuilttClientIdKey);
+    if (!sessionRef || !setSession) {
+        throw new Error('[Quiltt] useQuilttSession must be used within a component where QuilttPlugin is installed. ' + 'Make sure to call app.use(QuilttPlugin) before mounting your app.');
+    }
+    // Create a computed ref for the session
+    const session = computed(()=>sessionRef.value);
+    // Create AuthAPI instance (memoized based on clientId)
+    const getAuth = ()=>new AuthAPI(clientIdRef?.value);
+    /**
+   * Import an existing session token
+   * Validates the token and sets it as the current session
+   */ const importSession = async (token, environmentId)=>{
+        const auth = getAuth();
+        // Is there a token?
+        if (!token) return !!sessionRef.value;
+        // Is this token already imported?
+        if (sessionRef.value && sessionRef.value.token === token) return true;
+        const jwt = parse(token);
+        // Is this token a valid JWT?
+        if (!jwt) return false;
+        // Is this token within the expected environment?
+        if (environmentId && jwt.claims.eid !== environmentId) return false;
+        // Is this token active?
+        const response = await auth.ping(token);
+        switch(response.status){
+            case 200:
+                setSession(token);
+                return true;
+            case 401:
+                return false;
+            default:
+                throw new Error(`AuthAPI.ping: Unexpected response status ${response.status}`);
+        }
+    };
+    /**
+   * Start authentication flow with username/email/phone
+   * Returns a session token or challenges for passcode
+   */ const identifySession = async (payload, callbacks)=>{
+        const auth = getAuth();
+        const response = await auth.identify(payload);
+        switch(response.status){
+            case 201:
+                setSession(response.data.token);
+                if (callbacks.onSuccess) return callbacks.onSuccess();
+                break;
+            case 202:
+                if (callbacks.onChallenged) return callbacks.onChallenged();
+                break;
+            case 403:
+                if (callbacks.onForbidden) return callbacks.onForbidden();
+                break;
+            case 422:
+                if (callbacks.onError) return callbacks.onError(response.data);
+                break;
+            default:
+                throw new Error(`AuthAPI.identify: Unexpected response status ${response.status}`);
+        }
+    };
+    /**
+   * Complete authentication with passcode
+   */ const authenticateSession = async (payload, callbacks)=>{
+        const auth = getAuth();
+        const response = await auth.authenticate(payload);
+        switch(response.status){
+            case 201:
+                setSession(response.data.token);
+                if (callbacks.onSuccess) return callbacks.onSuccess();
+                break;
+            case 401:
+                if (callbacks.onFailure) return callbacks.onFailure();
+                break;
+            case 422:
+                if (callbacks.onError) return callbacks.onError(response.data);
+                break;
+            default:
+                throw new Error(`AuthAPI.authenticate: Unexpected response status ${response.status}`);
+        }
+    };
+    /**
+   * Revoke the current session
+   * Invalidates the token on the server and clears local state
+   */ const revokeSession = async ()=>{
+        if (!sessionRef.value) return;
+        const auth = getAuth();
+        await auth.revoke(sessionRef.value.token);
+        setSession(null);
+    };
+    /**
+   * Forget the current session locally without server call
+   * Optionally pass a specific token to guard against async processes clearing wrong session
+   */ const forgetSession = (token)=>{
+        if (!token || sessionRef.value && token === sessionRef.value.token) {
+            setSession(null);
+        }
+    };
+    return {
+        session,
+        importSession,
+        identifySession,
+        authenticateSession,
+        revokeSession,
+        forgetSession
+    };
+};
+
+/**
+ * Load the Quiltt SDK script
+ */ const loadScript = (src, nonce)=>{
+    return new Promise((resolve, reject)=>{
+        // Check if already loaded
+        if (typeof Quiltt !== 'undefined') {
+            resolve();
+            return;
+        }
+        // Check if script is already in DOM
+        const existing = document.querySelector(`script[src^="${src.split('?')[0]}"]`);
+        if (existing) {
+            existing.addEventListener('load', ()=>resolve());
+            existing.addEventListener('error', ()=>reject(new Error('Failed to load Quiltt SDK')));
+            return;
+        }
+        const script = document.createElement('script');
+        script.src = src;
+        script.async = true;
+        if (nonce) script.nonce = nonce;
+        script.onload = ()=>resolve();
+        script.onerror = ()=>reject(new Error('Failed to load Quiltt SDK'));
+        document.head.appendChild(script);
+    });
+};
+/**
+ * Composable for managing Quiltt Connector
+ *
+ * Loads the Quiltt SDK script and provides methods to open/manage connectors.
+ * This composable can run without QuilttPlugin session context; when unavailable,
+ * it logs a warning and continues without authenticated session state.
+ */ const useQuilttConnector = (connectorId, options)=>{
+    const getConnectorId = ()=>toValue(connectorId);
+    const getConnectionId = ()=>toValue(options?.connectionId);
+    const getInstitution = ()=>toValue(options?.institution);
+    const getOauthRedirectUrl = ()=>toValue(options?.oauthRedirectUrl);
+    const getAppLauncherUri = ()=>toValue(options?.appLauncherUrl) ?? getOauthRedirectUrl();
+    const session = ref();
+    try {
+        const quilttSession = useQuilttSession();
+        session.value = quilttSession.session.value;
+        watch(()=>quilttSession.session.value, (nextSession)=>{
+            session.value = nextSession;
+        }, {
+            immediate: true
+        });
+    } catch (error) {
+        console.warn('[Quiltt] useQuilttConnector: QuilttPlugin not found in the current app context. ' + 'Continuing without session authentication.', error);
+    }
+    const connector = ref();
+    const isLoaded = ref(false);
+    const isOpening = ref(false);
+    const isConnectorOpen = ref(false);
+    // Track previous values
+    let prevConnectionId = getConnectionId();
+    let prevConnectorId = getConnectorId();
+    let prevInstitution = getInstitution();
+    let prevAppLauncherUri = getAppLauncherUri();
+    let connectorCreated = false;
+    // Load SDK script on mount
+    onMounted(async ()=>{
+        const sdkVersion = extractVersionNumber(version);
+        const userAgent = getSDKAgent(sdkVersion);
+        const scriptUrl = `${cdnBase}/v1/connector.js?agent=${encodeURIComponent(userAgent)}`;
+        try {
+            await loadScript(scriptUrl, options?.nonce);
+            isLoaded.value = true;
+        } catch (error) {
+            console.error('[Quiltt] Failed to load SDK:', error);
+        }
+    });
+    // Update authentication when session changes
+    watch(()=>session.value?.token, (token)=>{
+        if (typeof Quiltt !== 'undefined') {
+            Quiltt.authenticate(token);
+        }
+    }, {
+        immediate: true
+    });
+    // Handle script loaded
+    watch(isLoaded, (loaded)=>{
+        if (!loaded || typeof Quiltt === 'undefined') return;
+        // Authenticate with current session
+        Quiltt.authenticate(session.value?.token);
+    }, {
+        immediate: true
+    });
+    watch(getOauthRedirectUrl, (oauthRedirectUrl)=>{
+        if (oauthRedirectUrl !== undefined) {
+            console.warn(oauthRedirectUrlDeprecationWarning);
+        }
+    }, {
+        immediate: true
+    });
+    // Create/update connector when needed
+    const updateConnector = ()=>{
+        const currentConnectorId = getConnectorId();
+        if (!isLoaded.value || typeof Quiltt === 'undefined' || !currentConnectorId) return;
+        const currentConnectionId = getConnectionId();
+        const currentInstitution = getInstitution();
+        const currentAppLauncherUri = getAppLauncherUri();
+        // Check for changes
+        const connectionIdChanged = prevConnectionId !== currentConnectionId;
+        const connectorIdChanged = prevConnectorId !== currentConnectorId;
+        const institutionChanged = prevInstitution !== currentInstitution;
+        const appLauncherUrlChanged = prevAppLauncherUri !== currentAppLauncherUri;
+        const hasChanges = connectionIdChanged || connectorIdChanged || institutionChanged || appLauncherUrlChanged || !connectorCreated;
+        if (hasChanges) {
+            if (currentConnectionId) {
+                // Reconnect mode
+                connector.value = Quiltt.reconnect(currentConnectorId, {
+                    connectionId: currentConnectionId,
+                    appLauncherUrl: currentAppLauncherUri
+                });
+            } else {
+                // Connect mode
+                connector.value = Quiltt.connect(currentConnectorId, {
+                    institution: currentInstitution,
+                    appLauncherUrl: currentAppLauncherUri
+                });
+            }
+            connectorCreated = true;
+            prevConnectionId = currentConnectionId;
+            prevConnectorId = currentConnectorId;
+            prevInstitution = currentInstitution;
+            prevAppLauncherUri = currentAppLauncherUri;
+        }
+    };
+    // Watch for changes that require connector update
+    watch([
+        isLoaded,
+        getConnectorId,
+        getConnectionId,
+        getInstitution,
+        getAppLauncherUri
+    ], updateConnector, {
+        immediate: true
+    });
+    // Register event handlers when connector changes
+    watch(connector, (newConnector, oldConnector)=>{
+        if (!newConnector) return;
+        // Register handlers
+        if (options?.onEvent) {
+            newConnector.onEvent(options.onEvent);
+        }
+        newConnector.onOpen((metadata)=>{
+            isConnectorOpen.value = true;
+            options?.onOpen?.(metadata);
+        });
+        if (options?.onLoad) {
+            newConnector.onLoad(options.onLoad);
+        }
+        newConnector.onExit((type, metadata)=>{
+            isConnectorOpen.value = false;
+            options?.onExit?.(type, metadata);
+        });
+        if (options?.onExitSuccess) {
+            newConnector.onExitSuccess(options.onExitSuccess);
+        }
+        if (options?.onExitAbort) {
+            newConnector.onExitAbort(options.onExitAbort);
+        }
+        if (options?.onExitError) {
+            newConnector.onExitError(options.onExitError);
+        }
+    }, {
+        immediate: true
+    });
+    // Handle deferred opening
+    watch([
+        connector,
+        isOpening
+    ], ([conn, opening])=>{
+        if (conn && opening) {
+            isOpening.value = false;
+            conn.open();
+        }
+    });
+    // Warn on unmount if connector is still open
+    onUnmounted(()=>{
+        if (isConnectorOpen.value) {
+            console.error('[Quiltt] useQuilttConnector: Component unmounted while Connector is still open. ' + 'This may lead to memory leaks or unexpected behavior.');
+        }
+    });
+    /**
+   * Open the connector modal
+   */ const open = ()=>{
+        if (getConnectorId()) {
+            isOpening.value = true;
+            updateConnector();
+        } else {
+            throw new Error('Must provide connectorId to open Quiltt Connector');
+        }
+    };
+    return {
+        open
+    };
+};
+
+const QuilttButton = defineComponent({
+    name: 'QuilttButton',
+    props: {
+        /** Quiltt Connector ID */ connectorId: {
+            type: String,
+            required: true
+        },
+        /** Existing connection ID for reconnection */ connectionId: {
+            type: String,
+            default: undefined
+        },
+        /** Pre-select a specific institution */ institution: {
+            type: String,
+            default: undefined
+        },
+        /** Deep link URL for OAuth callbacks (mobile apps) */ appLauncherUrl: {
+            type: String,
+            default: undefined
+        },
+        /**
+     * @deprecated Use `appLauncherUrl` instead. This property will be removed in a future version.
+     * The OAuth redirect URL for mobile or embedded webview flows.
+     */ oauthRedirectUrl: {
+            type: String,
+            default: undefined
+        },
+        /** Render as a different element */ as: {
+            type: String,
+            default: 'button'
+        }
+    },
+    emits: {
+        /** Connector loaded */ load: (_metadata)=>true,
+        /** Connector opened */ open: (_metadata)=>true,
+        /** Connection successful */ 'exit-success': (_metadata)=>true,
+        /** User cancelled */ 'exit-abort': (_metadata)=>true,
+        /** Error occurred */ 'exit-error': (_metadata)=>true,
+        /** Connector exited (any reason) */ exit: (_type, _metadata)=>true,
+        /** Any connector event */ event: (_type, _metadata)=>true
+    },
+    setup (props, { emit, slots }) {
+        watch(()=>props.oauthRedirectUrl, (value)=>{
+            if (value !== undefined) {
+                console.warn(oauthRedirectUrlDeprecationWarning);
+            }
+        }, {
+            immediate: true
+        });
+        const effectiveAppLauncherUri = computed(()=>props.appLauncherUrl ?? props.oauthRedirectUrl);
+        const { open } = useQuilttConnector(()=>props.connectorId, {
+            connectionId: ()=>props.connectionId,
+            institution: ()=>props.institution,
+            appLauncherUrl: effectiveAppLauncherUri,
+            onEvent: (type, metadata)=>emit('event', type, metadata),
+            onOpen: (metadata)=>emit('open', metadata),
+            onLoad: (metadata)=>emit('load', metadata),
+            onExit: (type, metadata)=>emit('exit', type, metadata),
+            onExitSuccess: (metadata)=>emit('exit-success', metadata),
+            onExitAbort: (metadata)=>emit('exit-abort', metadata),
+            onExitError: (metadata)=>emit('exit-error', metadata)
+        });
+        const handleClick = ()=>{
+            open();
+        };
+        return ()=>h(props.as, {
+                class: 'quiltt-button',
+                onClick: handleClick
+            }, slots.default?.());
+    }
+});
+
+const QuilttConnector = defineComponent({
+    name: 'QuilttConnector',
+    props: {
+        /** Quiltt Connector ID */ connectorId: {
+            type: String,
+            required: true
+        },
+        /** Existing connection ID for reconnection */ connectionId: {
+            type: String,
+            default: undefined
+        },
+        /** Pre-select a specific institution */ institution: {
+            type: String,
+            default: undefined
+        },
+        /** Deep link URL for OAuth callbacks (mobile apps) */ appLauncherUrl: {
+            type: String,
+            default: undefined
+        }
+    },
+    emits: {
+        /** Connector loaded */ load: (_metadata)=>true,
+        /** Connection successful */ 'exit-success': (_metadata)=>true,
+        /** User cancelled */ 'exit-abort': (_metadata)=>true,
+        /** Error occurred */ 'exit-error': (_metadata)=>true,
+        /** Any connector event */ event: (_type, _metadata)=>true,
+        /** OAuth URL requested (for native handling) */ navigate: (_url)=>true
+    },
+    setup (props, { emit, expose }) {
+        const iframeRef = ref();
+        const { session } = useQuilttSession();
+        const trustedQuilttHostSuffixes = [
+            'quiltt.io',
+            'quiltt.dev',
+            'quiltt.app'
+        ];
+        const isTrustedQuilttOrigin = (origin)=>{
+            try {
+                const originUrl = new URL(origin);
+                if (originUrl.protocol !== 'https:') {
+                    return false;
+                }
+                const hostname = originUrl.hostname.toLowerCase();
+                return trustedQuilttHostSuffixes.some((suffix)=>hostname === suffix || hostname.endsWith(`.${suffix}`));
+            } catch  {
+                return false;
+            }
+        };
+        // Connector origin for secure postMessage targeting
+        const connectorOrigin = computed(()=>`https://${props.connectorId}.quiltt.app`);
+        // Build connector URL
+        const connectorUrl = computed(()=>{
+            const url = new URL(connectorOrigin.value);
+            if (session.value?.token) {
+                url.searchParams.set('token', session.value.token);
+            }
+            if (props.connectionId) {
+                url.searchParams.set('connectionId', props.connectionId);
+            }
+            if (props.institution) {
+                url.searchParams.set('institution', props.institution);
+            }
+            if (props.appLauncherUrl) {
+                url.searchParams.set('app_launcher_url', props.appLauncherUrl);
+            }
+            if (typeof window !== 'undefined') {
+                url.searchParams.set('embed_location', window.location.href);
+            }
+            // Set mode for inline iframe embedding
+            url.searchParams.set('mode', 'INLINE');
+            return url.toString();
+        });
+        // Handle messages from the iframe
+        // The platform MessageBus sends: { source: 'quiltt', type: 'Load'|'ExitSuccess'|..., ...metadata }
+        const handleMessage = (event)=>{
+            if (!isTrustedQuilttOrigin(event.origin)) {
+                return;
+            }
+            const data = event.data || {};
+            // Validate message is from Quiltt MessageBus
+            if (data.source !== 'quiltt' || !data.type) return;
+            const { type, connectionId, profileId, connectorSession, url } = data;
+            // Build metadata from message fields
+            const metadata = {
+                connectorId: props.connectorId,
+                ...profileId && {
+                    profileId
+                },
+                ...connectionId && {
+                    connectionId
+                },
+                ...connectorSession && {
+                    connectorSession
+                }
+            };
+            switch(type){
+                case 'Load':
+                    emit('event', 'Load', metadata);
+                    emit('load', metadata);
+                    break;
+                case 'ExitSuccess':
+                    emit('event', 'ExitSuccess', metadata);
+                    emit('exit-success', metadata);
+                    break;
+                case 'ExitAbort':
+                    emit('event', 'ExitAbort', metadata);
+                    emit('exit-abort', metadata);
+                    break;
+                case 'ExitError':
+                    emit('event', 'ExitError', metadata);
+                    emit('exit-error', metadata);
+                    break;
+                case 'Navigate':
+                    if (url) {
+                        emit('navigate', url);
+                    }
+                    break;
+            }
+        };
+        // Build OAuth callback message matching React Native SDK format
+        const buildOAuthCallbackMessage = (callbackUrl)=>{
+            try {
+                const parsedUrl = new URL(callbackUrl);
+                const params = {};
+                parsedUrl.searchParams.forEach((value, key)=>{
+                    params[key] = value;
+                });
+                return {
+                    source: 'quiltt',
+                    type: 'OAuthCallback',
+                    data: {
+                        url: callbackUrl,
+                        params
+                    }
+                };
+            } catch  {
+                return {
+                    source: 'quiltt',
+                    type: 'OAuthCallback',
+                    data: {
+                        url: callbackUrl,
+                        params: {}
+                    }
+                };
+            }
+        };
+        const handleOAuthCallback = (url)=>{
+            iframeRef.value?.contentWindow?.postMessage(buildOAuthCallbackMessage(url), connectorOrigin.value);
+        };
+        expose({
+            handleOAuthCallback
+        });
+        onMounted(()=>{
+            window.addEventListener('message', handleMessage);
+        });
+        onUnmounted(()=>{
+            window.removeEventListener('message', handleMessage);
+        });
+        return ()=>h('iframe', {
+                ref: iframeRef,
+                src: connectorUrl.value,
+                allow: 'publickey-credentials-get *',
+                class: 'quiltt-connector',
+                style: {
+                    border: 'none',
+                    width: '100%',
+                    height: '100%'
+                }
+            });
+    }
+});
+
+const QuilttContainer = defineComponent({
+    name: 'QuilttContainer',
+    props: {
+        /** Quiltt Connector ID */ connectorId: {
+            type: String,
+            required: true
+        },
+        /** Existing connection ID for reconnection */ connectionId: {
+            type: String,
+            default: undefined
+        },
+        /** Pre-select a specific institution */ institution: {
+            type: String,
+            default: undefined
+        },
+        /** Deep link URL for OAuth callbacks (mobile apps) */ appLauncherUrl: {
+            type: String,
+            default: undefined
+        },
+        /**
+     * @deprecated Use `appLauncherUrl` instead. This property will be removed in a future version.
+     * The OAuth redirect URL for mobile or embedded webview flows.
+     */ oauthRedirectUrl: {
+            type: String,
+            default: undefined
+        },
+        /** Render as a different element */ as: {
+            type: String,
+            default: 'div'
+        }
+    },
+    emits: {
+        /** Connector loaded */ load: (_metadata)=>true,
+        /** Connection successful */ 'exit-success': (_metadata)=>true,
+        /** User cancelled */ 'exit-abort': (_metadata)=>true,
+        /** Error occurred */ 'exit-error': (_metadata)=>true,
+        /** Connector exited (any reason) */ exit: (_type, _metadata)=>true,
+        /** Any connector event */ event: (_type, _metadata)=>true
+    },
+    setup (props, { emit, slots }) {
+        watch(()=>props.oauthRedirectUrl, (value)=>{
+            if (value !== undefined) {
+                console.warn(oauthRedirectUrlDeprecationWarning);
+            }
+        }, {
+            immediate: true
+        });
+        const effectiveAppLauncherUri = computed(()=>props.appLauncherUrl ?? props.oauthRedirectUrl);
+        let openTimeout;
+        const { open } = useQuilttConnector(()=>props.connectorId, {
+            connectionId: ()=>props.connectionId,
+            institution: ()=>props.institution,
+            appLauncherUrl: effectiveAppLauncherUri,
+            onEvent: (type, metadata)=>emit('event', type, metadata),
+            onLoad: (metadata)=>emit('load', metadata),
+            onExit: (type, metadata)=>emit('exit', type, metadata),
+            onExitSuccess: (metadata)=>emit('exit-success', metadata),
+            onExitAbort: (metadata)=>emit('exit-abort', metadata),
+            onExitError: (metadata)=>emit('exit-error', metadata)
+        });
+        onMounted(()=>{
+            // Short delay to ensure SDK is loaded
+            openTimeout = setTimeout(()=>{
+                open();
+            }, 100);
+        });
+        onUnmounted(()=>{
+            if (openTimeout) {
+                clearTimeout(openTimeout);
+                openTimeout = undefined;
+            }
+        });
+        return ()=>h(props.as, {
+                class: 'quiltt-container',
+                style: {
+                    width: '100%',
+                    height: '100%'
+                }
+            }, slots.default?.());
+    }
+});
+
+export { QuilttButton, QuilttConnector, QuilttContainer };