@quiltt/react-native 3.6.4 → 3.6.6

package/CHANGELOG.md

@@ -1,5 +1,25 @@
 # @quiltt/react-native
 
+## 3.6.6
+
+### Patch Changes
+
+- [#251](https://github.com/quiltt/quiltt-js/pull/251) [`07a3eb1`](https://github.com/quiltt/quiltt-js/commit/07a3eb1b2b719ae1073287079d6a0e61e432cc96) Thanks [@zubairaziz](https://github.com/zubairaziz)! - Update @quiltt/react-native OAuthURL handling
+
+- Updated dependencies [[`07a3eb1`](https://github.com/quiltt/quiltt-js/commit/07a3eb1b2b719ae1073287079d6a0e61e432cc96)]:
+  - @quiltt/react@3.6.6
+  - @quiltt/core@3.6.6
+
+## 3.6.5
+
+### Patch Changes
+
+- [#248](https://github.com/quiltt/quiltt-js/pull/248) [`d15297e`](https://github.com/quiltt/quiltt-js/commit/d15297e4dea40c90dab97d1f8e8797b5cfe8395c) Thanks [@sirwolfgang](https://github.com/sirwolfgang)! - Fix issue with loading Plaid's new Link
+
+- Updated dependencies [[`d15297e`](https://github.com/quiltt/quiltt-js/commit/d15297e4dea40c90dab97d1f8e8797b5cfe8395c)]:
+  - @quiltt/core@3.6.5
+  - @quiltt/react@3.6.5
+
 ## 3.6.4
 
 ### Patch Changes

package/dist/index.cjs

@@ -10,126 +10,13 @@ var reactNativeWebview = require('react-native-webview');
 var reactNative = require('react-native');
 var util = require('@honeybadger-io/core/build/src/util');
 
-// Generated by genversion.
-const version = '3.6.4';
-
-const AndroidSafeAreaView = ({ testId, children })=>/*#__PURE__*/ jsxRuntime.jsx(reactNative.SafeAreaView, {
-        testID: testId,
-        style: styles$1.AndroidSafeArea,
-        children: children
-    });
-const styles$1 = 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.container,
-                styles.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.title
-                                ],
-                                children: "Cannot connect to the internet."
-                            })
-                        }),
-                        /*#__PURE__*/ jsxRuntime.jsx(reactNative.Text, {
-                            style: [
-                                styles.subtitle
-                            ],
-                            children: error
-                        })
-                    ]
-                }),
-                /*#__PURE__*/ jsxRuntime.jsx(reactNative.Pressable, {
-                    style: [
-                        styles.pressable
-                    ],
-                    onPress: cta,
-                    children: /*#__PURE__*/ jsxRuntime.jsx(reactNative.Text, {
-                        style: [
-                            styles.pressableText
-                        ],
-                        children: "Exit"
-                    })
-                })
-            ]
-        })
-    });
-const styles = 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 ErrorReporterConfig = {
     honeybadger_api_key: 'undefined'
 };
 
+// Generated by genversion.
+const version = '3.6.6';
+
 // Quick hack to send error to Honeybadger to debug why the connector is not routable
 const notifier = {
     name: 'Quiltt React Native SDK Reporter',
@@ -214,7 +101,7 @@ const getErrorMessage = (responseStatus, error)=>{
     return responseStatus ? `The URL is not routable. Response status: ${responseStatus}` : 'An error occurred while checking the connector URL';
 };
 
-const errorReporter = new ErrorReporter(`${reactNative.Platform.OS} ${reactNative.Platform.Version}`);
+const errorReporter$1 = new ErrorReporter(`${reactNative.Platform.OS} ${reactNative.Platform.Version}`);
 const PREFLIGHT_RETRY_COUNT = 3;
 const checkConnectorUrl = async (connectorUrl, retryCount = 0)=>{
     let responseStatus;
@@ -249,21 +136,149 @@ const checkConnectorUrl = async (connectorUrl, retryCount = 0)=>{
         connectorUrl,
         responseStatus
     };
-    if (responseStatus !== 404) await errorReporter.send(errorToSend, context);
+    if (responseStatus !== 404) await errorReporter$1.send(errorToSend, context);
     return {
         checked: true,
         error: errorMessage
     };
 };
 
-const handleOAuthUrl = (oauthUrl)=>{
-    if (oauthUrl.protocol !== 'https:') {
-        console.log(`handleOAuthUrl - Skipping non https url - ${oauthUrl.href}`);
-        return;
+const errorReporter = new ErrorReporter(`${reactNative.Platform.OS} ${reactNative.Platform.Version}`);
+const handleOAuthUrl = async (oauthUrl, context)=>{
+    const parsedUrl = new reactNativeUrlPolyfill.URL(oauthUrl.href);
+    try {
+        // Check if the URL protocol is HTTPS
+        if (parsedUrl.protocol !== 'https:') {
+            console.warn(`handleOAuthUrl - Skipping non-HTTPS URL - ${parsedUrl.href}`);
+            return;
+        }
+        // Open the URL using Linking module
+        await reactNative.Linking.openURL(parsedUrl.href);
+    } catch (error) {
+        console.error('handleOAuthUrl - Error opening URL:', error);
+        // Report error to HoneyBadger
+        const errorContext = {
+            ...context,
+            oauthUrl: parsedUrl.href,
+            passedUrl: oauthUrl.toString()
+        };
+        await errorReporter.send(error, errorContext);
     }
-    reactNative.Linking.openURL(oauthUrl.href);
 };
 
+const AndroidSafeAreaView = ({ testId, children })=>/*#__PURE__*/ jsxRuntime.jsx(reactNative.SafeAreaView, {
+        testID: testId,
+        style: styles$1.AndroidSafeArea,
+        children: children
+    });
+const styles$1 = 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.container,
+                styles.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.title
+                                ],
+                                children: "Cannot connect to the internet."
+                            })
+                        }),
+                        /*#__PURE__*/ jsxRuntime.jsx(reactNative.Text, {
+                            style: [
+                                styles.subtitle
+                            ],
+                            children: error
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ jsxRuntime.jsx(reactNative.Pressable, {
+                    style: [
+                        styles.pressable
+                    ],
+                    onPress: cta,
+                    children: /*#__PURE__*/ jsxRuntime.jsx(reactNative.Text, {
+                        style: [
+                            styles.pressableText
+                        ],
+                        children: "Exit"
+                    })
+                })
+            ]
+        })
+    });
+const styles = 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 QuilttConnector = ({ testId, connectorId, connectionId, institution, oauthRedirectUrl, onEvent, onLoad, onExit, onExitSuccess, onExitAbort, onExitError })=>{
     const webViewRef = react$1.useRef(null);
     const { session } = react.useQuilttSession();
@@ -326,7 +341,7 @@ const QuilttConnector = ({ testId, connectorId, connectionId, institution, oauth
             'quiltt.app',
             'quiltt.dev',
             'moneydesktop.com',
-            'cdn.plaid.com/link/v2/stable/link.html'
+            'cdn.plaid.com'
         ], []);
     const isQuilttEvent = react$1.useCallback((url)=>url.protocol === 'quilttconnector:', []);
     const shouldRender = react$1.useCallback((url)=>{
@@ -339,10 +354,10 @@ const QuilttConnector = ({ testId, connectorId, connectionId, institution, oauth
         allowedListUrl,
         isQuilttEvent
     ]);
-    const clearLocalStorage = ()=>{
+    const clearLocalStorage = react$1.useCallback(()=>{
         const script = 'localStorage.clear();';
         webViewRef.current?.injectJavaScript(script);
-    };
+    }, []);
     const handleQuilttEvent = react$1.useCallback((url)=>{
         url.searchParams.delete('source');
         url.searchParams.append('connectorId', connectorId);
@@ -375,7 +390,12 @@ const QuilttConnector = ({ testId, connectorId, connectionId, institution, oauth
             case 'Authenticate':
                 break;
             case 'OauthRequested':
-                handleOAuthUrl(new reactNativeUrlPolyfill.URL(url.searchParams.get('oauthUrl')));
+                handleOAuthUrl(new reactNativeUrlPolyfill.URL(url.searchParams.get('oauthUrl')), {
+                    connectorId,
+                    connectionId,
+                    institution,
+                    oauthRedirectUrl
+                });
                 break;
             default:
                 console.log('unhandled event', url);
@@ -385,11 +405,15 @@ const QuilttConnector = ({ testId, connectorId, connectionId, institution, oauth
         connectorId,
         initInjectedJavaScript,
         onEvent,
+        onLoad,
+        clearLocalStorage,
         onExit,
         onExitAbort,
         onExitError,
         onExitSuccess,
-        onLoad
+        connectionId,
+        institution,
+        oauthRedirectUrl
     ]);
     const requestHandler = react$1.useCallback((request)=>{
         const url = new reactNativeUrlPolyfill.URL(request.url);
@@ -400,11 +424,20 @@ const QuilttConnector = ({ testId, connectorId, connectionId, institution, oauth
         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);
+        handleOAuthUrl(url, {
+            connectorId,
+            connectionId,
+            institution,
+            oauthRedirectUrl
+        });
         return false;
     }, [
+        connectionId,
+        connectorId,
         handleQuilttEvent,
+        institution,
         isQuilttEvent,
+        oauthRedirectUrl,
         shouldRender
     ]);
     if (!preFlightCheck.checked) return /*#__PURE__*/ jsxRuntime.jsx(LoadingScreen, {

package/dist/index.js

@@ -6,129 +6,16 @@ import { jsx, jsxs } from 'react/jsx-runtime';
 import { useRef, useMemo, useState, useEffect, useCallback } from 'react';
 import { URL } from 'react-native-url-polyfill';
 import { WebView } from 'react-native-webview';
-import { StyleSheet, Platform, StatusBar, SafeAreaView, View, Text, Pressable, ActivityIndicator, Linking } from 'react-native';
+import { Platform, Linking, StyleSheet, StatusBar, SafeAreaView, View, Text, Pressable, ActivityIndicator } from 'react-native';
 import { generateStackTrace, makeBacktrace, getCauses } from '@honeybadger-io/core/build/src/util';
 
-// Generated by genversion.
-const version = '3.6.4';
-
-const AndroidSafeAreaView = ({ testId, children })=>/*#__PURE__*/ jsx(SafeAreaView, {
-        testID: testId,
-        style: styles$1.AndroidSafeArea,
-        children: children
-    });
-const styles$1 = StyleSheet.create({
-    AndroidSafeArea: {
-        flex: 1,
-        backgroundColor: 'white',
-        paddingTop: Platform.OS === 'android' ? StatusBar.currentHeight : 0
-    }
-});
-
-const ErrorScreen = ({ testId, error, cta })=>/*#__PURE__*/ jsx(AndroidSafeAreaView, {
-        testId: testId,
-        children: /*#__PURE__*/ jsxs(View, {
-            style: [
-                styles.container,
-                styles.padding
-            ],
-            children: [
-                /*#__PURE__*/ jsxs(View, {
-                    style: {
-                        flex: 1,
-                        justifyContent: 'center'
-                    },
-                    children: [
-                        /*#__PURE__*/ jsx(View, {
-                            style: {
-                                flexDirection: 'row',
-                                justifyContent: 'space-between',
-                                alignItems: 'center',
-                                marginVertical: 10
-                            },
-                            children: /*#__PURE__*/ jsx(Text, {
-                                style: [
-                                    styles.title
-                                ],
-                                children: "Cannot connect to the internet."
-                            })
-                        }),
-                        /*#__PURE__*/ jsx(Text, {
-                            style: [
-                                styles.subtitle
-                            ],
-                            children: error
-                        })
-                    ]
-                }),
-                /*#__PURE__*/ jsx(Pressable, {
-                    style: [
-                        styles.pressable
-                    ],
-                    onPress: cta,
-                    children: /*#__PURE__*/ jsx(Text, {
-                        style: [
-                            styles.pressableText
-                        ],
-                        children: "Exit"
-                    })
-                })
-            ]
-        })
-    });
-const styles = 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__*/ jsx(AndroidSafeAreaView, {
-        testId: testId,
-        children: /*#__PURE__*/ jsx(View, {
-            style: {
-                flex: 1,
-                justifyContent: 'center',
-                alignItems: 'center'
-            },
-            children: /*#__PURE__*/ jsx(ActivityIndicator, {
-                testID: "activity-indicator",
-                size: "large",
-                color: "#5928A3"
-            })
-        })
-    });
-
 const ErrorReporterConfig = {
     honeybadger_api_key: 'undefined'
 };
 
+// Generated by genversion.
+const version = '3.6.6';
+
 // Quick hack to send error to Honeybadger to debug why the connector is not routable
 const notifier = {
     name: 'Quiltt React Native SDK Reporter',
@@ -213,7 +100,7 @@ const getErrorMessage = (responseStatus, error)=>{
     return responseStatus ? `The URL is not routable. Response status: ${responseStatus}` : 'An error occurred while checking the connector URL';
 };
 
-const errorReporter = new ErrorReporter(`${Platform.OS} ${Platform.Version}`);
+const errorReporter$1 = new ErrorReporter(`${Platform.OS} ${Platform.Version}`);
 const PREFLIGHT_RETRY_COUNT = 3;
 const checkConnectorUrl = async (connectorUrl, retryCount = 0)=>{
     let responseStatus;
@@ -248,21 +135,149 @@ const checkConnectorUrl = async (connectorUrl, retryCount = 0)=>{
         connectorUrl,
         responseStatus
     };
-    if (responseStatus !== 404) await errorReporter.send(errorToSend, context);
+    if (responseStatus !== 404) await errorReporter$1.send(errorToSend, context);
     return {
         checked: true,
         error: errorMessage
     };
 };
 
-const handleOAuthUrl = (oauthUrl)=>{
-    if (oauthUrl.protocol !== 'https:') {
-        console.log(`handleOAuthUrl - Skipping non https url - ${oauthUrl.href}`);
-        return;
+const errorReporter = new ErrorReporter(`${Platform.OS} ${Platform.Version}`);
+const handleOAuthUrl = async (oauthUrl, context)=>{
+    const parsedUrl = new URL(oauthUrl.href);
+    try {
+        // Check if the URL protocol is HTTPS
+        if (parsedUrl.protocol !== 'https:') {
+            console.warn(`handleOAuthUrl - Skipping non-HTTPS URL - ${parsedUrl.href}`);
+            return;
+        }
+        // Open the URL using Linking module
+        await Linking.openURL(parsedUrl.href);
+    } catch (error) {
+        console.error('handleOAuthUrl - Error opening URL:', error);
+        // Report error to HoneyBadger
+        const errorContext = {
+            ...context,
+            oauthUrl: parsedUrl.href,
+            passedUrl: oauthUrl.toString()
+        };
+        await errorReporter.send(error, errorContext);
     }
-    Linking.openURL(oauthUrl.href);
 };
 
+const AndroidSafeAreaView = ({ testId, children })=>/*#__PURE__*/ jsx(SafeAreaView, {
+        testID: testId,
+        style: styles$1.AndroidSafeArea,
+        children: children
+    });
+const styles$1 = StyleSheet.create({
+    AndroidSafeArea: {
+        flex: 1,
+        backgroundColor: 'white',
+        paddingTop: Platform.OS === 'android' ? StatusBar.currentHeight : 0
+    }
+});
+
+const ErrorScreen = ({ testId, error, cta })=>/*#__PURE__*/ jsx(AndroidSafeAreaView, {
+        testId: testId,
+        children: /*#__PURE__*/ jsxs(View, {
+            style: [
+                styles.container,
+                styles.padding
+            ],
+            children: [
+                /*#__PURE__*/ jsxs(View, {
+                    style: {
+                        flex: 1,
+                        justifyContent: 'center'
+                    },
+                    children: [
+                        /*#__PURE__*/ jsx(View, {
+                            style: {
+                                flexDirection: 'row',
+                                justifyContent: 'space-between',
+                                alignItems: 'center',
+                                marginVertical: 10
+                            },
+                            children: /*#__PURE__*/ jsx(Text, {
+                                style: [
+                                    styles.title
+                                ],
+                                children: "Cannot connect to the internet."
+                            })
+                        }),
+                        /*#__PURE__*/ jsx(Text, {
+                            style: [
+                                styles.subtitle
+                            ],
+                            children: error
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ jsx(Pressable, {
+                    style: [
+                        styles.pressable
+                    ],
+                    onPress: cta,
+                    children: /*#__PURE__*/ jsx(Text, {
+                        style: [
+                            styles.pressableText
+                        ],
+                        children: "Exit"
+                    })
+                })
+            ]
+        })
+    });
+const styles = 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__*/ jsx(AndroidSafeAreaView, {
+        testId: testId,
+        children: /*#__PURE__*/ jsx(View, {
+            style: {
+                flex: 1,
+                justifyContent: 'center',
+                alignItems: 'center'
+            },
+            children: /*#__PURE__*/ jsx(ActivityIndicator, {
+                testID: "activity-indicator",
+                size: "large",
+                color: "#5928A3"
+            })
+        })
+    });
+
 const QuilttConnector = ({ testId, connectorId, connectionId, institution, oauthRedirectUrl, onEvent, onLoad, onExit, onExitSuccess, onExitAbort, onExitError })=>{
     const webViewRef = useRef(null);
     const { session } = useQuilttSession();
@@ -325,7 +340,7 @@ const QuilttConnector = ({ testId, connectorId, connectionId, institution, oauth
             'quiltt.app',
             'quiltt.dev',
             'moneydesktop.com',
-            'cdn.plaid.com/link/v2/stable/link.html'
+            'cdn.plaid.com'
         ], []);
     const isQuilttEvent = useCallback((url)=>url.protocol === 'quilttconnector:', []);
     const shouldRender = useCallback((url)=>{
@@ -338,10 +353,10 @@ const QuilttConnector = ({ testId, connectorId, connectionId, institution, oauth
         allowedListUrl,
         isQuilttEvent
     ]);
-    const clearLocalStorage = ()=>{
+    const clearLocalStorage = useCallback(()=>{
         const script = 'localStorage.clear();';
         webViewRef.current?.injectJavaScript(script);
-    };
+    }, []);
     const handleQuilttEvent = useCallback((url)=>{
         url.searchParams.delete('source');
         url.searchParams.append('connectorId', connectorId);
@@ -374,7 +389,12 @@ const QuilttConnector = ({ testId, connectorId, connectionId, institution, oauth
             case 'Authenticate':
                 break;
             case 'OauthRequested':
-                handleOAuthUrl(new URL(url.searchParams.get('oauthUrl')));
+                handleOAuthUrl(new URL(url.searchParams.get('oauthUrl')), {
+                    connectorId,
+                    connectionId,
+                    institution,
+                    oauthRedirectUrl
+                });
                 break;
             default:
                 console.log('unhandled event', url);
@@ -384,11 +404,15 @@ const QuilttConnector = ({ testId, connectorId, connectionId, institution, oauth
         connectorId,
         initInjectedJavaScript,
         onEvent,
+        onLoad,
+        clearLocalStorage,
         onExit,
         onExitAbort,
         onExitError,
         onExitSuccess,
-        onLoad
+        connectionId,
+        institution,
+        oauthRedirectUrl
     ]);
     const requestHandler = useCallback((request)=>{
         const url = new URL(request.url);
@@ -399,11 +423,20 @@ const QuilttConnector = ({ testId, connectorId, connectionId, institution, oauth
         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);
+        handleOAuthUrl(url, {
+            connectorId,
+            connectionId,
+            institution,
+            oauthRedirectUrl
+        });
         return false;
     }, [
+        connectionId,
+        connectorId,
         handleQuilttEvent,
+        institution,
         isQuilttEvent,
+        oauthRedirectUrl,
         shouldRender
     ]);
     if (!preFlightCheck.checked) return /*#__PURE__*/ jsx(LoadingScreen, {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@quiltt/react-native",
-  "version": "3.6.4",
+  "version": "3.6.6",
   "description": "React Native components for Quiltt Connector",
   "homepage": "https://github.com/quiltt/quiltt-js/tree/main/packages/react-native#readme",
   "repository": {
@@ -27,16 +27,15 @@
   ],
   "dependencies": {
     "@honeybadger-io/core": "6.6.0",
-    "@quiltt/core": "3.6.4",
-    "@quiltt/react": "3.6.4"
+    "@quiltt/core": "3.6.6",
+    "@quiltt/react": "3.6.6"
   },
   "devDependencies": {
     "@apollo/client": "3.9.9",
     "@trivago/prettier-plugin-sort-imports": "4.1.1",
-    "@types/base-64": "0.1.0",
-    "@types/node": "20.12.7",
+    "@types/base-64": "1.0.2",
+    "@types/node": "20.12.10",
     "@types/react": "18.2.73",
-    "@types/react-native": "0.72.5",
     "@typescript-eslint/eslint-plugin": "5.60.1",
     "@typescript-eslint/parser": "5.60.1",
     "bunchee": "4.4.8",
@@ -48,8 +47,11 @@
     "eslint-plugin-react-hooks": "4.6.0",
     "prettier": "2.8.8",
     "react": "18.2.0",
+    "react-native": "0.74.1",
+    "react-native-url-polyfill": "2.0.0",
+    "react-native-webview": "13.8.7",
     "rimraf": "5.0.5",
-    "typescript": "5.4.3"
+    "typescript": "5.4.5"
   },
   "peerDependencies": {
     "base-64": "*",

package/src/components/QuilttConnector.tsx

@@ -1,24 +1,22 @@
+import {
+  type ConnectorSDKCallbackMetadata,
+  type ConnectorSDKCallbacks,
+  ConnectorSDKEventType,
+  useQuilttSession,
+} from '@quiltt/react'
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
-
 // React Native's URL implementation is incomplete
 // https://github.com/facebook/react-native/issues/16434
 import { URL } from 'react-native-url-polyfill'
 import { WebView } from 'react-native-webview'
 import type { ShouldStartLoadRequest } from 'react-native-webview/lib/WebViewTypes'
 
-import {
-  ConnectorSDKCallbackMetadata,
-  ConnectorSDKCallbacks,
-  ConnectorSDKEventType,
-  useQuilttSession,
-} from '@quiltt/react'
-
-import { version } from '@/version'
+import { checkConnectorUrl, handleOAuthUrl } from '../utils'
+import type { PreFlightCheck } from '../utils'
+import { version } from '../version'
 import { AndroidSafeAreaView } from './AndroidSafeAreaView'
 import { ErrorScreen } from './ErrorScreen'
 import { LoadingScreen } from './LoadingScreen'
-import { checkConnectorUrl, handleOAuthUrl } from '@/utils'
-import type { PreFlightCheck } from '@/utils'
 
 type QuilttConnectorProps = {
   testId?: string
@@ -48,7 +46,7 @@ const QuilttConnector = ({
     [oauthRedirectUrl]
   )
   const connectorUrl = useMemo(() => {
-    const url: URL = new URL(`https://${connectorId}.quiltt.app`)
+    const url = new URL(`https://${connectorId}.quiltt.app`)
     url.searchParams.append('mode', 'webview')
     url.searchParams.append('oauth_redirect_url', encodedOAuthRedirectUrl)
     url.searchParams.append('agent', `react-native-${version}`)
@@ -90,12 +88,7 @@ const QuilttConnector = ({
   // For other urls, we assume those are bank urls, which needs to be handle in external browser.
   // TODO: Convert it to a list from Quiltt Server to prevent MX/ Plaid changes.
   const allowedListUrl = useMemo(
-    () => [
-      'quiltt.app',
-      'quiltt.dev',
-      'moneydesktop.com',
-      'cdn.plaid.com/link/v2/stable/link.html',
-    ],
+    () => ['quiltt.app', 'quiltt.dev', 'moneydesktop.com', 'cdn.plaid.com'],
     []
   )
 
@@ -112,10 +105,10 @@ const QuilttConnector = ({
     [allowedListUrl, isQuilttEvent]
   )
 
-  const clearLocalStorage = () => {
+  const clearLocalStorage = useCallback(() => {
     const script = 'localStorage.clear();'
     webViewRef.current?.injectJavaScript(script)
-  }
+  }, [])
 
   const handleQuilttEvent = useCallback(
     (url: URL) => {
@@ -152,7 +145,12 @@ const QuilttConnector = ({
           // TODO: handle Authenticate
           break
         case 'OauthRequested':
-          handleOAuthUrl(new URL(url.searchParams.get('oauthUrl') as string))
+          handleOAuthUrl(new URL(url.searchParams.get('oauthUrl') as string), {
+            connectorId,
+            connectionId,
+            institution,
+            oauthRedirectUrl,
+          })
           break
         default:
           console.log('unhandled event', url)
@@ -163,11 +161,15 @@ const QuilttConnector = ({
       connectorId,
       initInjectedJavaScript,
       onEvent,
+      onLoad,
+      clearLocalStorage,
       onExit,
       onExitAbort,
       onExitError,
       onExitSuccess,
-      onLoad,
+      connectionId,
+      institution,
+      oauthRedirectUrl,
     ]
   )
 
@@ -182,10 +184,23 @@ const QuilttConnector = ({
       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)
+      handleOAuthUrl(url, {
+        connectorId,
+        connectionId,
+        institution,
+        oauthRedirectUrl,
+      })
       return false
     },
-    [handleQuilttEvent, isQuilttEvent, shouldRender]
+    [
+      connectionId,
+      connectorId,
+      handleQuilttEvent,
+      institution,
+      isQuilttEvent,
+      oauthRedirectUrl,
+      shouldRender,
+    ]
   )
 
   if (!preFlightCheck.checked) return <LoadingScreen testId="loading-screen" />

package/src/utils/connector/checkConnectorUrl.ts

@@ -1,5 +1,5 @@
-import { getErrorMessage, ErrorReporter } from '../error'
 import { Platform } from 'react-native'
+import { getErrorMessage, ErrorReporter } from '../error'
 
 const errorReporter = new ErrorReporter(`${Platform.OS} ${Platform.Version}`)
 const PREFLIGHT_RETRY_COUNT = 3

package/src/utils/connector/handleOAuthUrl.ts

@@ -1,9 +1,28 @@
-import { Linking } from 'react-native'
+import { Linking, Platform } from 'react-native'
+import { URL } from 'react-native-url-polyfill'
+import { ErrorReporter } from '../error'
 
-export const handleOAuthUrl = (oauthUrl: URL) => {
-  if (oauthUrl.protocol !== 'https:') {
-    console.log(`handleOAuthUrl - Skipping non https url - ${oauthUrl.href}`)
-    return
+const errorReporter = new ErrorReporter(`${Platform.OS} ${Platform.Version}`)
+
+export const handleOAuthUrl = async (
+  oauthUrl: URL,
+  context?: Record<string, unknown>
+): Promise<void> => {
+  const parsedUrl = new URL(oauthUrl.href)
+  try {
+    // Check if the URL protocol is HTTPS
+    if (parsedUrl.protocol !== 'https:') {
+      console.warn(`handleOAuthUrl - Skipping non-HTTPS URL - ${parsedUrl.href}`)
+      return
+    }
+
+    // Open the URL using Linking module
+    await Linking.openURL(parsedUrl.href)
+  } catch (error) {
+    console.error('handleOAuthUrl - Error opening URL:', error)
+
+    // Report error to HoneyBadger
+    const errorContext = { ...context, oauthUrl: parsedUrl.href, passedUrl: oauthUrl.toString() }
+    await errorReporter.send(error as Error, errorContext)
   }
-  Linking.openURL(oauthUrl.href)
 }

package/src/version.ts

@@ -1,2 +1,2 @@
 // Generated by genversion.
-export const version = '3.6.4'
+export const version = '3.6.6'