@quiltt/react-native 3.9.4 → 3.9.6

package/CHANGELOG.md

@@ -1,5 +1,25 @@
 # @quiltt/react-native
 
+## 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
+
+- [#325](https://github.com/quiltt/quiltt-js/pull/325) [`62b7323`](https://github.com/quiltt/quiltt-js/commit/62b732371a8d57242170e0ae838baa4ca8e78059) Thanks [@zubairaziz](https://github.com/zubairaziz)! - Improve useSession and useStorage hooks
+
+- Updated dependencies [[`62b7323`](https://github.com/quiltt/quiltt-js/commit/62b732371a8d57242170e0ae838baa4ca8e78059)]:
+  - @quiltt/react@3.9.5
+  - @quiltt/core@3.9.5
+
 ## 3.9.4
 
 ### 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.4";
+var version = "3.9.6";
 
 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 isAlreadyEncoded = (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 (isAlreadyEncoded(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,
@@ -249,9 +295,39 @@ 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('handleOAuthUrl - Received null or undefined URL');
+        }
+        // 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('handleOAuthUrl - Received empty URL string');
+        }
+        // Normalize the URL encoding
+        const normalizedUrl = normalizeUrlEncoding(urlString);
+        // Log the URL we're about to open
+        console.log(`handleOAuthUrl - Opening URL - ${normalizedUrl}`);
+        // Open the normalized URL
+        Linking.openURL(normalizedUrl);
+    } catch (error) {
+        console.error('Error handling OAuth URL:', error);
+        // Only try the fallback if oauthUrl is not null
+        if (oauthUrl != null) {
+            try {
+                const fallbackUrl = typeof oauthUrl === 'string' ? oauthUrl : oauthUrl.toString();
+                console.log(`handleOAuthUrl - Fallback opening URL - ${fallbackUrl}`);
+                Linking.openURL(fallbackUrl);
+            } catch (fallbackError) {
+                console.error('Failed even with fallback approach:', fallbackError);
+            }
+        }
+    }
 };
 const QuilttConnector = ({ testId, connectorId, connectionId, institution, oauthRedirectUrl, onEvent, onLoad, onExit, onExitSuccess, onExitAbort, onExitError })=>{
     const webViewRef = useRef(null);
@@ -277,18 +353,35 @@ 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(()=>{
+        console.log('Original oauthRedirectUrl:', oauthRedirectUrl);
+        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}`);
-        return url.toString();
+        // 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 (isAlreadyEncoded(safeOAuthRedirectUrl)) {
+            const decodedOnce = decodeURIComponent(safeOAuthRedirectUrl);
+            url.searchParams.append('oauth_redirect_url', decodedOnce);
+            console.log('Using decoded oauth_redirect_url:', decodedOnce);
+        } else {
+            url.searchParams.append('oauth_redirect_url', safeOAuthRedirectUrl);
+            console.log('Using original oauth_redirect_url:', safeOAuthRedirectUrl);
+        }
+        const finalUrl = url.toString();
+        console.log('Final connectorUrl:', finalUrl);
+        return finalUrl;
     }, [
         connectorId,
-        encodedOAuthRedirectUrl
+        safeOAuthRedirectUrl
     ]);
     useEffect(()=>{
         if (preFlightCheck.checked) return;
@@ -367,8 +460,23 @@ const QuilttConnector = ({ testId, connectorId, connectionId, institution, oauth
                 case 'Authenticate':
                     break;
                 case 'OauthRequested':
-                    handleOAuthUrl(new URL(url.searchParams.get('oauthUrl')));
-                    break;
+                    {
+                        // Log available search parameters
+                        console.log('Available search params:', Array.from(url.searchParams.keys()));
+                        // Now we should be getting the oauthUrl parameter directly
+                        const oauthUrl = url.searchParams.get('oauthUrl');
+                        console.log('Received oauthUrl:', oauthUrl);
+                        // Check if oauthUrl exists before proceeding
+                        if (oauthUrl) {
+                            // Create a new URL from the normalized oauthUrl
+                            handleOAuthUrl(oauthUrl);
+                        } else {
+                            // Log an error if oauthUrl is missing
+                            console.error('OauthRequested event missing oauthUrl parameter');
+                            console.log('All available params:', Object.fromEntries(url.searchParams.entries()));
+                        }
+                        break;
+                    }
                 default:
                     console.log('unhandled event', url);
                     break;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@quiltt/react-native",
-  "version": "3.9.4",
+  "version": "3.9.6",
   "description": "React Native Components for Quiltt Connector",
   "homepage": "https://github.com/quiltt/quiltt-js/tree/main/packages/react-native#readme",
   "repository": {
@@ -30,19 +30,19 @@
   "dependencies": {
     "@honeybadger-io/core": "6.6.0",
     "lodash.debounce": "4.0.8",
-    "@quiltt/core": "3.9.4",
-    "@quiltt/react": "3.9.4"
+    "@quiltt/react": "3.9.6",
+    "@quiltt/core": "3.9.6"
   },
   "devDependencies": {
     "@biomejs/biome": "1.9.4",
     "@types/base-64": "1.0.2",
     "@types/lodash.debounce": "4.0.9",
-    "@types/node": "22.10.5",
+    "@types/node": "22.13.10",
     "@types/react": "18.3.12",
     "base-64": "1.0.0",
-    "bunchee": "6.2.0",
+    "bunchee": "6.3.4",
     "react": "18.3.1",
-    "react-native": "0.76.5",
+    "react-native": "0.76.7",
     "react-native-url-polyfill": "2.0.0",
     "react-native-webview": "13.12.5",
     "rimraf": "6.0.1",

package/src/components/QuilttConnector.tsx

@@ -8,8 +8,14 @@ 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 { version } from '../version'
+import {
+  ErrorReporter,
+  getErrorMessage,
+  isAlreadyEncoded,
+  normalizeUrlEncoding,
+  smartEncodeURIComponent,
+} from '@/utils'
+import { version } from '@/version'
 import { AndroidSafeAreaView } from './AndroidSafeAreaView'
 import { ErrorScreen } from './ErrorScreen'
 import { LoadingScreen } from './LoadingScreen'
@@ -54,9 +60,46 @@ 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('handleOAuthUrl - Received null or undefined URL')
+    }
+
+    // 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('handleOAuthUrl - Received empty URL string')
+    }
+
+    // Normalize the URL encoding
+    const normalizedUrl = normalizeUrlEncoding(urlString)
+
+    // Log the URL we're about to open
+    console.log(`handleOAuthUrl - Opening URL - ${normalizedUrl}`)
+
+    // Open the normalized URL
+    Linking.openURL(normalizedUrl)
+  } catch (error) {
+    console.error('Error handling OAuth URL:', error)
+
+    // Only try the fallback if oauthUrl is not null
+    if (oauthUrl != null) {
+      try {
+        const fallbackUrl = typeof oauthUrl === 'string' ? oauthUrl : oauthUrl.toString()
+        console.log(`handleOAuthUrl - Fallback opening URL - ${fallbackUrl}`)
+        Linking.openURL(fallbackUrl)
+      } catch (fallbackError) {
+        console.error('Failed even with fallback approach:', fallbackError)
+      }
+    }
+  }
 }
 
 type QuilttConnectorProps = {
@@ -104,18 +147,35 @@ const QuilttConnector = ({
     }
   }, [])
 
-  const encodedOAuthRedirectUrl = useMemo(
-    () => encodeURIComponent(oauthRedirectUrl),
-    [oauthRedirectUrl]
-  )
+  // Ensure oauthRedirectUrl is encoded properly - only once
+  const safeOAuthRedirectUrl = useMemo(() => {
+    console.log('Original oauthRedirectUrl:', oauthRedirectUrl)
+    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}`)
-    return url.toString()
-  }, [connectorId, encodedOAuthRedirectUrl])
+
+    // 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 (isAlreadyEncoded(safeOAuthRedirectUrl)) {
+      const decodedOnce = decodeURIComponent(safeOAuthRedirectUrl)
+      url.searchParams.append('oauth_redirect_url', decodedOnce)
+      console.log('Using decoded oauth_redirect_url:', decodedOnce)
+    } else {
+      url.searchParams.append('oauth_redirect_url', safeOAuthRedirectUrl)
+      console.log('Using original oauth_redirect_url:', safeOAuthRedirectUrl)
+    }
+
+    const finalUrl = url.toString()
+    console.log('Final connectorUrl:', finalUrl)
+    return finalUrl
+  }, [connectorId, safeOAuthRedirectUrl])
 
   useEffect(() => {
     if (preFlightCheck.checked) return
@@ -191,9 +251,25 @@ const QuilttConnector = ({
           case 'Authenticate':
             // TODO: handle Authenticate
             break
-          case 'OauthRequested':
-            handleOAuthUrl(new URL(url.searchParams.get('oauthUrl') as string))
+          case 'OauthRequested': {
+            // Log available search parameters
+            console.log('Available search params:', Array.from(url.searchParams.keys()))
+
+            // Now we should be getting the oauthUrl parameter directly
+            const oauthUrl = url.searchParams.get('oauthUrl')
+            console.log('Received oauthUrl:', oauthUrl)
+
+            // Check if oauthUrl exists before proceeding
+            if (oauthUrl) {
+              // Create a new URL from the normalized oauthUrl
+              handleOAuthUrl(oauthUrl)
+            } else {
+              // Log an error if oauthUrl is missing
+              console.error('OauthRequested event missing oauthUrl parameter')
+              console.log('All available params:', Object.fromEntries(url.searchParams.entries()))
+            }
             break
+          }
           default:
             console.log('unhandled event', url)
             break

package/src/utils/error/ErrorReporter.ts

@@ -2,7 +2,7 @@
 import type { Notice, NoticeTransportPayload } from '@honeybadger-io/core/build/src/types'
 import { generateStackTrace, getCauses, makeBacktrace } from '@honeybadger-io/core/build/src/util'
 
-import { version } from '../../version'
+import { version } from '@/version'
 import { ErrorReporterConfig } from './ErrorReporterConfig'
 
 const notifier = {

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 isAlreadyEncoded = (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 (isAlreadyEncoded(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' && isAlreadyEncoded(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
+}