@quiltt/react 4.5.0 → 5.0.0

package/CHANGELOG.md

@@ -1,5 +1,29 @@
 # @quiltt/react
 
+## 5.0.0
+
+### Major Changes
+
+- [#394](https://github.com/quiltt/quiltt-js/pull/394) [`2ba646a`](https://github.com/quiltt/quiltt-js/commit/2ba646a2efcb7bef7949dab74778ab1c3babdb84) Thanks [@zubairaziz](https://github.com/zubairaziz)! - Migrate Apollo Client to v4
+
+### Minor Changes
+
+- [#395](https://github.com/quiltt/quiltt-js/pull/395) [`f635500`](https://github.com/quiltt/quiltt-js/commit/f635500f17ab8a76aa0fb87ed7f4971e63a93f12) Thanks [@zubairaziz](https://github.com/zubairaziz)! - Enhanced SDK telemetry with standardized User-Agent headers
+
+### Patch Changes
+
+- Updated dependencies [[`f635500`](https://github.com/quiltt/quiltt-js/commit/f635500f17ab8a76aa0fb87ed7f4971e63a93f12), [`2ba646a`](https://github.com/quiltt/quiltt-js/commit/2ba646a2efcb7bef7949dab74778ab1c3babdb84)]:
+  - @quiltt/core@5.0.0
+
+## 4.5.1
+
+### Patch Changes
+
+- [#389](https://github.com/quiltt/quiltt-js/pull/389) [`a6a2a7e`](https://github.com/quiltt/quiltt-js/commit/a6a2a7ea94c7204a69b53f191ee738bcdc520a10) Thanks [@zubairaziz](https://github.com/zubairaziz)! - Upgrade React versions across all projects
+
+- Updated dependencies [[`a6a2a7e`](https://github.com/quiltt/quiltt-js/commit/a6a2a7ea94c7204a69b53f191ee738bcdc520a10)]:
+  - @quiltt/core@4.5.1
+
 ## 4.5.0
 
 ### Minor Changes

package/README.md

@@ -7,24 +7,26 @@
 
 See the guides [here](https://www.quiltt.dev/connector/sdks/react).
 
+For general project information and contributing guidelines, see the [main repository README](../../README.md).
+
 ## Installation
 
 With `npm`:
 
 ```shell
-$ npm install @quiltt/react
+npm install @quiltt/react
 ```
 
 With `yarn`:
 
 ```shell
-$ yarn add @quiltt/react
+yarn add @quiltt/react
 ```
 
 With `pnpm`:
 
 ```shell
-$ pnpm add @quiltt/react
+pnpm add @quiltt/react
 ```
 
 ## Core Modules and Types
@@ -61,7 +63,7 @@ export const App = () => {
       connectorId="<CONNECTOR_ID>"
       onExitSuccess={handleExitSuccess}
       className="my-css-class"
-      styles={{ borderWidth: '2px' }}
+      style={{ borderWidth: '2px' }}
       // ... other props to pass through to the button
     >
       Add Account
@@ -95,7 +97,7 @@ export const App = () => {
       connectorId="<CONNECTOR_ID>"
       onExitSuccess={handleExitSuccess}
       className="my-css-class"
-      styles={{ height: '100%' }}
+      style={{ height: '100%' }}
       // ... other props to pass through to the container
     />
   )
@@ -137,7 +139,7 @@ import { useQuilttConnector } from '@quiltt/react'
 
 const App = () => {
   const { open } = useQuilttConnector('<CONNECTOR_ID>', {
-    onEvent: (type) => console.log(`Received Quiltt Event: ${type}`)
+    onEvent: (type) => console.log(`Received Quiltt Event: ${type}`),
     onExitSuccess: (metadata) => console.log("Connector onExitSuccess", metadata.connectionId),
   })
 
@@ -204,4 +206,9 @@ This project is licensed under the terms of the MIT license. See the [LICENSE](L
 
 ## Contributing
 
-For information on how to contribute to this project, please refer to the [CONTRIBUTING.md](CONTRIBUTING.md) file.
+For information on how to contribute to this project, please refer to the [repository contributing guidelines](../../CONTRIBUTING.md).
+
+## Related Packages
+
+- [`@quiltt/core`](../core#readme) - Essential functionality and types
+- [`@quiltt/react-native`](../react-native#readme) - React Native and Expo components

package/dist/QuilttAuthProvider-12s-C_Wt9rkK.js

@@ -0,0 +1,58 @@
+'use client';
+import { useRef, useMemo, useEffect } from 'react';
+import { QuilttClient, InMemoryCache, createVersionLink } from '@quiltt/core';
+import { ApolloProvider } from '@apollo/client/react';
+import './QuilttSettings-12s-BK-0SQME.js';
+import './useSession-12s-BlrWOArd.js';
+import 'use-debounce';
+import './QuilttProviderRender-12s-DtQtubjL.js';
+import { jsx } from 'react/jsx-runtime';
+import { u as useQuilttSession } from './useQuilttSession-12s-_8sB_8aP.js';
+import { a as getPlatformInfo, i as isDeepEqual } from './useQuilttConnector-12s-DfCZ1lpS.js';
+
+/**
+ * If a token is provided, will validate the token against the api and then import
+ * it into trusted storage. While this process is happening, the component is put
+ * into a loading state and the children are not rendered to prevent race conditions
+ * from triggering within the transitionary state.
+ */ const QuilttAuthProvider = ({ graphqlClient, token, children })=>{
+    const { session, importSession } = useQuilttSession();
+    const previousSessionRef = useRef(session);
+    const previousTokenRef = useRef(undefined);
+    // Memoize the client to avoid unnecessary re-renders
+    const apolloClient = useMemo(()=>graphqlClient || new QuilttClient({
+            cache: new InMemoryCache(),
+            versionLink: createVersionLink(getPlatformInfo())
+        }), [
+        graphqlClient
+    ]);
+    // Import passed in token (only if value has changed)
+    useEffect(()=>{
+        if (token && token !== previousTokenRef.current) {
+            importSession(token);
+            previousTokenRef.current = token;
+        } else if (!token) {
+            // Reset ref when token becomes undefined to allow re-import of same token later
+            previousTokenRef.current = undefined;
+        }
+    }, [
+        token,
+        importSession
+    ]);
+    // Reset Client Store when session changes (using deep comparison)
+    useEffect(()=>{
+        if (!isDeepEqual(session, previousSessionRef.current)) {
+            apolloClient.resetStore();
+            previousSessionRef.current = session;
+        }
+    }, [
+        session,
+        apolloClient
+    ]);
+    return /*#__PURE__*/ jsx(ApolloProvider, {
+        client: apolloClient,
+        children: children
+    });
+};
+
+export { QuilttAuthProvider as Q };

package/dist/index.d.ts

@@ -1,8 +1,12 @@
+export { ApolloClient, ApolloQueryResult, DocumentNode, ErrorPolicy, FetchPolicy, InMemoryCache, NetworkStatus, NormalizedCacheObject, ObservableQuery, OperationVariables, TypedDocumentNode, WatchQueryFetchPolicy, gql } from '@apollo/client';
+export { CombinedGraphQLErrors, CombinedProtocolErrors, LinkError, LocalStateError, ServerError, ServerParseError, UnconventionalError } from '@apollo/client/errors';
+import { useApolloClient } from '@apollo/client/react';
+export { ApolloProvider, MutationHookOptions, MutationResult, QueryHookOptions, QueryResult, SubscriptionHookOptions, SubscriptionResult, createQueryPreloader, skipToken, useApolloClient, useBackgroundQuery, useFragment, useLazyQuery, useLoadableQuery, useMutation, useQuery, useQueryRefHandlers, useReactiveVar, useReadQuery, useSubscription, useSuspenseQuery } from '@apollo/client/react';
+export { MockedProvider } from '@apollo/client/testing/react';
 import { ConnectorSDKCallbacks, Maybe, QuilttJWT, PasscodePayload, UnprocessableData, AuthAPI, UsernamePayload, ConnectorSDKConnectorOptions, InstitutionsData, QuilttClient } from '@quiltt/core';
 export * from '@quiltt/core';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { JSX, ComponentType, ElementType, PropsWithChildren, MouseEvent, RefObject, useEffect, Dispatch, SetStateAction, FC } from 'react';
-import { useApolloClient } from '@apollo/client/react/hooks/useApolloClient.js';
 
 type PropsOf<Tag> = Tag extends keyof JSX.IntrinsicElements ? JSX.IntrinsicElements[Tag] : Tag extends ComponentType<infer Props> ? Props & JSX.IntrinsicAttributes : never;
 

package/dist/index.js

@@ -1,19 +1,22 @@
+export { ApolloClient, InMemoryCache, NetworkStatus, ObservableQuery, gql } from '@apollo/client';
+export { CombinedGraphQLErrors, CombinedProtocolErrors, LinkError, LocalStateError, ServerError, ServerParseError, UnconventionalError } from '@apollo/client/errors';
+export { ApolloProvider, createQueryPreloader, skipToken, useApolloClient, useBackgroundQuery, useFragment, useLazyQuery, useLoadableQuery, useMutation, useQuery, useQueryRefHandlers, useReactiveVar, useReadQuery, useSubscription, useSuspenseQuery } from '@apollo/client/react';
+export { MockedProvider } from '@apollo/client/testing/react';
 export * from '@quiltt/core';
 import { jsx } from 'react/jsx-runtime';
 import { useRef, useEffect } from 'react';
-import { u as useQuilttConnector } from './useQuilttConnector-12s-7jon0A8C.js';
-import { u as useQuilttRenderGuard } from './useQuilttRenderGuard-12s-BbUitnF1.js';
-import { i as isDeepEqual, Q as QuilttAuthProvider } from './QuilttAuthProvider-12s-BCpwSX-3.js';
-export { b as useAuthenticateSession, a as useIdentifySession, u as useImportSession, c as useRevokeSession } from './QuilttAuthProvider-12s-BCpwSX-3.js';
+import { i as isDeepEqual, u as useQuilttConnector } from './useQuilttConnector-12s-DfCZ1lpS.js';
+import { u as useQuilttRenderGuard } from './useQuilttRenderGuard-12s-CsS2Ma6Q.js';
 export { u as useEventListener } from './useEventListener-12s-D_-6QIXa.js';
 export { u as useIsomorphicLayoutEffect } from './useIsomorphicLayoutEffect-12s-DeTHOKz1.js';
-export { u as useQuilttClient } from './useQuilttClient-12s-CAAUait1.js';
-export { u as useQuilttInstitutions } from './useQuilttInstitutions-12s-Ca5smTKo.js';
-export { u as useQuilttResolvable } from './useQuilttResolvable-12s-CNvWZe0V.js';
-export { u as useQuilttSession } from './useQuilttSession-12s-D10t5Wfh.js';
+export { a as useAuthenticateSession, b as useIdentifySession, c as useImportSession, u as useQuilttSession, d as useRevokeSession } from './useQuilttSession-12s-_8sB_8aP.js';
+export { u as useQuilttClient } from './useQuilttClient-12s-Dj_MtYTU.js';
+export { u as useQuilttInstitutions } from './useQuilttInstitutions-12s-ClSQJPmP.js';
+export { u as useQuilttResolvable } from './useQuilttResolvable-12s-Dm4vsARj.js';
 export { u as useQuilttSettings } from './useQuilttSettings-12s--rCJoNHD.js';
-export { u as useSession } from './useSession-12s-7GOn4sUn.js';
-export { u as useStorage } from './useStorage-12s-DHcq3Kuh.js';
+export { u as useSession } from './useSession-12s-BlrWOArd.js';
+export { u as useStorage } from './useStorage-12s-CpG6X57D.js';
+import { Q as QuilttAuthProvider } from './QuilttAuthProvider-12s-C_Wt9rkK.js';
 import { Q as QuilttProviderRender } from './QuilttProviderRender-12s-DtQtubjL.js';
 import { Q as QuilttSettingsProvider } from './QuilttSettingsProvider-12s-ZcmFmOiZ.js';
 

package/dist/{useQuilttClient-12s-CAAUait1.js → useQuilttClient-12s-Dj_MtYTU.js}

@@ -1,5 +1,5 @@
 'use client';
-import { useApolloClient } from '@apollo/client/react/hooks/useApolloClient.js';
+import { useApolloClient } from '@apollo/client/react';
 
 const useQuilttClient = useApolloClient;
 

package/dist/{useQuilttConnector-12s-7jon0A8C.js → useQuilttConnector-12s-DfCZ1lpS.js}

@@ -1,14 +1,86 @@
 'use client';
-import { useState, useRef, useEffect, useCallback } from 'react';
-import { cdnBase } from '@quiltt/core';
-import { u as useQuilttSession } from './useQuilttSession-12s-D10t5Wfh.js';
+import React, { useState, useRef, useEffect, useCallback } from 'react';
+import { getBrowserInfo, getUserAgent as getUserAgent$1, cdnBase } from '@quiltt/core';
+import { u as useQuilttSession } from './useQuilttSession-12s-_8sB_8aP.js';
 import { u as useScript } from './useScript-12s-JCgaTW9n.js';
-import { i as isDeepEqual } from './QuilttAuthProvider-12s-BCpwSX-3.js';
 
-var version = "4.5.0";
+/**
+ * Performs a deep equality comparison between two values
+ *
+ * This function recursively compares all properties to determine if they are equal.
+ *
+ * @example
+ * ```ts
+ * isDeepEqual({ a: 1, b: { c: 2 } }, { a: 1, b: { c: 2 } }) // true
+ * isDeepEqual({ a: 1, b: { c: 2 } }, { a: 1, b: { c: 3 } }) // false
+ * ```
+ */ const isDeepEqual = (obj1, obj2)=>{
+    // Handle primitive types and null/undefined
+    if (obj1 === obj2) return true;
+    if (obj1 === null || obj2 === null || typeof obj1 !== 'object' || typeof obj2 !== 'object') return false;
+    // Handle special object types
+    if (obj1 instanceof Date && obj2 instanceof Date) {
+        return obj1.getTime() === obj2.getTime();
+    }
+    if (obj1 instanceof RegExp && obj2 instanceof RegExp) {
+        return obj1.toString() === obj2.toString();
+    }
+    if (obj1 instanceof Map && obj2 instanceof Map) {
+        if (obj1.size !== obj2.size) return false;
+        for (const [key, value] of obj1){
+            if (!obj2.has(key) || !isDeepEqual(value, obj2.get(key))) return false;
+        }
+        return true;
+    }
+    if (obj1 instanceof Set && obj2 instanceof Set) {
+        if (obj1.size !== obj2.size) return false;
+        const arr2 = Array.from(obj2);
+        for (const item of obj1){
+            if (!arr2.some((value)=>isDeepEqual(item, value))) return false;
+        }
+        return true;
+    }
+    // Handle arrays
+    if (Array.isArray(obj1) && Array.isArray(obj2)) {
+        if (obj1.length !== obj2.length) return false;
+        return obj1.every((value, index)=>isDeepEqual(value, obj2[index]));
+    }
+    // If one is array and other isn't, they're not equal
+    if (Array.isArray(obj1) || Array.isArray(obj2)) return false;
+    const keys1 = Object.keys(obj1);
+    const keys2 = Object.keys(obj2);
+    if (keys1.length !== keys2.length) return false;
+    return keys1.every((key)=>{
+        return Object.hasOwn(obj2, key) && isDeepEqual(obj1[key], obj2[key]);
+    });
+};
+
+/**
+ * Gets the React version from the runtime
+ */ const getReactVersion = ()=>{
+    return React.version || 'unknown';
+};
+/**
+ * Generates platform information string for React web
+ * Format: React/<version>; <browser>/<version>
+ */ const getPlatformInfo = ()=>{
+    const reactVersion = getReactVersion();
+    const browserInfo = getBrowserInfo();
+    return `React/${reactVersion}; ${browserInfo}`;
+};
+/**
+ * Generates User-Agent string for React SDK
+ * Format: Quiltt/<sdk-version> (React/<react-version>; <browser>/<version>)
+ */ const getUserAgent = (sdkVersion)=>{
+    const platformInfo = getPlatformInfo();
+    return getUserAgent$1(sdkVersion, platformInfo);
+};
+
+var version = "5.0.0";
 
 const useQuilttConnector = (connectorId, options)=>{
-    const status = useScript(`${cdnBase}/v1/connector.js?agent=react-${version}`, {
+    const userAgent = getUserAgent(version);
+    const status = useScript(`${cdnBase}/v1/connector.js?agent=${encodeURIComponent(userAgent)}`, {
         nonce: options?.nonce
     });
     // This ensures we're not destructuring `session` before the script has loaded
@@ -170,4 +242,4 @@ const useQuilttConnector = (connectorId, options)=>{
     };
 };
 
-export { useQuilttConnector as u, version as v };
+export { getPlatformInfo as a, getUserAgent as g, isDeepEqual as i, useQuilttConnector as u, version as v };

package/dist/{useQuilttInstitutions-12s-Ca5smTKo.js → useQuilttInstitutions-12s-ClSQJPmP.js}

@@ -2,25 +2,14 @@
 import { useMemo, useState, useRef, useEffect, useCallback } from 'react';
 import { ConnectorsAPI } from '@quiltt/core';
 import { useDebounce } from 'use-debounce';
-import { v as version } from './useQuilttConnector-12s-7jon0A8C.js';
-import { u as useSession } from './useSession-12s-7GOn4sUn.js';
+import { g as getUserAgent, v as version } from './useQuilttConnector-12s-DfCZ1lpS.js';
+import { u as useSession } from './useSession-12s-BlrWOArd.js';
 
 const useQuilttInstitutions = (connectorId, onErrorCallback)=>{
-    const agent = useMemo(()=>{
-        // Try deprecated navigator.product first (still used in some RN versions)
-        if (typeof navigator !== 'undefined' && navigator.product === 'ReactNative') {
-            return `react-native-${version}`;
-        }
-        // Detect React Native by its unique environment characteristics
-        const isReactNative = !!// Has window (unlike Node.js)
-        (typeof window !== 'undefined' && // No document in window (unlike browsers)
-        typeof window.document === 'undefined' && // Has navigator (unlike Node.js)
-        typeof navigator !== 'undefined');
-        return isReactNative ? `react-native-${version}` : `react-${version}`;
-    }, []);
-    const connectorsAPI = useMemo(()=>new ConnectorsAPI(connectorId, agent), [
+    const userAgent = useMemo(()=>getUserAgent(version), []);
+    const connectorsAPI = useMemo(()=>new ConnectorsAPI(connectorId, userAgent), [
         connectorId,
-        agent
+        userAgent
     ]);
     const [session] = useSession();
     const [searchTermInput, setSearchTermInput] = useState('');

package/dist/{useQuilttRenderGuard-12s-BbUitnF1.js → useQuilttRenderGuard-12s-CsS2Ma6Q.js}

@@ -21,8 +21,7 @@ import { Q as QuilttProviderRender } from './QuilttProviderRender-12s-DtQtubjL.j
     const hasWarnedRef = useRef(false);
     useEffect(()=>{
         // Only run in development mode and warn once per component instance
-        // Support both Node.js (process.env) and Vite (import.meta.env) environments
-        const isProduction = process.env.NODE_ENV === 'production' || typeof import.meta !== 'undefined' && import.meta.env?.PROD;
+        const isProduction = process.env.NODE_ENV === 'production';
         if (isProduction) return;
         if (isRenderingProvider && !hasWarnedRef.current) {
             hasWarnedRef.current = true;

package/dist/{useQuilttResolvable-12s-CNvWZe0V.js → useQuilttResolvable-12s-Dm4vsARj.js}

@@ -1,25 +1,14 @@
 'use client';
 import { useMemo, useState, useRef, useEffect, useCallback } from 'react';
 import { ConnectorsAPI } from '@quiltt/core';
-import { v as version } from './useQuilttConnector-12s-7jon0A8C.js';
-import { u as useSession } from './useSession-12s-7GOn4sUn.js';
+import { g as getUserAgent, v as version } from './useQuilttConnector-12s-DfCZ1lpS.js';
+import { u as useSession } from './useSession-12s-BlrWOArd.js';
 
 const useQuilttResolvable = (connectorId, onErrorCallback)=>{
-    const agent = useMemo(()=>{
-        // Try deprecated navigator.product first (still used in some RN versions)
-        if (typeof navigator !== 'undefined' && navigator.product === 'ReactNative') {
-            return `react-native-${version}`;
-        }
-        // Detect React Native by its unique environment characteristics
-        const isReactNative = !!// Has window (unlike Node.js)
-        (typeof window !== 'undefined' && // No document in window (unlike browsers)
-        typeof window.document === 'undefined' && // Has navigator (unlike Node.js)
-        typeof navigator !== 'undefined');
-        return isReactNative ? `react-native-${version}` : `react-${version}`;
-    }, []);
-    const connectorsAPI = useMemo(()=>new ConnectorsAPI(connectorId, agent), [
+    const userAgent = useMemo(()=>getUserAgent(version), []);
+    const connectorsAPI = useMemo(()=>new ConnectorsAPI(connectorId, userAgent), [
         connectorId,
-        agent
+        userAgent
     ]);
     const [session] = useSession();
     const [isLoading, setIsLoading] = useState(false);

package/dist/useQuilttSession-12s-_8sB_8aP.js

@@ -0,0 +1,135 @@
+'use client';
+import { useCallback, useMemo } from 'react';
+import { JsonWebTokenParse, AuthAPI } from '@quiltt/core';
+import { u as useQuilttSettings } from './useQuilttSettings-12s--rCJoNHD.js';
+import { u as useSession } from './useSession-12s-BlrWOArd.js';
+
+const useAuthenticateSession = (auth, setSession)=>{
+    const authenticateSession = useCallback(async (payload, callbacks)=>{
+        const response = await auth.authenticate(payload);
+        switch(response.status){
+            case 201:
+                setSession(response.data.token);
+                if (callbacks.onSuccess) return callbacks.onSuccess();
+                break;
+            case 401:
+                if (callbacks.onFailure) return callbacks.onFailure();
+                break;
+            case 422:
+                if (callbacks.onError) return callbacks.onError(response.data);
+                break;
+            default:
+                throw new Error(`AuthAPI.authenticate: Unexpected response status ${response.status}`);
+        }
+    }, [
+        auth,
+        setSession
+    ]);
+    return authenticateSession;
+};
+
+const useIdentifySession = (auth, setSession)=>{
+    const identifySession = useCallback(async (payload, callbacks)=>{
+        const response = await auth.identify(payload);
+        switch(response.status){
+            case 201:
+                setSession(response.data.token);
+                if (callbacks.onSuccess) return callbacks.onSuccess();
+                break;
+            case 202:
+                if (callbacks.onChallenged) return callbacks.onChallenged();
+                break;
+            case 403:
+                if (callbacks.onForbidden) return callbacks.onForbidden();
+                break;
+            case 422:
+                if (callbacks.onError) return callbacks.onError(response.data);
+                break;
+            default:
+                throw new Error(`AuthAPI.identify: Unexpected response status ${response.status}`);
+        }
+    }, [
+        auth,
+        setSession
+    ]);
+    return identifySession;
+};
+
+/**
+ * Optionally Accepts environmentId to validate session is from with your desired environment
+ */ const useImportSession = (auth, session, setSession, environmentId)=>{
+    const importSession = useCallback(async (token)=>{
+        // Is there a token?
+        if (!token) return !!session;
+        // Is this token already imported?
+        if (session && session.token === token) return true;
+        const jwt = JsonWebTokenParse(token);
+        // Is this token a valid JWT?
+        if (!jwt) return false;
+        // Is this token within the expected environment?
+        if (environmentId && jwt.claims.eid !== environmentId) return false;
+        // Is this token active?
+        const response = await auth.ping(token);
+        switch(response.status){
+            case 200:
+                setSession(token);
+                return true;
+            case 401:
+                return false;
+            default:
+                throw new Error(`AuthAPI.ping: Unexpected response status ${response.status}`);
+        }
+    }, [
+        auth,
+        session,
+        setSession,
+        environmentId
+    ]);
+    return importSession;
+};
+
+const useRevokeSession = (auth, session, setSession)=>{
+    const revokeSession = useCallback(async ()=>{
+        if (!session) return;
+        await auth.revoke(session.token);
+        setSession(null);
+    }, [
+        auth,
+        session,
+        setSession
+    ]);
+    return revokeSession;
+};
+
+const useQuilttSession = (environmentId)=>{
+    const { clientId } = useQuilttSettings();
+    const [session, setSession] = useSession();
+    const auth = useMemo(()=>new AuthAPI(clientId), [
+        clientId
+    ]);
+    const importSession = useImportSession(auth, session, setSession, environmentId);
+    const identifySession = useIdentifySession(auth, setSession);
+    const authenticateSession = useAuthenticateSession(auth, setSession);
+    const revokeSession = useRevokeSession(auth, session, setSession);
+    /**
+   * Forget current session.
+   * @param token specific token to forget, to help guard against async processes clearing the wrong session
+   */ const forgetSession = useCallback(async (token)=>{
+        if (!token || session && token && token === session.token) {
+            setSession(null);
+        }
+    }, [
+        session,
+        setSession
+    ]);
+    return {
+        session,
+        importSession,
+        identifySession,
+        authenticateSession,
+        revokeSession,
+        forgetSession
+    };
+};
+
+export { useAuthenticateSession as a, useIdentifySession as b, useImportSession as c, useRevokeSession as d, useQuilttSession as u };

package/dist/{useSession-12s-7GOn4sUn.js → useSession-12s-BlrWOArd.js}

@@ -1,7 +1,7 @@
 'use client';
 import { useMemo, useEffect, useCallback } from 'react';
 import { Timeoutable, JsonWebTokenParse } from '@quiltt/core';
-import { u as useStorage } from './useStorage-12s-DHcq3Kuh.js';
+import { u as useStorage } from './useStorage-12s-CpG6X57D.js';
 
 // Initialize JWT parser with our specific claims type
 const parse = JsonWebTokenParse;

package/dist/{useStorage-12s-DHcq3Kuh.js → useStorage-12s-CpG6X57D.js}

@@ -43,24 +43,14 @@ import { GlobalStorage } from '@quiltt/core';
         hookState
     ]);
     useEffect(()=>{
-        // Subscribe to storage changes and ensure state is synchronized
-        // Reruns when key or state changes to maintain consistency
-        GlobalStorage.subscribe(key, (newValue)=>{
-            // Only update if the value is different from current state
-            if (newValue !== hookState) {
-                setHookState(newValue);
-            }
-        });
-        // Initial sync
-        const initialValue = getStorage();
-        if (initialValue !== hookState) {
-            setHookState(initialValue);
-        }
-        return ()=>GlobalStorage.unsubscribe(key, setHookState);
+        // Subscribe to storage changes from other sources (e.g., other hook instances, browser tabs)
+        const handleStorageChange = (newValue)=>{
+            setHookState(newValue);
+        };
+        GlobalStorage.subscribe(key, handleStorageChange);
+        return ()=>GlobalStorage.unsubscribe(key, handleStorageChange);
     }, [
-        key,
-        hookState,
-        getStorage
+        key
     ]);
     return [
         hookState,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@quiltt/react",
-  "version": "4.5.0",
+  "version": "5.0.0",
   "description": "React Components and Hooks for Quiltt Connector",
   "keywords": [
     "quiltt",
@@ -34,20 +34,20 @@
   ],
   "main": "dist/index.js",
   "dependencies": {
-    "@apollo/client": "^3.14.0",
-    "use-debounce": "^10.0.4",
-    "@quiltt/core": "4.5.0"
+    "@apollo/client": "^4.1.3",
+    "use-debounce": "^10.1.0",
+    "@quiltt/core": "5.0.0"
   },
   "devDependencies": {
-    "@biomejs/biome": "2.2.4",
-    "@types/node": "22.18.6",
-    "@types/react": "18.3.23",
-    "@types/react-dom": "18.3.7",
-    "bunchee": "6.6.0",
-    "react": "18.3.1",
-    "react-dom": "18.3.1",
-    "rimraf": "6.0.1",
-    "typescript": "5.9.2"
+    "@biomejs/biome": "2.3.13",
+    "@types/node": "24.10.9",
+    "@types/react": "19.2.10",
+    "@types/react-dom": "19.2.3",
+    "bunchee": "6.9.4",
+    "react": "19.2.4",
+    "react-dom": "19.2.4",
+    "rimraf": "6.1.2",
+    "typescript": "5.9.3"
   },
   "peerDependencies": {
     "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",

package/src/hooks/useQuilttClient.ts

@@ -1,6 +1,6 @@
 'use client'
 
-import { useApolloClient } from '@apollo/client/react/hooks/useApolloClient.js'
+import { useApolloClient } from '@apollo/client/react'
 
 export const useQuilttClient = useApolloClient
 

package/src/hooks/useQuilttConnector.ts

@@ -11,7 +11,7 @@ import { cdnBase } from '@quiltt/core'
 
 import { useQuilttSession } from '@/hooks/useQuilttSession'
 import { useScript } from '@/hooks/useScript'
-import { isDeepEqual } from '@/utils/isDeepEqual'
+import { getUserAgent, isDeepEqual } from '@/utils'
 import { version } from '@/version'
 
 declare const Quiltt: ConnectorSDK
@@ -20,7 +20,8 @@ export const useQuilttConnector = (
   connectorId?: string,
   options?: ConnectorSDKConnectorOptions
 ) => {
-  const status = useScript(`${cdnBase}/v1/connector.js?agent=react-${version}`, {
+  const userAgent = getUserAgent(version)
+  const status = useScript(`${cdnBase}/v1/connector.js?agent=${encodeURIComponent(userAgent)}`, {
     nonce: options?.nonce,
   })
 

package/src/hooks/useQuilttInstitutions.ts

@@ -6,7 +6,9 @@ import type { ErrorData, InstitutionsData } from '@quiltt/core'
 import { ConnectorsAPI } from '@quiltt/core'
 import { useDebounce } from 'use-debounce'
 
-import { version } from '../version'
+import { getUserAgent } from '@/utils'
+import { version } from '@/version'
+
 import useSession from './useSession'
 
 export type UseQuilttInstitutions = (
@@ -20,28 +22,11 @@ export type UseQuilttInstitutions = (
 }
 
 export const useQuilttInstitutions: UseQuilttInstitutions = (connectorId, onErrorCallback) => {
-  const agent = useMemo(() => {
-    // Try deprecated navigator.product first (still used in some RN versions)
-    if (typeof navigator !== 'undefined' && navigator.product === 'ReactNative') {
-      return `react-native-${version}`
-    }
-
-    // Detect React Native by its unique environment characteristics
-    const isReactNative = !!(
-      // Has window (unlike Node.js)
-      (
-        typeof window !== 'undefined' &&
-        // No document in window (unlike browsers)
-        typeof window.document === 'undefined' &&
-        // Has navigator (unlike Node.js)
-        typeof navigator !== 'undefined'
-      )
-    )
-
-    return isReactNative ? `react-native-${version}` : `react-${version}`
-  }, [])
-
-  const connectorsAPI = useMemo(() => new ConnectorsAPI(connectorId, agent), [connectorId, agent])
+  const userAgent = useMemo(() => getUserAgent(version), [])
+  const connectorsAPI = useMemo(
+    () => new ConnectorsAPI(connectorId, userAgent),
+    [connectorId, userAgent]
+  )
   const [session] = useSession()
 
   const [searchTermInput, setSearchTermInput] = useState('')

package/src/hooks/useQuilttRenderGuard.ts

@@ -25,10 +25,7 @@ export const useQuilttRenderGuard = (componentName: string) => {
 
   useEffect(() => {
     // Only run in development mode and warn once per component instance
-    // Support both Node.js (process.env) and Vite (import.meta.env) environments
-    const isProduction =
-      process.env.NODE_ENV === 'production' ||
-      (typeof import.meta !== 'undefined' && (import.meta as any).env?.PROD)
+    const isProduction = process.env.NODE_ENV === 'production'
 
     if (isProduction) return
 

package/src/hooks/useQuilttResolvable.ts

@@ -5,7 +5,9 @@ import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import type { ErrorData, ResolvableData } from '@quiltt/core'
 import { ConnectorsAPI } from '@quiltt/core'
 
-import { version } from '../version'
+import { getUserAgent } from '@/utils'
+import { version } from '@/version'
+
 import useSession from './useSession'
 
 export type UseQuilttResolvable = (
@@ -25,28 +27,11 @@ export type UseQuilttResolvable = (
 }
 
 export const useQuilttResolvable: UseQuilttResolvable = (connectorId, onErrorCallback) => {
-  const agent = useMemo(() => {
-    // Try deprecated navigator.product first (still used in some RN versions)
-    if (typeof navigator !== 'undefined' && navigator.product === 'ReactNative') {
-      return `react-native-${version}`
-    }
-
-    // Detect React Native by its unique environment characteristics
-    const isReactNative = !!(
-      // Has window (unlike Node.js)
-      (
-        typeof window !== 'undefined' &&
-        // No document in window (unlike browsers)
-        typeof window.document === 'undefined' &&
-        // Has navigator (unlike Node.js)
-        typeof navigator !== 'undefined'
-      )
-    )
-
-    return isReactNative ? `react-native-${version}` : `react-${version}`
-  }, [])
-
-  const connectorsAPI = useMemo(() => new ConnectorsAPI(connectorId, agent), [connectorId, agent])
+  const userAgent = useMemo(() => getUserAgent(version), [])
+  const connectorsAPI = useMemo(
+    () => new ConnectorsAPI(connectorId, userAgent),
+    [connectorId, userAgent]
+  )
   const [session] = useSession()
 
   const [isLoading, setIsLoading] = useState(false)

package/src/hooks/useStorage.ts

@@ -52,23 +52,15 @@ export const useStorage = <T>(
   )
 
   useEffect(() => {
-    // Subscribe to storage changes and ensure state is synchronized
-    // Reruns when key or state changes to maintain consistency
-    GlobalStorage.subscribe(key, (newValue) => {
-      // Only update if the value is different from current state
-      if (newValue !== hookState) {
-        setHookState(newValue)
-      }
-    })
-
-    // Initial sync
-    const initialValue = getStorage()
-    if (initialValue !== hookState) {
-      setHookState(initialValue)
+    // Subscribe to storage changes from other sources (e.g., other hook instances, browser tabs)
+    const handleStorageChange = (newValue: Maybe<T> | undefined) => {
+      setHookState(newValue)
     }
 
-    return () => GlobalStorage.unsubscribe(key, setHookState)
-  }, [key, hookState, getStorage])
+    GlobalStorage.subscribe(key, handleStorageChange)
+
+    return () => GlobalStorage.unsubscribe(key, handleStorageChange)
+  }, [key])
 
   return [hookState, setStorage]
 }

package/src/index.ts

@@ -1,3 +1,64 @@
+// ============================================================================
+// Core Module - Apollo Client core functionality
+// ============================================================================
+export type {
+  ApolloQueryResult,
+  DocumentNode,
+  ErrorPolicy,
+  FetchPolicy,
+  NormalizedCacheObject,
+  OperationVariables,
+  TypedDocumentNode,
+  WatchQueryFetchPolicy,
+} from '@apollo/client'
+export {
+  ApolloClient,
+  gql,
+  InMemoryCache,
+  NetworkStatus,
+  ObservableQuery,
+} from '@apollo/client'
+// ============================================================================
+// Errors Module - Error handling utilities
+// ============================================================================
+export {
+  CombinedGraphQLErrors,
+  CombinedProtocolErrors,
+  LinkError,
+  LocalStateError,
+  ServerError,
+  ServerParseError,
+  UnconventionalError,
+} from '@apollo/client/errors'
+// ============================================================================
+// React Module - React hooks and components
+// ============================================================================
+export type {
+  MutationHookOptions,
+  MutationResult,
+  QueryHookOptions,
+  QueryResult,
+  SubscriptionHookOptions,
+  SubscriptionResult,
+} from '@apollo/client/react'
+export {
+  ApolloProvider,
+  createQueryPreloader,
+  skipToken,
+  useApolloClient,
+  useBackgroundQuery,
+  useFragment,
+  useLazyQuery,
+  useLoadableQuery,
+  useMutation,
+  useQuery,
+  useQueryRefHandlers,
+  useReactiveVar,
+  useReadQuery,
+  useSubscription,
+  useSuspenseQuery,
+} from '@apollo/client/react'
+export { MockedProvider } from '@apollo/client/testing/react'
 export * from '@quiltt/core'
 
 export * from './components'

package/src/providers/QuilttAuthProvider.tsx

@@ -3,11 +3,11 @@
 import type { FC, PropsWithChildren } from 'react'
 import { useEffect, useMemo, useRef } from 'react'
 
-import { ApolloProvider } from '@apollo/client/react/context/ApolloProvider.js'
-import { InMemoryCache, QuilttClient } from '@quiltt/core'
+import { ApolloProvider } from '@apollo/client/react'
+import { createVersionLink, InMemoryCache, QuilttClient } from '@quiltt/core'
 
 import { useQuilttSession } from '@/hooks'
-import { isDeepEqual } from '@/utils'
+import { getPlatformInfo, isDeepEqual } from '@/utils'
 
 export type QuilttAuthProviderProps = PropsWithChildren & {
   /** A custom QuilttClient instance to use instead of the default */
@@ -29,7 +29,7 @@ export const QuilttAuthProvider: FC<QuilttAuthProviderProps> = ({
 }) => {
   const { session, importSession } = useQuilttSession()
   const previousSessionRef = useRef(session)
-  const previousTokenRef = useRef<string | undefined>()
+  const previousTokenRef = useRef<string | undefined>(undefined)
 
   // Memoize the client to avoid unnecessary re-renders
   const apolloClient = useMemo(
@@ -37,6 +37,7 @@ export const QuilttAuthProvider: FC<QuilttAuthProviderProps> = ({
       graphqlClient ||
       new QuilttClient({
         cache: new InMemoryCache(),
+        versionLink: createVersionLink(getPlatformInfo()),
       }),
     [graphqlClient]
   )

package/src/utils/index.ts

@@ -1 +1,2 @@
 export * from './isDeepEqual'
+export * from './telemetry'

package/src/utils/telemetry.ts

@@ -0,0 +1,33 @@
+import React from 'react'
+
+import { getUserAgent as coreGetUserAgent, getBrowserInfo } from '@quiltt/core'
+
+// Re-export getBrowserInfo
+export { getBrowserInfo }
+
+/**
+ * Gets the React version from the runtime
+ */
+export const getReactVersion = (): string => {
+  return React.version || 'unknown'
+}
+
+/**
+ * Generates platform information string for React web
+ * Format: React/<version>; <browser>/<version>
+ */
+export const getPlatformInfo = (): string => {
+  const reactVersion = getReactVersion()
+  const browserInfo = getBrowserInfo()
+
+  return `React/${reactVersion}; ${browserInfo}`
+}
+
+/**
+ * Generates User-Agent string for React SDK
+ * Format: Quiltt/<sdk-version> (React/<react-version>; <browser>/<version>)
+ */
+export const getUserAgent = (sdkVersion: string): string => {
+  const platformInfo = getPlatformInfo()
+  return coreGetUserAgent(sdkVersion, platformInfo)
+}

package/dist/QuilttAuthProvider-12s-BCpwSX-3.js

@@ -1,205 +0,0 @@
-'use client';
-import { useCallback, useRef, useMemo, useEffect } from 'react';
-import { JsonWebTokenParse, QuilttClient, InMemoryCache } from '@quiltt/core';
-import '@apollo/client/react/hooks/useApolloClient.js';
-import './QuilttSettings-12s-BK-0SQME.js';
-import './useSession-12s-7GOn4sUn.js';
-import 'use-debounce';
-import './QuilttProviderRender-12s-DtQtubjL.js';
-import { jsx } from 'react/jsx-runtime';
-import { ApolloProvider } from '@apollo/client/react/context/ApolloProvider.js';
-import { u as useQuilttSession } from './useQuilttSession-12s-D10t5Wfh.js';
-
-const useAuthenticateSession = (auth, setSession)=>{
-    const authenticateSession = useCallback(async (payload, callbacks)=>{
-        const response = await auth.authenticate(payload);
-        switch(response.status){
-            case 201:
-                setSession(response.data.token);
-                if (callbacks.onSuccess) return callbacks.onSuccess();
-                break;
-            case 401:
-                if (callbacks.onFailure) return callbacks.onFailure();
-                break;
-            case 422:
-                if (callbacks.onError) return callbacks.onError(response.data);
-                break;
-            default:
-                throw new Error(`AuthAPI.authenticate: Unexpected response status ${response.status}`);
-        }
-    }, [
-        auth,
-        setSession
-    ]);
-    return authenticateSession;
-};
-
-const useIdentifySession = (auth, setSession)=>{
-    const identifySession = useCallback(async (payload, callbacks)=>{
-        const response = await auth.identify(payload);
-        switch(response.status){
-            case 201:
-                setSession(response.data.token);
-                if (callbacks.onSuccess) return callbacks.onSuccess();
-                break;
-            case 202:
-                if (callbacks.onChallenged) return callbacks.onChallenged();
-                break;
-            case 403:
-                if (callbacks.onForbidden) return callbacks.onForbidden();
-                break;
-            case 422:
-                if (callbacks.onError) return callbacks.onError(response.data);
-                break;
-            default:
-                throw new Error(`AuthAPI.identify: Unexpected response status ${response.status}`);
-        }
-    }, [
-        auth,
-        setSession
-    ]);
-    return identifySession;
-};
-
-/**
- * Optionally Accepts environmentId to validate session is from with your desired environment
- */ const useImportSession = (auth, session, setSession, environmentId)=>{
-    const importSession = useCallback(async (token)=>{
-        // Is there a token?
-        if (!token) return !!session;
-        // Is this token already imported?
-        if (session && session.token === token) return true;
-        const jwt = JsonWebTokenParse(token);
-        // Is this token a valid JWT?
-        if (!jwt) return false;
-        // Is this token within the expected environment?
-        if (environmentId && jwt.claims.eid !== environmentId) return false;
-        // Is this token active?
-        const response = await auth.ping(token);
-        switch(response.status){
-            case 200:
-                setSession(token);
-                return true;
-            case 401:
-                return false;
-            default:
-                throw new Error(`AuthAPI.ping: Unexpected response status ${response.status}`);
-        }
-    }, [
-        auth,
-        session,
-        setSession,
-        environmentId
-    ]);
-    return importSession;
-};
-
-const useRevokeSession = (auth, session, setSession)=>{
-    const revokeSession = useCallback(async ()=>{
-        if (!session) return;
-        await auth.revoke(session.token);
-        setSession(null);
-    }, [
-        auth,
-        session,
-        setSession
-    ]);
-    return revokeSession;
-};
-
-/**
- * Performs a deep equality comparison between two values
- *
- * This function recursively compares all properties to determine if they are equal.
- *
- * @example
- * ```ts
- * isDeepEqual({ a: 1, b: { c: 2 } }, { a: 1, b: { c: 2 } }) // true
- * isDeepEqual({ a: 1, b: { c: 2 } }, { a: 1, b: { c: 3 } }) // false
- * ```
- */ const isDeepEqual = (obj1, obj2)=>{
-    // Handle primitive types and null/undefined
-    if (obj1 === obj2) return true;
-    if (obj1 === null || obj2 === null || typeof obj1 !== 'object' || typeof obj2 !== 'object') return false;
-    // Handle special object types
-    if (obj1 instanceof Date && obj2 instanceof Date) {
-        return obj1.getTime() === obj2.getTime();
-    }
-    if (obj1 instanceof RegExp && obj2 instanceof RegExp) {
-        return obj1.toString() === obj2.toString();
-    }
-    if (obj1 instanceof Map && obj2 instanceof Map) {
-        if (obj1.size !== obj2.size) return false;
-        for (const [key, value] of obj1){
-            if (!obj2.has(key) || !isDeepEqual(value, obj2.get(key))) return false;
-        }
-        return true;
-    }
-    if (obj1 instanceof Set && obj2 instanceof Set) {
-        if (obj1.size !== obj2.size) return false;
-        const arr2 = Array.from(obj2);
-        for (const item of obj1){
-            if (!arr2.some((value)=>isDeepEqual(item, value))) return false;
-        }
-        return true;
-    }
-    // Handle arrays
-    if (Array.isArray(obj1) && Array.isArray(obj2)) {
-        if (obj1.length !== obj2.length) return false;
-        return obj1.every((value, index)=>isDeepEqual(value, obj2[index]));
-    }
-    // If one is array and other isn't, they're not equal
-    if (Array.isArray(obj1) || Array.isArray(obj2)) return false;
-    const keys1 = Object.keys(obj1);
-    const keys2 = Object.keys(obj2);
-    if (keys1.length !== keys2.length) return false;
-    return keys1.every((key)=>{
-        return Object.hasOwn(obj2, key) && isDeepEqual(obj1[key], obj2[key]);
-    });
-};
-
-/**
- * If a token is provided, will validate the token against the api and then import
- * it into trusted storage. While this process is happening, the component is put
- * into a loading state and the children are not rendered to prevent race conditions
- * from triggering within the transitionary state.
- */ const QuilttAuthProvider = ({ graphqlClient, token, children })=>{
-    const { session, importSession } = useQuilttSession();
-    const previousSessionRef = useRef(session);
-    const previousTokenRef = useRef();
-    // Memoize the client to avoid unnecessary re-renders
-    const apolloClient = useMemo(()=>graphqlClient || new QuilttClient({
-            cache: new InMemoryCache()
-        }), [
-        graphqlClient
-    ]);
-    // Import passed in token (only if value has changed)
-    useEffect(()=>{
-        if (token && token !== previousTokenRef.current) {
-            importSession(token);
-            previousTokenRef.current = token;
-        } else if (!token) {
-            // Reset ref when token becomes undefined to allow re-import of same token later
-            previousTokenRef.current = undefined;
-        }
-    }, [
-        token,
-        importSession
-    ]);
-    // Reset Client Store when session changes (using deep comparison)
-    useEffect(()=>{
-        if (!isDeepEqual(session, previousSessionRef.current)) {
-            apolloClient.resetStore();
-            previousSessionRef.current = session;
-        }
-    }, [
-        session,
-        apolloClient
-    ]);
-    return /*#__PURE__*/ jsx(ApolloProvider, {
-        client: apolloClient,
-        children: children
-    });
-};
-
-export { QuilttAuthProvider as Q, useIdentifySession as a, useAuthenticateSession as b, useRevokeSession as c, isDeepEqual as i, useImportSession as u };

package/dist/useQuilttSession-12s-D10t5Wfh.js

@@ -1,39 +0,0 @@
-'use client';
-import { useMemo, useCallback } from 'react';
-import { AuthAPI } from '@quiltt/core';
-import { u as useImportSession, a as useIdentifySession, b as useAuthenticateSession, c as useRevokeSession } from './QuilttAuthProvider-12s-BCpwSX-3.js';
-import { u as useQuilttSettings } from './useQuilttSettings-12s--rCJoNHD.js';
-import { u as useSession } from './useSession-12s-7GOn4sUn.js';
-
-const useQuilttSession = (environmentId)=>{
-    const { clientId } = useQuilttSettings();
-    const [session, setSession] = useSession();
-    const auth = useMemo(()=>new AuthAPI(clientId), [
-        clientId
-    ]);
-    const importSession = useImportSession(auth, session, setSession, environmentId);
-    const identifySession = useIdentifySession(auth, setSession);
-    const authenticateSession = useAuthenticateSession(auth, setSession);
-    const revokeSession = useRevokeSession(auth, session, setSession);
-    /**
-   * Forget current session.
-   * @param token specific token to forget, to help guard against async processes clearing the wrong session
-   */ const forgetSession = useCallback(async (token)=>{
-        if (!token || session && token && token === session.token) {
-            setSession(null);
-        }
-    }, [
-        session,
-        setSession
-    ]);
-    return {
-        session,
-        importSession,
-        identifySession,
-        authenticateSession,
-        revokeSession,
-        forgetSession
-    };
-};
-
-export { useQuilttSession as u };