@quiltt/react-native 4.3.3 → 4.5.0

package/CHANGELOG.md

@@ -1,5 +1,61 @@
 # @quiltt/react-native
 
+## 4.5.0
+
+### Minor Changes
+
+- [#386](https://github.com/quiltt/quiltt-js/pull/386) [`0bf706c`](https://github.com/quiltt/quiltt-js/commit/0bf706ce2ad926304d6eac739ee58971736f913e) Thanks [@zubairaziz](https://github.com/zubairaziz)! - Update platform webview props
+
+### Patch Changes
+
+- [#380](https://github.com/quiltt/quiltt-js/pull/380) [`31cd190`](https://github.com/quiltt/quiltt-js/commit/31cd1902618ebc2314d42dd7aca81b3ab94068ea) Thanks [@sirwolfgang](https://github.com/sirwolfgang)! - Improve useQuilttResolvable error messaging
+
+- Updated dependencies [[`31cd190`](https://github.com/quiltt/quiltt-js/commit/31cd1902618ebc2314d42dd7aca81b3ab94068ea), [`0bf706c`](https://github.com/quiltt/quiltt-js/commit/0bf706ce2ad926304d6eac739ee58971736f913e)]:
+  - @quiltt/core@4.5.0
+  - @quiltt/react@4.5.0
+
+## 4.4.0
+
+### Minor Changes
+
+- [#378](https://github.com/quiltt/quiltt-js/pull/378) [`0af4e66`](https://github.com/quiltt/quiltt-js/commit/0af4e6622d1542e0c0c02ac7e897e3e4f9219cbd) Thanks [@sirwolfgang](https://github.com/sirwolfgang)! - Add connector institution search and provider migration support.
+
+  ## New APIs
+
+  ### `useQuilttResolvable` Hook
+
+  Check if external provider institution IDs (e.g., Plaid) can be migrated to your connector.
+
+  ```typescript
+  import { useQuilttResolvable } from "@quiltt/react";
+  import { useEffect } from "react";
+
+  function ResolvableConnector({ plaidInstitutionId, children }) {
+    const { checkResolvable, isResolvable, isLoading } =
+      useQuilttResolvable("my-connector-id");
+
+    useEffect(() => {
+      checkResolvable({ plaid: plaidInstitutionId });
+    }, [plaidInstitutionId]);
+
+    if (isLoading) return <div>Checking...</div>;
+    if (!isResolvable) return null;
+
+    return <>{children}</>;
+  }
+
+  // Usage
+  <ResolvableConnector plaidInstitutionId="ins_3">
+    <QuilttButton connectorId="my-connector-id" />
+  </ResolvableConnector>;
+  ```
+
+### Patch Changes
+
+- Updated dependencies [[`0af4e66`](https://github.com/quiltt/quiltt-js/commit/0af4e6622d1542e0c0c02ac7e897e3e4f9219cbd)]:
+  - @quiltt/react@4.4.0
+  - @quiltt/core@4.4.0
+
 ## 4.3.3
 
 ### Patch Changes

package/dist/index.d.ts

@@ -1,7 +1,7 @@
 export * from '@quiltt/core';
 import { ConnectorSDKCallbacks } from '@quiltt/react';
 export { QuilttAuthProvider, QuilttProvider, QuilttSettingsProvider, useQuilttClient, useQuilttConnector, useQuilttSession, useQuilttSettings, useSession, useStorage } from '@quiltt/react';
-import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as react from 'react';
 import { URL } from 'react-native-url-polyfill';
 
 type PreFlightCheck = {
@@ -13,17 +13,16 @@ declare const checkConnectorUrl: (connectorUrl: string, retryCount?: number) =>
  * Handle opening OAuth URLs with proper encoding detection and normalization
  */
 declare const handleOAuthUrl: (oauthUrl: URL | string | null | undefined) => void;
-type QuilttConnectorProps = {
+type QuilttConnectorHandle = {
+    handleOAuthCallback: (url: string) => void;
+};
+declare const QuilttConnector: react.ForwardRefExoticComponent<{
     connectorId: string;
     connectionId?: string;
     institution?: string;
     oauthRedirectUrl: string;
     testId?: string;
-} & ConnectorSDKCallbacks;
-declare const QuilttConnector: {
-    ({ connectorId, connectionId, institution, oauthRedirectUrl, onEvent, onLoad, onExit, onExitSuccess, onExitAbort, onExitError, testId, }: QuilttConnectorProps): react_jsx_runtime.JSX.Element;
-    displayName: string;
-};
+} & ConnectorSDKCallbacks & react.RefAttributes<QuilttConnectorHandle>>;
 
 export { QuilttConnector, checkConnectorUrl, handleOAuthUrl };
-export type { PreFlightCheck };
+export type { PreFlightCheck, QuilttConnectorHandle };

package/dist/index.js

@@ -3,13 +3,13 @@ export * from '@quiltt/core';
 import { useQuilttSession, ConnectorSDKEventType } from '@quiltt/react';
 export { QuilttAuthProvider, QuilttProvider, QuilttSettingsProvider, useQuilttClient, useQuilttConnector, useQuilttSession, useQuilttSettings, useSession, useStorage } from '@quiltt/react';
 import { jsx, jsxs } from 'react/jsx-runtime';
-import { useRef, useState, useCallback, useMemo, useEffect } from 'react';
+import { forwardRef, useRef, useState, useCallback, useMemo, useEffect, useImperativeHandle } from 'react';
 import { StyleSheet, StatusBar, Platform, SafeAreaView, View, Text, Pressable, ActivityIndicator, Linking } from 'react-native';
 import { URL } from 'react-native-url-polyfill';
 import { WebView } from 'react-native-webview';
 import { generateStackTrace, makeBacktrace, getCauses } from '@honeybadger-io/core/build/src/util';
 
-var version = "4.3.3";
+var version = "4.5.0";
 
 // Custom Error Reporter to avoid hooking into or colliding with a client's Honeybadger singleton
 const notifier = {
@@ -115,12 +115,12 @@ const getErrorMessage = (responseStatus, error)=>{
     if (!str) return str;
     // If it's already encoded, return as is
     if (isEncoded(str)) {
-        console.log('URL already encoded, skipping encoding:', str);
+        console.log('URL already encoded, skipping encoding');
         return str;
     }
     // Otherwise, encode it
     const encoded = encodeURIComponent(str);
-    console.log('URL encoded from:', str, 'to:', encoded);
+    console.log('URL encoded');
     return encoded;
 };
 /**
@@ -349,7 +349,7 @@ const checkConnectorUrl = async (connectorUrl, retryCount = 0)=>{
         }
     }
 };
-const QuilttConnector = ({ connectorId, connectionId, institution, oauthRedirectUrl, onEvent, onLoad, onExit, onExitSuccess, onExitAbort, onExitError, testId })=>{
+const QuilttConnector = /*#__PURE__*/ forwardRef(({ connectorId, connectionId, institution, oauthRedirectUrl, onEvent, onLoad, onExit, onExitSuccess, onExitAbort, onExitError, testId }, ref)=>{
     const webViewRef = useRef(null);
     const { session } = useQuilttSession();
     const [preFlightCheck, setPreFlightCheck] = useState({
@@ -535,6 +535,44 @@ const QuilttConnector = ({ connectorId, connectionId, institution, oauthRedirect
         isQuilttEvent,
         shouldRender
     ]);
+    // Expose method to handle OAuth callbacks from parent component
+    useImperativeHandle(ref, ()=>({
+            handleOAuthCallback: (callbackUrl)=>{
+                try {
+                    console.log('Handling OAuth callback:', callbackUrl);
+                    const url = new 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) {
         return /*#__PURE__*/ jsx(LoadingScreen, {
             testId: "loading-screen"
@@ -554,42 +592,42 @@ const QuilttConnector = ({ connectorId, connectionId, institution, oauthRedirect
         children: /*#__PURE__*/ jsx(WebView, {
             ref: webViewRef,
             // Plaid keeps sending window.location = 'about:srcdoc' and causes some noise in RN
-            style: styles.webview,
+            domStorageEnabled: true,
+            javaScriptEnabled: true,
+            onLoadEnd: onLoadEnd,
+            onShouldStartLoadWithRequest: requestHandler,
             originWhitelist: [
                 '*'
             ],
+            scrollEnabled: true,
+            showsHorizontalScrollIndicator: false,
+            showsVerticalScrollIndicator: false,
             source: {
                 uri: connectorUrl
             },
-            onShouldStartLoadWithRequest: requestHandler,
-            onLoadEnd: onLoadEnd,
-            javaScriptEnabled: true,
-            domStorageEnabled: true,
-            webviewDebuggingEnabled: true,
-            bounces: false,
-            scrollEnabled: true,
-            automaticallyAdjustContentInsets: false,
-            contentInsetAdjustmentBehavior: "never",
-            showsVerticalScrollIndicator: false,
-            showsHorizontalScrollIndicator: false,
+            style: styles.webview,
             testID: "webview",
+            webviewDebuggingEnabled: true,
             ...Platform.OS === 'ios' ? {
+                allowsBackForwardNavigationGestures: false,
+                allowsInlineMediaPlayback: true,
+                automaticallyAdjustContentInsets: false,
+                bounces: false,
+                contentInsetAdjustmentBehavior: 'never',
+                dataDetectorTypes: 'none',
                 decelerationRate: 'normal',
                 keyboardDisplayRequiresUserAction: false,
-                dataDetectorTypes: 'none',
-                allowsInlineMediaPlayback: true,
-                allowsBackForwardNavigationGestures: false,
-                startInLoadingState: true,
                 scrollEventThrottle: 16,
-                overScrollMode: 'never'
+                startInLoadingState: true
             } : {
                 androidLayerType: 'hardware',
                 cacheEnabled: true,
-                cacheMode: 'LOAD_CACHE_ELSE_NETWORK'
+                cacheMode: 'LOAD_CACHE_ELSE_NETWORK',
+                overScrollMode: 'never'
             }
         })
     });
-};
+});
 // Add styles for the WebView container
 const styles = StyleSheet.create({
     webviewContainer: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@quiltt/react-native",
-  "version": "4.3.3",
+  "version": "4.5.0",
   "description": "React Native Components for Quiltt Connector",
   "homepage": "https://github.com/quiltt/quiltt-js/tree/main/packages/react-native#readme",
   "repository": {
@@ -30,8 +30,8 @@
   "dependencies": {
     "@honeybadger-io/core": "6.6.0",
     "lodash.debounce": "4.0.8",
-    "@quiltt/core": "4.3.3",
-    "@quiltt/react": "4.3.3"
+    "@quiltt/core": "4.5.0",
+    "@quiltt/react": "4.5.0"
   },
   "devDependencies": {
     "@biomejs/biome": "2.2.4",

package/src/components/QuilttConnector.tsx

@@ -1,4 +1,12 @@
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
+import {
+  forwardRef,
+  useCallback,
+  useEffect,
+  useImperativeHandle,
+  useMemo,
+  useRef,
+  useState,
+} from 'react'
 import { Linking, Platform, StyleSheet } from 'react-native'
 
 import type { ConnectorSDKCallbackMetadata, ConnectorSDKCallbacks } from '@quiltt/react'
@@ -130,6 +138,10 @@ export const handleOAuthUrl = (oauthUrl: URL | string | null | undefined) => {
   }
 }
 
+export type QuilttConnectorHandle = {
+  handleOAuthCallback: (url: string) => void
+}
+
 type QuilttConnectorProps = {
   connectorId: string
   connectionId?: string
@@ -138,25 +150,29 @@ type QuilttConnectorProps = {
   testId?: string
 } & ConnectorSDKCallbacks
 
-const QuilttConnector = ({
-  connectorId,
-  connectionId,
-  institution,
-  oauthRedirectUrl,
-  onEvent,
-  onLoad,
-  onExit,
-  onExitSuccess,
-  onExitAbort,
-  onExitError,
-  testId,
-}: QuilttConnectorProps) => {
-  const webViewRef = useRef<WebView>(null)
-  const { session } = useQuilttSession()
-  const [preFlightCheck, setPreFlightCheck] = useState<PreFlightCheck>({ checked: false })
-
-  // Script to disable scrolling on header
-  const disableHeaderScrollScript = `
+const QuilttConnector = forwardRef<QuilttConnectorHandle, QuilttConnectorProps>(
+  (
+    {
+      connectorId,
+      connectionId,
+      institution,
+      oauthRedirectUrl,
+      onEvent,
+      onLoad,
+      onExit,
+      onExitSuccess,
+      onExitAbort,
+      onExitError,
+      testId,
+    },
+    ref
+  ) => {
+    const webViewRef = useRef<WebView>(null)
+    const { session } = useQuilttSession()
+    const [preFlightCheck, setPreFlightCheck] = useState<PreFlightCheck>({ checked: false })
+
+    // Script to disable scrolling on header
+    const disableHeaderScrollScript = `
     (function() {
       const header = document.querySelector('header');
       if (header) {
@@ -169,48 +185,48 @@ const QuilttConnector = ({
     })();
   `
 
-  const onLoadEnd = useCallback(() => {
-    if (Platform.OS === 'ios') {
-      webViewRef.current?.injectJavaScript(disableHeaderScrollScript)
-    }
-  }, [])
-
-  // Ensure oauthRedirectUrl is encoded properly - only once
-  const safeOAuthRedirectUrl = useMemo(() => {
-    return smartEncodeURIComponent(oauthRedirectUrl)
-  }, [oauthRedirectUrl])
-
-  const connectorUrl = useMemo(() => {
-    const url = new URL(`https://${connectorId}.quiltt.app`)
-
-    // For normal parameters, just append them directly
-    url.searchParams.append('mode', 'webview')
-    url.searchParams.append('agent', `react-native-${version}`)
-
-    // 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 (isEncoded(safeOAuthRedirectUrl)) {
-      const decodedOnce = decodeURIComponent(safeOAuthRedirectUrl)
-      url.searchParams.append('oauth_redirect_url', decodedOnce)
-    } else {
-      url.searchParams.append('oauth_redirect_url', safeOAuthRedirectUrl)
-    }
+    const onLoadEnd = useCallback(() => {
+      if (Platform.OS === 'ios') {
+        webViewRef.current?.injectJavaScript(disableHeaderScrollScript)
+      }
+    }, [])
+
+    // Ensure oauthRedirectUrl is encoded properly - only once
+    const safeOAuthRedirectUrl = useMemo(() => {
+      return smartEncodeURIComponent(oauthRedirectUrl)
+    }, [oauthRedirectUrl])
+
+    const connectorUrl = useMemo(() => {
+      const url = new URL(`https://${connectorId}.quiltt.app`)
+
+      // For normal parameters, just append them directly
+      url.searchParams.append('mode', 'webview')
+      url.searchParams.append('agent', `react-native-${version}`)
+
+      // 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 (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])
+      return url.toString()
+    }, [connectorId, safeOAuthRedirectUrl])
 
-  useEffect(() => {
-    if (preFlightCheck.checked) return
-    const fetchDataAndSetState = async () => {
-      const connectorUrlStatus = await checkConnectorUrl(connectorUrl)
-      setPreFlightCheck(connectorUrlStatus)
-    }
-    fetchDataAndSetState()
-  }, [connectorUrl, preFlightCheck])
+    useEffect(() => {
+      if (preFlightCheck.checked) return
+      const fetchDataAndSetState = async () => {
+        const connectorUrlStatus = await checkConnectorUrl(connectorUrl)
+        setPreFlightCheck(connectorUrlStatus)
+      }
+      fetchDataAndSetState()
+    }, [connectorUrl, preFlightCheck])
 
-  const initInjectedJavaScript = useCallback(() => {
-    const script = `\
+    const initInjectedJavaScript = useCallback(() => {
+      const script = `\
       const options = {\
         source: 'quiltt',\
         type: 'Options',\
@@ -227,174 +243,222 @@ const QuilttConnector = ({
       }, {});\
       window.postMessage(compactedOptions);\
     `
-    webViewRef.current?.injectJavaScript(script)
-  }, [connectionId, connectorId, institution, session?.token])
-
-  const isQuilttEvent = useCallback((url: URL) => url.protocol === 'quilttconnector:', [])
-
-  const shouldRender = useCallback((url: URL) => !isQuilttEvent(url), [isQuilttEvent])
-
-  const clearLocalStorage = useCallback(() => {
-    const script = 'localStorage.clear();'
-    webViewRef.current?.injectJavaScript(script)
-  }, [])
-
-  const handleQuilttEvent = useCallback(
-    (url: 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?.(ConnectorSDKEventType.Load, metadata)
-            onLoad?.(metadata)
-            break
-          case 'ExitAbort':
-            console.log('Event: ExitAbort')
-            clearLocalStorage()
-            onEvent?.(ConnectorSDKEventType.ExitAbort, metadata)
-            onExit?.(ConnectorSDKEventType.ExitAbort, metadata)
-            onExitAbort?.(metadata)
-            break
-          case 'ExitError':
-            console.log('Event: ExitError')
-            clearLocalStorage()
-            onEvent?.(ConnectorSDKEventType.ExitError, metadata)
-            onExit?.(ConnectorSDKEventType.ExitError, metadata)
-            onExitError?.(metadata)
-            break
-          case 'ExitSuccess':
-            console.log('Event: ExitSuccess')
-            clearLocalStorage()
-            onEvent?.(ConnectorSDKEventType.ExitSuccess, metadata)
-            onExit?.(ConnectorSDKEventType.ExitSuccess, metadata)
-            onExitSuccess?.(metadata)
-            break
-          case 'Authenticate':
-            console.log('Event: Authenticate')
-            // TODO: handle Authenticate
-            break
-          case 'Navigate': {
-            console.log('Event: Navigate')
-            const navigateUrl = url.searchParams.get('url')
-
-            if (navigateUrl) {
-              if (isEncoded(navigateUrl)) {
-                try {
-                  const decodedUrl = decodeURIComponent(navigateUrl)
-                  handleOAuthUrl(decodedUrl)
-                } catch (_error) {
-                  console.error('Navigate URL decoding failed, using original')
+      webViewRef.current?.injectJavaScript(script)
+    }, [connectionId, connectorId, institution, session?.token])
+
+    const isQuilttEvent = useCallback((url: URL) => url.protocol === 'quilttconnector:', [])
+
+    const shouldRender = useCallback((url: URL) => !isQuilttEvent(url), [isQuilttEvent])
+
+    const clearLocalStorage = useCallback(() => {
+      const script = 'localStorage.clear();'
+      webViewRef.current?.injectJavaScript(script)
+    }, [])
+
+    const handleQuilttEvent = useCallback(
+      (url: 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?.(ConnectorSDKEventType.Load, metadata)
+              onLoad?.(metadata)
+              break
+            case 'ExitAbort':
+              console.log('Event: ExitAbort')
+              clearLocalStorage()
+              onEvent?.(ConnectorSDKEventType.ExitAbort, metadata)
+              onExit?.(ConnectorSDKEventType.ExitAbort, metadata)
+              onExitAbort?.(metadata)
+              break
+            case 'ExitError':
+              console.log('Event: ExitError')
+              clearLocalStorage()
+              onEvent?.(ConnectorSDKEventType.ExitError, metadata)
+              onExit?.(ConnectorSDKEventType.ExitError, metadata)
+              onExitError?.(metadata)
+              break
+            case 'ExitSuccess':
+              console.log('Event: ExitSuccess')
+              clearLocalStorage()
+              onEvent?.(ConnectorSDKEventType.ExitSuccess, metadata)
+              onExit?.(ConnectorSDKEventType.ExitSuccess, metadata)
+              onExitSuccess?.(metadata)
+              break
+            case 'Authenticate':
+              console.log('Event: Authenticate')
+              // TODO: handle Authenticate
+              break
+            case 'Navigate': {
+              console.log('Event: Navigate')
+              const navigateUrl = url.searchParams.get('url')
+
+              if (navigateUrl) {
+                if (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 {
-                handleOAuthUrl(navigateUrl)
+                console.error('Navigate URL missing from request')
               }
-            } else {
-              console.error('Navigate URL missing from request')
+              break
             }
-            break
+            // NOTE: The `OauthRequested` is deprecated and should not be used
+            default:
+              console.log(`Unhandled event: ${eventType}`)
+              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 = useCallback(
+      (request: ShouldStartLoadRequest) => {
+        const url = new URL(request.url)
+
+        if (isQuilttEvent(url)) {
+          handleQuilttEvent(url)
+          return false
         }
-      })
-    },
-    [
-      clearLocalStorage,
-      connectorId,
-      initInjectedJavaScript,
-      onEvent,
-      onExit,
-      onExitAbort,
-      onExitError,
-      onExitSuccess,
-      onLoad,
-    ]
-  )
 
-  const requestHandler = useCallback(
-    (request: ShouldStartLoadRequest) => {
-      const url = new URL(request.url)
+        if (shouldRender(url)) {
+          return true
+        }
 
-      if (isQuilttEvent(url)) {
-        handleQuilttEvent(url)
+        // 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]
+    )
 
-      if (shouldRender(url)) {
-        return true
-      }
+    // Expose method to handle OAuth callbacks from parent component
+    useImperativeHandle(
+      ref,
+      () => ({
+        handleOAuthCallback: (callbackUrl: string) => {
+          try {
+            console.log('Handling OAuth callback:', callbackUrl)
+            const url = new URL(callbackUrl)
+
+            // Extract OAuth callback parameters
+            const oauthParams: Record<string, string> = {}
+            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,
+              },
+            }
 
-      // 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]
-  )
+            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;
+            `
 
-  if (!preFlightCheck.checked) {
-    return <LoadingScreen testId="loading-screen" />
-  }
+            webViewRef.current?.injectJavaScript(script)
+          } catch (error) {
+            console.error('Error handling OAuth callback:', error)
+          }
+        },
+      }),
+      []
+    )
+
+    if (!preFlightCheck.checked) {
+      return <LoadingScreen testId="loading-screen" />
+    }
+
+    if (preFlightCheck.error) {
+      return (
+        <ErrorScreen
+          testId="error-screen"
+          error={preFlightCheck.error}
+          cta={() => onExitError?.({ connectorId })}
+        />
+      )
+    }
 
-  if (preFlightCheck.error) {
     return (
-      <ErrorScreen
-        testId="error-screen"
-        error={preFlightCheck.error}
-        cta={() => onExitError?.({ connectorId })}
-      />
+      <AndroidSafeAreaView testId={testId}>
+        <WebView
+          ref={webViewRef}
+          // Plaid keeps sending window.location = 'about:srcdoc' and causes some noise in RN
+          domStorageEnabled // To enable localStorage in Android webview
+          javaScriptEnabled
+          onLoadEnd={onLoadEnd}
+          onShouldStartLoadWithRequest={requestHandler}
+          originWhitelist={['*']}
+          scrollEnabled={true} // Enables scrolling within the WebView
+          showsHorizontalScrollIndicator={false}
+          showsVerticalScrollIndicator={false}
+          source={{ uri: connectorUrl }}
+          style={styles.webview}
+          testID="webview"
+          webviewDebuggingEnabled
+          {...(Platform.OS === 'ios'
+            ? {
+                allowsBackForwardNavigationGestures: false, // Disables swipe to go back/forward
+                allowsInlineMediaPlayback: true, // Allows videos to play inline
+                automaticallyAdjustContentInsets: false, // Disables automatic padding adjustments
+                bounces: false, // Controls the bouncing effect when scrolling past content boundaries
+                contentInsetAdjustmentBehavior: 'never', // Controls how safe area insets modify content
+                dataDetectorTypes: 'none', // Disables automatic data detection (phone numbers, links, etc.)
+                decelerationRate: 'normal', // Controls scroll deceleration speed
+                keyboardDisplayRequiresUserAction: false, // Allows programmatic keyboard display
+                scrollEventThrottle: 16, // Optimize scroll performance (throttle scroll events)
+                startInLoadingState: true, // Shows loading indicator on first load
+              }
+            : {
+                androidLayerType: 'hardware', // Use hardware acceleration for rendering
+                cacheEnabled: true, // Enable caching
+                cacheMode: 'LOAD_CACHE_ELSE_NETWORK', // Load from cache when available
+                overScrollMode: 'never', // Disable overscroll effect
+              })}
+        />
+      </AndroidSafeAreaView>
     )
   }
-
-  return (
-    <AndroidSafeAreaView testId={testId}>
-      <WebView
-        ref={webViewRef}
-        // Plaid keeps sending window.location = 'about:srcdoc' and causes some noise in RN
-        style={styles.webview}
-        originWhitelist={['*']}
-        source={{ uri: connectorUrl }}
-        onShouldStartLoadWithRequest={requestHandler}
-        onLoadEnd={onLoadEnd}
-        javaScriptEnabled
-        domStorageEnabled // To enable localStorage in Android webview
-        webviewDebuggingEnabled
-        bounces={false} // Controls the bouncing effect when scrolling past content boundaries (iOS only)
-        scrollEnabled={true} // Enables scrolling within the WebView
-        automaticallyAdjustContentInsets={false} // Disables automatic padding adjustments based on navigation bars/safe areas
-        contentInsetAdjustmentBehavior="never" // Controls how the WebView adjusts its content layout relative to safe areas and system UI
-        showsVerticalScrollIndicator={false}
-        showsHorizontalScrollIndicator={false}
-        testID="webview"
-        {...(Platform.OS === 'ios'
-          ? {
-              decelerationRate: 'normal',
-              keyboardDisplayRequiresUserAction: false,
-              dataDetectorTypes: 'none',
-              allowsInlineMediaPlayback: true,
-              allowsBackForwardNavigationGestures: false,
-              startInLoadingState: true,
-              scrollEventThrottle: 16, // Optimize scroll performance
-              overScrollMode: 'never', // Prevent overscroll effect
-            }
-          : {
-              androidLayerType: 'hardware',
-              cacheEnabled: true,
-              cacheMode: 'LOAD_CACHE_ELSE_NETWORK',
-            })}
-      />
-    </AndroidSafeAreaView>
-  )
-}
+)
 
 // Add styles for the WebView container
 const styles = StyleSheet.create({

package/src/utils/url.ts

@@ -24,13 +24,13 @@ export const smartEncodeURIComponent = (str: string): string => {
 
   // If it's already encoded, return as is
   if (isEncoded(str)) {
-    console.log('URL already encoded, skipping encoding:', str)
+    console.log('URL already encoded, skipping encoding')
     return str
   }
 
   // Otherwise, encode it
   const encoded = encodeURIComponent(str)
-  console.log('URL encoded from:', str, 'to:', encoded)
+  console.log('URL encoded')
   return encoded
 }