@quiltt/react-native 5.0.0 → 5.0.1

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @quiltt/react-native
 
+## 5.0.1
+
+### Patch Changes
+
+- [#403](https://github.com/quiltt/quiltt-js/pull/403) [`b714ff3`](https://github.com/quiltt/quiltt-js/commit/b714ff3b3ee878445ca8e09903153ac0b43d693b) Thanks [@zubairaziz](https://github.com/zubairaziz)! - Prevent Infinite Re-Renders in QuilttProvider
+
+- [#399](https://github.com/quiltt/quiltt-js/pull/399) [`77d11b6`](https://github.com/quiltt/quiltt-js/commit/77d11b69ceb950da9ca500aa73bae7a3abdfb3a2) Thanks [@CarltonHowell](https://github.com/CarltonHowell)! - Output commonJS
+
+- [#402](https://github.com/quiltt/quiltt-js/pull/402) [`97eccbe`](https://github.com/quiltt/quiltt-js/commit/97eccbe6df42843307a11d28a0a8b5a36e43f3d9) Thanks [@zubairaziz](https://github.com/zubairaziz)! - Remove Node.js Dependencies in React Native Builds
+
+- [#401](https://github.com/quiltt/quiltt-js/pull/401) [`2bf07c3`](https://github.com/quiltt/quiltt-js/commit/2bf07c36bf8dc573f01db8f4c69a48e05d313b8b) Thanks [@zubairaziz](https://github.com/zubairaziz)! - Improve expired auth token detection and clearing
+
+- [#404](https://github.com/quiltt/quiltt-js/pull/404) [`45eb8c9`](https://github.com/quiltt/quiltt-js/commit/45eb8c907f51c0c8c5a3c069c35e0f301a4c374f) Thanks [@zubairaziz](https://github.com/zubairaziz)! - Add Subpath Exports and Reorganize Core Modules
+
+- Updated dependencies [[`b714ff3`](https://github.com/quiltt/quiltt-js/commit/b714ff3b3ee878445ca8e09903153ac0b43d693b), [`77d11b6`](https://github.com/quiltt/quiltt-js/commit/77d11b69ceb950da9ca500aa73bae7a3abdfb3a2), [`97eccbe`](https://github.com/quiltt/quiltt-js/commit/97eccbe6df42843307a11d28a0a8b5a36e43f3d9), [`2bf07c3`](https://github.com/quiltt/quiltt-js/commit/2bf07c36bf8dc573f01db8f4c69a48e05d313b8b), [`45eb8c9`](https://github.com/quiltt/quiltt-js/commit/45eb8c907f51c0c8c5a3c069c35e0f301a4c374f)]:
+  - @quiltt/react@5.0.1
+  - @quiltt/core@5.0.1
+
 ## 5.0.0
 
 ### Major Changes

package/README.md

@@ -43,6 +43,12 @@ Launch the [Quiltt Connector](https://www.quiltt.dev/connector) in a webview.
 
 `@quiltt/react-native` does not ship with a navigation library, so you might want to navigate to a new "page" when using QuilttConnector.
 
+For better tree-shaking, you can import components from subpaths:
+
+```tsx
+import { QuilttConnector } from '@quiltt/react-native/components'
+```
+
 #### Example
 
 ```tsx

package/dist/components/index.cjs

@@ -0,0 +1,534 @@
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+var reactNative = require('react-native');
+var react$1 = require('@quiltt/react');
+var reactNativeUrlPolyfill = require('react-native-url-polyfill');
+var reactNativeWebview = require('react-native-webview');
+var index_cjs = require('../utils/index.cjs');
+
+var version = "5.0.1";
+
+const AndroidSafeAreaView = ({ testId, children })=>/*#__PURE__*/ jsxRuntime.jsx(reactNative.SafeAreaView, {
+        testID: testId,
+        style: styles$2.AndroidSafeArea,
+        children: children
+    });
+const styles$2 = reactNative.StyleSheet.create({
+    AndroidSafeArea: {
+        flex: 1,
+        backgroundColor: 'white',
+        paddingTop: reactNative.Platform.OS === 'android' ? reactNative.StatusBar.currentHeight : 0
+    }
+});
+
+const ErrorScreen = ({ testId, error, cta })=>/*#__PURE__*/ jsxRuntime.jsx(AndroidSafeAreaView, {
+        testId: testId,
+        children: /*#__PURE__*/ jsxRuntime.jsxs(reactNative.View, {
+            style: [
+                styles$1.container,
+                styles$1.padding
+            ],
+            children: [
+                /*#__PURE__*/ jsxRuntime.jsxs(reactNative.View, {
+                    style: {
+                        flex: 1,
+                        justifyContent: 'center'
+                    },
+                    children: [
+                        /*#__PURE__*/ jsxRuntime.jsx(reactNative.View, {
+                            style: {
+                                flexDirection: 'row',
+                                justifyContent: 'space-between',
+                                alignItems: 'center',
+                                marginVertical: 10
+                            },
+                            children: /*#__PURE__*/ jsxRuntime.jsx(reactNative.Text, {
+                                style: [
+                                    styles$1.title
+                                ],
+                                children: "Cannot connect to the internet."
+                            })
+                        }),
+                        /*#__PURE__*/ jsxRuntime.jsx(reactNative.Text, {
+                            style: [
+                                styles$1.subtitle
+                            ],
+                            children: error
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ jsxRuntime.jsx(reactNative.Pressable, {
+                    style: [
+                        styles$1.pressable
+                    ],
+                    onPress: cta,
+                    children: /*#__PURE__*/ jsxRuntime.jsx(reactNative.Text, {
+                        style: [
+                            styles$1.pressableText
+                        ],
+                        children: "Exit"
+                    })
+                })
+            ]
+        })
+    });
+const styles$1 = reactNative.StyleSheet.create({
+    container: {
+        flex: 1,
+        flexDirection: 'column',
+        justifyContent: 'flex-start',
+        alignItems: 'stretch',
+        backgroundColor: '#F3F4F6'
+    },
+    title: {
+        color: '#1F2937',
+        fontSize: 30,
+        fontWeight: 'bold'
+    },
+    subtitle: {
+        color: 'rgba(107, 114, 128, 1)'
+    },
+    padding: {
+        paddingHorizontal: 16,
+        paddingVertical: 24
+    },
+    pressable: {
+        marginTop: 20,
+        backgroundColor: '#1F2937',
+        padding: 10,
+        paddingHorizontal: 25,
+        borderRadius: 5
+    },
+    pressableText: {
+        color: '#fff',
+        textAlign: 'center'
+    }
+});
+
+const LoadingScreen = ({ testId })=>/*#__PURE__*/ jsxRuntime.jsx(AndroidSafeAreaView, {
+        testId: testId,
+        children: /*#__PURE__*/ jsxRuntime.jsx(reactNative.View, {
+            style: {
+                flex: 1,
+                justifyContent: 'center',
+                alignItems: 'center'
+            },
+            children: /*#__PURE__*/ jsxRuntime.jsx(reactNative.ActivityIndicator, {
+                testID: "activity-indicator",
+                size: "large",
+                color: "#5928A3"
+            })
+        })
+    });
+
+const PREFLIGHT_RETRY_COUNT = 3;
+const parseMetadata = (url, connectorId)=>{
+    const metadata = {
+        connectorId: url.searchParams.get('connectorId') ?? connectorId
+    };
+    const profileId = url.searchParams.get('profileId');
+    if (profileId) metadata.profileId = profileId;
+    const connectionId = url.searchParams.get('connectionId');
+    if (connectionId) metadata.connectionId = connectionId;
+    const connectorSessionId = url.searchParams.get('connectorSession');
+    if (connectorSessionId) metadata.connectorSession = {
+        id: connectorSessionId
+    };
+    return metadata;
+};
+const checkConnectorUrl = async (connectorUrl, errorReporter, retryCount = 0)=>{
+    let responseStatus;
+    try {
+        const response = await fetch(connectorUrl);
+        switch(response.status){
+            case 200:
+                return {
+                    checked: true
+                };
+            case 400:
+                console.log('Invalid configuration');
+                return {
+                    checked: true
+                };
+            case 404:
+                console.error('Connector not found');
+                return {
+                    checked: true
+                };
+            default:
+                throw new Error('Connector URL is not routable.');
+        }
+    } catch (error) {
+        // Log error for debugging
+        console.error(error);
+        // Try again
+        if (retryCount < PREFLIGHT_RETRY_COUNT) {
+            const delay = 50 * 2 ** retryCount;
+            await new Promise((resolve)=>setTimeout(resolve, delay));
+            console.log(`Retrying connection... Attempt ${retryCount + 1}`);
+            return checkConnectorUrl(connectorUrl, errorReporter, retryCount + 1);
+        }
+        // Report error after retries exhausted
+        const errorMessage = index_cjs.getErrorMessage(responseStatus, error);
+        const errorToSend = error || new Error(errorMessage);
+        const context = {
+            connectorUrl,
+            responseStatus
+        };
+        await errorReporter.notify(errorToSend, context);
+        // Return errored preflight check
+        return {
+            checked: true,
+            error: errorMessage
+        };
+    }
+};
+/**
+ * Handle opening OAuth URLs with proper encoding detection and normalization
+ */ const handleOAuthUrl = (oauthUrl)=>{
+    try {
+        // Throw error if oauthUrl is null or undefined
+        if (oauthUrl == null) {
+            throw new Error('OAuth URL missing');
+        }
+        // Convert to string if it's a URL object
+        const urlString = oauthUrl.toString();
+        // Throw error if the resulting string is empty
+        if (!urlString || urlString.trim() === '') {
+            throw new Error('Empty OAuth URL');
+        }
+        // Normalize the URL encoding
+        const normalizedUrl = index_cjs.normalizeUrlEncoding(urlString);
+        // Open the normalized URL
+        reactNative.Linking.openURL(normalizedUrl);
+    } catch (_error) {
+        console.error('OAuth URL handling error');
+        // Only try the fallback if oauthUrl is not null
+        if (oauthUrl != null) {
+            try {
+                const fallbackUrl = typeof oauthUrl === 'string' ? oauthUrl : oauthUrl.toString();
+                console.log('Attempting fallback OAuth opening');
+                reactNative.Linking.openURL(fallbackUrl);
+            } catch (_fallbackError) {
+                console.error('Fallback OAuth opening failed');
+            }
+        }
+    }
+};
+const QuilttConnector = /*#__PURE__*/ react.forwardRef(({ connectorId, connectionId, institution, oauthRedirectUrl, onEvent, onLoad, onExit, onExitSuccess, onExitAbort, onExitError, testId }, ref)=>{
+    const webViewRef = react.useRef(null);
+    const { session } = react$1.useQuilttSession();
+    const [preFlightCheck, setPreFlightCheck] = react.useState({
+        checked: false
+    });
+    const [errorReporter, setErrorReporter] = react.useState(null);
+    const [userAgent, setUserAgent] = react.useState('');
+    // Initialize error reporter and user agent
+    react.useEffect(()=>{
+        let mounted = true;
+        const init = async ()=>{
+            const agent = await index_cjs.getUserAgent(version);
+            if (mounted) {
+                setUserAgent(agent);
+                setErrorReporter(new index_cjs.ErrorReporter(agent));
+            }
+        };
+        init();
+        return ()=>{
+            mounted = false;
+        };
+    }, []);
+    // Script to disable scrolling on header
+    const disableHeaderScrollScript = `
+    (function() {
+      const header = document.querySelector('header');
+      if (header) {
+        header.style.position = 'fixed';
+        header.style.top = '0';
+        header.style.left = '0';
+        header.style.right = '0';
+        header.style.zIndex = '1000';
+      }
+    })();
+  `;
+    const onLoadEnd = react.useCallback(()=>{
+        if (reactNative.Platform.OS === 'ios') {
+            webViewRef.current?.injectJavaScript(disableHeaderScrollScript);
+        }
+    }, []);
+    // Ensure oauthRedirectUrl is encoded properly - only once
+    const safeOAuthRedirectUrl = react.useMemo(()=>{
+        return index_cjs.smartEncodeURIComponent(oauthRedirectUrl);
+    }, [
+        oauthRedirectUrl
+    ]);
+    const connectorUrl = react.useMemo(()=>{
+        if (!userAgent) return null;
+        const url = new reactNativeUrlPolyfill.URL(`https://${connectorId}.quiltt.app`);
+        // For normal parameters, just append them directly
+        url.searchParams.append('mode', 'webview');
+        url.searchParams.append('agent', userAgent);
+        // For the oauth_redirect_url, we need to be careful
+        // If it's already encoded, we need to decode it once to prevent
+        // the automatic encoding that happens with searchParams.append
+        if (index_cjs.isEncoded(safeOAuthRedirectUrl)) {
+            const decodedOnce = decodeURIComponent(safeOAuthRedirectUrl);
+            url.searchParams.append('oauth_redirect_url', decodedOnce);
+        } else {
+            url.searchParams.append('oauth_redirect_url', safeOAuthRedirectUrl);
+        }
+        return url.toString();
+    }, [
+        connectorId,
+        safeOAuthRedirectUrl,
+        userAgent
+    ]);
+    react.useEffect(()=>{
+        if (preFlightCheck.checked || !connectorUrl || !errorReporter) return;
+        const fetchDataAndSetState = async ()=>{
+            const connectorUrlStatus = await checkConnectorUrl(connectorUrl, errorReporter);
+            setPreFlightCheck(connectorUrlStatus);
+        };
+        fetchDataAndSetState();
+    }, [
+        connectorUrl,
+        preFlightCheck,
+        errorReporter
+    ]);
+    const initInjectedJavaScript = react.useCallback(()=>{
+        const script = `\
+      const options = {\
+        source: 'quiltt',\
+        type: 'Options',\
+        token: '${session?.token}',\
+        connectorId: '${connectorId}',\
+        connectionId: '${connectionId}',\
+        institution: '${institution}', \
+      };\
+      const compactedOptions = Object.keys(options).reduce((acc, key) => {\
+        if (options[key] !== 'undefined') {\
+          acc[key] = options[key];\
+        }\
+        return acc;\
+      }, {});\
+      window.postMessage(compactedOptions);\
+    `;
+        webViewRef.current?.injectJavaScript(script);
+    }, [
+        connectionId,
+        connectorId,
+        institution,
+        session?.token
+    ]);
+    const isQuilttEvent = react.useCallback((url)=>url.protocol === 'quilttconnector:', []);
+    const shouldRender = react.useCallback((url)=>!isQuilttEvent(url), [
+        isQuilttEvent
+    ]);
+    const clearLocalStorage = react.useCallback(()=>{
+        const script = 'localStorage.clear();';
+        webViewRef.current?.injectJavaScript(script);
+    }, []);
+    const handleQuilttEvent = react.useCallback((url)=>{
+        url.searchParams.delete('source');
+        url.searchParams.append('connectorId', connectorId);
+        const metadata = parseMetadata(url, connectorId);
+        requestAnimationFrame(()=>{
+            const eventType = url.host;
+            switch(eventType){
+                case 'Load':
+                    console.log('Event: Load');
+                    initInjectedJavaScript();
+                    onEvent?.(react$1.ConnectorSDKEventType.Load, metadata);
+                    onLoad?.(metadata);
+                    break;
+                case 'ExitAbort':
+                    console.log('Event: ExitAbort');
+                    clearLocalStorage();
+                    onEvent?.(react$1.ConnectorSDKEventType.ExitAbort, metadata);
+                    onExit?.(react$1.ConnectorSDKEventType.ExitAbort, metadata);
+                    onExitAbort?.(metadata);
+                    break;
+                case 'ExitError':
+                    console.log('Event: ExitError');
+                    clearLocalStorage();
+                    onEvent?.(react$1.ConnectorSDKEventType.ExitError, metadata);
+                    onExit?.(react$1.ConnectorSDKEventType.ExitError, metadata);
+                    onExitError?.(metadata);
+                    break;
+                case 'ExitSuccess':
+                    console.log('Event: ExitSuccess');
+                    clearLocalStorage();
+                    onEvent?.(react$1.ConnectorSDKEventType.ExitSuccess, metadata);
+                    onExit?.(react$1.ConnectorSDKEventType.ExitSuccess, metadata);
+                    onExitSuccess?.(metadata);
+                    break;
+                case 'Authenticate':
+                    console.log('Event: Authenticate');
+                    break;
+                case 'Navigate':
+                    {
+                        console.log('Event: Navigate');
+                        const navigateUrl = url.searchParams.get('url');
+                        if (navigateUrl) {
+                            if (index_cjs.isEncoded(navigateUrl)) {
+                                try {
+                                    const decodedUrl = decodeURIComponent(navigateUrl);
+                                    handleOAuthUrl(decodedUrl);
+                                } catch (_error) {
+                                    console.error('Navigate URL decoding failed, using original');
+                                    handleOAuthUrl(navigateUrl);
+                                }
+                            } else {
+                                handleOAuthUrl(navigateUrl);
+                            }
+                        } else {
+                            console.error('Navigate URL missing from request');
+                        }
+                        break;
+                    }
+                // NOTE: The `OauthRequested` is deprecated and should not be used
+                default:
+                    console.log(`Unhandled event: ${eventType}`);
+                    break;
+            }
+        });
+    }, [
+        clearLocalStorage,
+        connectorId,
+        initInjectedJavaScript,
+        onEvent,
+        onExit,
+        onExitAbort,
+        onExitError,
+        onExitSuccess,
+        onLoad
+    ]);
+    const requestHandler = react.useCallback((request)=>{
+        const url = new reactNativeUrlPolyfill.URL(request.url);
+        if (isQuilttEvent(url)) {
+            handleQuilttEvent(url);
+            return false;
+        }
+        if (shouldRender(url)) {
+            return true;
+        }
+        // Plaid set oauth url by doing window.location.href = url
+        // So we use `handleOAuthUrl` as a catch all and assume all url got to this step is Plaid OAuth url
+        handleOAuthUrl(url);
+        return false;
+    }, [
+        handleQuilttEvent,
+        isQuilttEvent,
+        shouldRender
+    ]);
+    // Expose method to handle OAuth callbacks from parent component
+    react.useImperativeHandle(ref, ()=>({
+            handleOAuthCallback: (callbackUrl)=>{
+                try {
+                    console.log('Handling OAuth callback:', callbackUrl);
+                    const url = new reactNativeUrlPolyfill.URL(callbackUrl);
+                    // Extract OAuth callback parameters
+                    const oauthParams = {};
+                    url.searchParams.forEach((value, key)=>{
+                        oauthParams[key] = value;
+                    });
+                    // Send OAuth callback data to the connector via postMessage
+                    // This preserves the connector's state and allows events to fire properly
+                    const message = {
+                        source: 'quiltt',
+                        type: 'OAuthCallback',
+                        data: {
+                            url: callbackUrl,
+                            params: oauthParams
+                        }
+                    };
+                    const script = `
+              (function() {
+                try {
+                  window.postMessage(${JSON.stringify(message)});
+                  console.log('OAuth callback message sent to connector');
+                } catch (e) {
+                  console.error('Failed to send OAuth callback message:', e);
+                }
+              })();
+              true;
+            `;
+                    webViewRef.current?.injectJavaScript(script);
+                } catch (error) {
+                    console.error('Error handling OAuth callback:', error);
+                }
+            }
+        }), []);
+    if (!preFlightCheck.checked || !connectorUrl) {
+        return /*#__PURE__*/ jsxRuntime.jsx(LoadingScreen, {
+            testId: "loading-screen"
+        });
+    }
+    if (preFlightCheck.error) {
+        return /*#__PURE__*/ jsxRuntime.jsx(ErrorScreen, {
+            testId: "error-screen",
+            error: preFlightCheck.error,
+            cta: ()=>onExitError?.({
+                    connectorId
+                })
+        });
+    }
+    return /*#__PURE__*/ jsxRuntime.jsx(AndroidSafeAreaView, {
+        testId: testId,
+        children: /*#__PURE__*/ jsxRuntime.jsx(reactNativeWebview.WebView, {
+            ref: webViewRef,
+            // Plaid keeps sending window.location = 'about:srcdoc' and causes some noise in RN
+            domStorageEnabled: true,
+            javaScriptEnabled: true,
+            onLoadEnd: onLoadEnd,
+            onShouldStartLoadWithRequest: requestHandler,
+            originWhitelist: [
+                '*'
+            ],
+            scrollEnabled: true,
+            showsHorizontalScrollIndicator: false,
+            showsVerticalScrollIndicator: false,
+            source: {
+                uri: connectorUrl
+            },
+            style: styles.webview,
+            testID: "webview",
+            webviewDebuggingEnabled: true,
+            ...reactNative.Platform.OS === 'ios' ? {
+                allowsBackForwardNavigationGestures: false,
+                allowsInlineMediaPlayback: true,
+                automaticallyAdjustContentInsets: false,
+                bounces: false,
+                contentInsetAdjustmentBehavior: 'never',
+                dataDetectorTypes: 'none',
+                decelerationRate: 'normal',
+                keyboardDisplayRequiresUserAction: false,
+                scrollEventThrottle: 16,
+                startInLoadingState: true
+            } : {
+                androidLayerType: 'hardware',
+                cacheEnabled: true,
+                cacheMode: 'LOAD_CACHE_ELSE_NETWORK',
+                overScrollMode: 'never'
+            }
+        })
+    });
+});
+// Add styles for the WebView container
+const styles = reactNative.StyleSheet.create({
+    webviewContainer: {
+        flex: 1,
+        backgroundColor: '#ffffff'
+    },
+    webview: {
+        flex: 1,
+        overflow: 'hidden'
+    }
+});
+QuilttConnector.displayName = 'QuilttConnector';
+
+exports.QuilttConnector = QuilttConnector;
+exports.checkConnectorUrl = checkConnectorUrl;
+exports.handleOAuthUrl = handleOAuthUrl;

package/dist/components/index.d.ts

@@ -0,0 +1,27 @@
+import * as react from 'react';
+import { ConnectorSDKCallbacks } from '@quiltt/react';
+import { URL } from 'react-native-url-polyfill';
+import { ErrorReporter } from '../utils/index.js';
+
+type PreFlightCheck = {
+    checked: boolean;
+    error?: string;
+};
+declare const checkConnectorUrl: (connectorUrl: string, errorReporter: ErrorReporter, retryCount?: number) => Promise<PreFlightCheck>;
+/**
+ * Handle opening OAuth URLs with proper encoding detection and normalization
+ */
+declare const handleOAuthUrl: (oauthUrl: URL | string | null | undefined) => void;
+type QuilttConnectorHandle = {
+    handleOAuthCallback: (url: string) => void;
+};
+declare const QuilttConnector: react.ForwardRefExoticComponent<{
+    connectorId: string;
+    connectionId?: string;
+    institution?: string;
+    oauthRedirectUrl: string;
+    testId?: string;
+} & ConnectorSDKCallbacks & react.RefAttributes<QuilttConnectorHandle>>;
+
+export { QuilttConnector, checkConnectorUrl, handleOAuthUrl };
+export type { PreFlightCheck, QuilttConnectorHandle };