@quiltt/react-native 3.9.5 → 3.9.7

package/CHANGELOG.md

@@ -1,5 +1,25 @@
 # @quiltt/react-native
 
+## 3.9.7
+
+### Patch Changes
+
+- [#330](https://github.com/quiltt/quiltt-js/pull/330) [`e7b8e74`](https://github.com/quiltt/quiltt-js/commit/e7b8e74613f7725c6f2653be6d8ac0e06cce661d) Thanks [@zubairaziz](https://github.com/zubairaziz)! - Make OAuth Handling Safer
+
+- Updated dependencies [[`e7b8e74`](https://github.com/quiltt/quiltt-js/commit/e7b8e74613f7725c6f2653be6d8ac0e06cce661d)]:
+  - @quiltt/core@3.9.7
+  - @quiltt/react@3.9.7
+
+## 3.9.6
+
+### Patch Changes
+
+- [#328](https://github.com/quiltt/quiltt-js/pull/328) [`6b8751c`](https://github.com/quiltt/quiltt-js/commit/6b8751c981e9e74b347227bc9f427585d21870cd) Thanks [@zubairaziz](https://github.com/zubairaziz)! - Updated QuilttConnector OAuth handler
+
+- Updated dependencies [[`6b8751c`](https://github.com/quiltt/quiltt-js/commit/6b8751c981e9e74b347227bc9f427585d21870cd)]:
+  - @quiltt/react@3.9.6
+  - @quiltt/core@3.9.6
+
 ## 3.9.5
 
 ### Patch Changes

package/dist/index.d.ts

@@ -9,7 +9,10 @@ type PreFlightCheck = {
     error?: string;
 };
 declare const checkConnectorUrl: (connectorUrl: string, retryCount?: number) => Promise<PreFlightCheck>;
-declare const handleOAuthUrl: (oauthUrl: URL | string) => void;
+/**
+ * Handle opening OAuth URLs with proper encoding detection and normalization
+ */
+declare const handleOAuthUrl: (oauthUrl: URL | string | null | undefined) => void;
 type QuilttConnectorProps = {
     testId?: string;
     connectorId: string;

package/dist/index.js

@@ -9,7 +9,7 @@ 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 = "3.9.5";
+var version = "3.9.7";
 
 const ErrorReporterConfig = {
     honeybadger_api_key: 'undefined'
@@ -99,6 +99,52 @@ const getErrorMessage = (responseStatus, error)=>{
     return responseStatus ? `The URL is not routable. Response status: ${responseStatus}` : 'An error occurred while checking the connector URL';
 };
 
+/**
+ * Checks if a string appears to be already URL encoded
+ * @param str The string to check
+ * @returns boolean indicating if the string appears to be URL encoded
+ */ const isEncoded = (str)=>{
+    // Check for typical URL encoding patterns like %20, %3A, etc.
+    const hasEncodedChars = /%[0-9A-F]{2}/i.test(str);
+    // Check if double encoding has occurred (e.g., %253A instead of %3A)
+    const hasDoubleEncoding = /%25[0-9A-F]{2}/i.test(str);
+    // If we have encoded chars but no double encoding, it's likely properly encoded
+    return hasEncodedChars && !hasDoubleEncoding;
+};
+/**
+ * Smart URL encoder that ensures a string is encoded exactly once
+ * @param str The string to encode
+ * @returns A properly URL encoded string
+ */ const smartEncodeURIComponent = (str)=>{
+    if (!str) return str;
+    // If it's already encoded, return as is
+    if (isEncoded(str)) {
+        console.log('URL already encoded, skipping encoding:', str);
+        return str;
+    }
+    // Otherwise, encode it
+    const encoded = encodeURIComponent(str);
+    console.log('URL encoded from:', str, 'to:', encoded);
+    return encoded;
+};
+/**
+ * Checks if a string appears to be double-encoded
+ */ const isDoubleEncoded = (str)=>{
+    if (!str) return false;
+    return /%25[0-9A-F]{2}/i.test(str);
+};
+/**
+ * Normalizes a URL string by decoding it once if it appears to be double-encoded
+ */ const normalizeUrlEncoding = (urlStr)=>{
+    if (isDoubleEncoded(urlStr)) {
+        console.log('Detected double-encoded URL:', urlStr);
+        const normalized = decodeURIComponent(urlStr);
+        console.log('Normalized to:', normalized);
+        return normalized;
+    }
+    return urlStr;
+};
+
 const AndroidSafeAreaView = ({ testId, children })=>/*#__PURE__*/ jsx(SafeAreaView, {
         testID: testId,
         style: styles$2.AndroidSafeArea,
@@ -221,19 +267,18 @@ const checkConnectorUrl = async (connectorUrl, retryCount = 0)=>{
         const response = await fetch(connectorUrl);
         if (!response.ok) {
             responseStatus = response.status;
-            throw new Error(`The URL ${connectorUrl} is not routable.`);
+            throw new Error('Connector URL is not routable.');
         }
-        console.log(`The URL ${connectorUrl} is routable.`);
         return {
             checked: true
         };
     } catch (e) {
         error = e;
-        console.error(`An error occurred while checking the connector URL: ${error}`);
+        console.error('Failed to connect to connector URL');
         if (retryCount < PREFLIGHT_RETRY_COUNT) {
             const delay = 50 * 2 ** retryCount;
             await new Promise((resolve)=>setTimeout(resolve, delay));
-            console.log(`Retrying... Attempt number ${retryCount + 1}`);
+            console.log(`Retrying connection... Attempt ${retryCount + 1}`);
             return checkConnectorUrl(connectorUrl, retryCount + 1);
         }
         const errorMessage = getErrorMessage(responseStatus, error);
@@ -249,9 +294,37 @@ const checkConnectorUrl = async (connectorUrl, retryCount = 0)=>{
         };
     }
 };
-const handleOAuthUrl = (oauthUrl)=>{
-    console.log(`handleOAuthUrl - Opening URL - ${oauthUrl.toString()}`);
-    Linking.openURL(oauthUrl.toString());
+/**
+ * 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 = normalizeUrlEncoding(urlString);
+        // Open the normalized URL
+        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');
+                Linking.openURL(fallbackUrl);
+            } catch (fallbackError) {
+                console.error('Fallback OAuth opening failed');
+            }
+        }
+    }
 };
 const QuilttConnector = ({ testId, connectorId, connectionId, institution, oauthRedirectUrl, onEvent, onLoad, onExit, onExitSuccess, onExitAbort, onExitError })=>{
     const webViewRef = useRef(null);
@@ -277,18 +350,30 @@ const QuilttConnector = ({ testId, connectorId, connectionId, institution, oauth
             webViewRef.current?.injectJavaScript(disableHeaderScrollScript);
         }
     }, []);
-    const encodedOAuthRedirectUrl = useMemo(()=>encodeURIComponent(oauthRedirectUrl), [
+    // 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('oauth_redirect_url', encodedOAuthRedirectUrl);
         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,
-        encodedOAuthRedirectUrl
+        safeOAuthRedirectUrl
     ]);
     useEffect(()=>{
         if (preFlightCheck.checked) return;
@@ -342,35 +427,58 @@ const QuilttConnector = ({ testId, connectorId, connectionId, institution, oauth
             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');
                     break;
                 case 'OauthRequested':
-                    handleOAuthUrl(new URL(url.searchParams.get('oauthUrl')));
-                    break;
+                    {
+                        console.log('Event: OauthRequested');
+                        const oauthUrl = url.searchParams.get('oauthUrl');
+                        if (oauthUrl) {
+                            if (isEncoded(oauthUrl)) {
+                                try {
+                                    const decodedUrl = decodeURIComponent(oauthUrl);
+                                    handleOAuthUrl(decodedUrl);
+                                } catch (error) {
+                                    console.error('OAuth URL decoding failed, using original');
+                                    handleOAuthUrl(oauthUrl);
+                                }
+                            } else {
+                                handleOAuthUrl(oauthUrl);
+                            }
+                        } else {
+                            console.error('OAuth URL missing from request');
+                        }
+                        break;
+                    }
                 default:
-                    console.log('unhandled event', url);
+                    console.log(`Unhandled event: ${eventType}`);
                     break;
             }
         });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@quiltt/react-native",
-  "version": "3.9.5",
+  "version": "3.9.7",
   "description": "React Native Components for Quiltt Connector",
   "homepage": "https://github.com/quiltt/quiltt-js/tree/main/packages/react-native#readme",
   "repository": {
@@ -30,14 +30,14 @@
   "dependencies": {
     "@honeybadger-io/core": "6.6.0",
     "lodash.debounce": "4.0.8",
-    "@quiltt/react": "3.9.5",
-    "@quiltt/core": "3.9.5"
+    "@quiltt/core": "3.9.7",
+    "@quiltt/react": "3.9.7"
   },
   "devDependencies": {
     "@biomejs/biome": "1.9.4",
     "@types/base-64": "1.0.2",
     "@types/lodash.debounce": "4.0.9",
-    "@types/node": "22.13.2",
+    "@types/node": "22.13.10",
     "@types/react": "18.3.12",
     "base-64": "1.0.0",
     "bunchee": "6.3.4",

package/src/components/QuilttConnector.tsx

@@ -8,7 +8,13 @@ import type { ShouldStartLoadRequest } from 'react-native-webview/lib/WebViewTyp
 import { ConnectorSDKEventType, useQuilttSession } from '@quiltt/react'
 import type { ConnectorSDKCallbackMetadata, ConnectorSDKCallbacks } from '@quiltt/react'
 
-import { ErrorReporter, getErrorMessage } from '@/utils'
+import {
+  ErrorReporter,
+  getErrorMessage,
+  isEncoded,
+  normalizeUrlEncoding,
+  smartEncodeURIComponent,
+} from '@/utils'
 import { version } from '@/version'
 import { AndroidSafeAreaView } from './AndroidSafeAreaView'
 import { ErrorScreen } from './ErrorScreen'
@@ -32,18 +38,17 @@ export const checkConnectorUrl = async (
     const response = await fetch(connectorUrl)
     if (!response.ok) {
       responseStatus = response.status
-      throw new Error(`The URL ${connectorUrl} is not routable.`)
+      throw new Error('Connector URL is not routable.')
     }
-    console.log(`The URL ${connectorUrl} is routable.`)
     return { checked: true }
   } catch (e) {
     error = e as Error
-    console.error(`An error occurred while checking the connector URL: ${error}`)
+    console.error('Failed to connect to connector URL')
 
     if (retryCount < PREFLIGHT_RETRY_COUNT) {
       const delay = 50 * 2 ** retryCount
       await new Promise((resolve) => setTimeout(resolve, delay))
-      console.log(`Retrying... Attempt number ${retryCount + 1}`)
+      console.log(`Retrying connection... Attempt ${retryCount + 1}`)
       return checkConnectorUrl(connectorUrl, retryCount + 1)
     }
     const errorMessage = getErrorMessage(responseStatus, error as Error)
@@ -54,9 +59,43 @@ export const checkConnectorUrl = async (
   }
 }
 
-export const handleOAuthUrl = (oauthUrl: URL | string) => {
-  console.log(`handleOAuthUrl - Opening URL - ${oauthUrl.toString()}`)
-  Linking.openURL(oauthUrl.toString())
+/**
+ * Handle opening OAuth URLs with proper encoding detection and normalization
+ */
+export const handleOAuthUrl = (oauthUrl: URL | string | null | undefined) => {
+  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 = normalizeUrlEncoding(urlString)
+
+    // Open the normalized URL
+    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')
+        Linking.openURL(fallbackUrl)
+      } catch (fallbackError) {
+        console.error('Fallback OAuth opening failed')
+      }
+    }
+  }
 }
 
 type QuilttConnectorProps = {
@@ -104,18 +143,30 @@ const QuilttConnector = ({
     }
   }, [])
 
-  const encodedOAuthRedirectUrl = useMemo(
-    () => encodeURIComponent(oauthRedirectUrl),
-    [oauthRedirectUrl]
-  )
+  // 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('oauth_redirect_url', encodedOAuthRedirectUrl)
     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, encodedOAuthRedirectUrl])
+  }, [connectorId, safeOAuthRedirectUrl])
 
   useEffect(() => {
     if (preFlightCheck.checked) return
@@ -166,36 +217,59 @@ const QuilttConnector = ({
         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 'OauthRequested':
-            handleOAuthUrl(new URL(url.searchParams.get('oauthUrl') as string))
+          case 'OauthRequested': {
+            console.log('Event: OauthRequested')
+            const oauthUrl = url.searchParams.get('oauthUrl')
+
+            if (oauthUrl) {
+              if (isEncoded(oauthUrl)) {
+                try {
+                  const decodedUrl = decodeURIComponent(oauthUrl)
+                  handleOAuthUrl(decodedUrl)
+                } catch (error) {
+                  console.error('OAuth URL decoding failed, using original')
+                  handleOAuthUrl(oauthUrl)
+                }
+              } else {
+                handleOAuthUrl(oauthUrl)
+              }
+            } else {
+              console.error('OAuth URL missing from request')
+            }
             break
+          }
           default:
-            console.log('unhandled event', url)
+            console.log(`Unhandled event: ${eventType}`)
             break
         }
       })

package/src/utils/index.ts

@@ -1 +1,2 @@
 export * from './error'
+export * from './url'

package/src/utils/url.ts

@@ -0,0 +1,89 @@
+/**
+ * Checks if a string appears to be already URL encoded
+ * @param str The string to check
+ * @returns boolean indicating if the string appears to be URL encoded
+ */
+export const isEncoded = (str: string): boolean => {
+  // Check for typical URL encoding patterns like %20, %3A, etc.
+  const hasEncodedChars = /%[0-9A-F]{2}/i.test(str)
+
+  // Check if double encoding has occurred (e.g., %253A instead of %3A)
+  const hasDoubleEncoding = /%25[0-9A-F]{2}/i.test(str)
+
+  // If we have encoded chars but no double encoding, it's likely properly encoded
+  return hasEncodedChars && !hasDoubleEncoding
+}
+
+/**
+ * Smart URL encoder that ensures a string is encoded exactly once
+ * @param str The string to encode
+ * @returns A properly URL encoded string
+ */
+export const smartEncodeURIComponent = (str: string): string => {
+  if (!str) return str
+
+  // If it's already encoded, return as is
+  if (isEncoded(str)) {
+    console.log('URL already encoded, skipping encoding:', str)
+    return str
+  }
+
+  // Otherwise, encode it
+  const encoded = encodeURIComponent(str)
+  console.log('URL encoded from:', str, 'to:', encoded)
+  return encoded
+}
+
+/**
+ * Creates a URL with proper parameter encoding
+ * @param baseUrl The base URL string
+ * @param params Object containing key-value pairs to be added as search params
+ * @returns A properly formatted URL string
+ */
+export const createUrlWithParams = (baseUrl: string, params: Record<string, string>): string => {
+  try {
+    const url = new URL(baseUrl)
+
+    // Add each parameter without additional encoding
+    // (URLSearchParams.append will encode them automatically)
+    Object.entries(params).forEach(([key, value]) => {
+      // Skip undefined or null values
+      if (value == null) return
+
+      // For oauth_redirect_url specifically, ensure it's not double encoded
+      if (key === 'oauth_redirect_url' && isEncoded(value)) {
+        // Decode once to counteract the automatic encoding that will happen
+        const decodedOnce = decodeURIComponent(value)
+        url.searchParams.append(key, decodedOnce)
+      } else {
+        url.searchParams.append(key, value)
+      }
+    })
+
+    return url.toString()
+  } catch (error) {
+    console.error('Error creating URL with params:', error)
+    return baseUrl
+  }
+}
+
+/**
+ * Checks if a string appears to be double-encoded
+ */
+const isDoubleEncoded = (str: string): boolean => {
+  if (!str) return false
+  return /%25[0-9A-F]{2}/i.test(str)
+}
+
+/**
+ * Normalizes a URL string by decoding it once if it appears to be double-encoded
+ */
+export const normalizeUrlEncoding = (urlStr: string): string => {
+  if (isDoubleEncoded(urlStr)) {
+    console.log('Detected double-encoded URL:', urlStr)
+    const normalized = decodeURIComponent(urlStr)
+    console.log('Normalized to:', normalized)
+    return normalized
+  }
+  return urlStr
+}