@quiltt/react 4.2.3 → 4.3.1

package/CHANGELOG.md

@@ -1,5 +1,25 @@
 # @quiltt/react
 
+## 4.3.1
+
+### Patch Changes
+
+- [#366](https://github.com/quiltt/quiltt-js/pull/366) [`dc376b5`](https://github.com/quiltt/quiltt-js/commit/dc376b52dd824d7867ca74677bbfd5c54eff5cdc) Thanks [@sirwolfgang](https://github.com/sirwolfgang)! - Warn if useQuilttConnector is unmounted while in use
+
+- Updated dependencies [[`dc376b5`](https://github.com/quiltt/quiltt-js/commit/dc376b52dd824d7867ca74677bbfd5c54eff5cdc)]:
+  - @quiltt/core@4.3.1
+
+## 4.3.0
+
+### Minor Changes
+
+- [#363](https://github.com/quiltt/quiltt-js/pull/363) [`641d766`](https://github.com/quiltt/quiltt-js/commit/641d76620ffbb99bc80fdc9998ac936883fe1d06) Thanks [@zubairaziz](https://github.com/zubairaziz)! - Upgrade rails/actioncable to v8
+
+### Patch Changes
+
+- Updated dependencies [[`641d766`](https://github.com/quiltt/quiltt-js/commit/641d76620ffbb99bc80fdc9998ac936883fe1d06)]:
+  - @quiltt/core@4.3.0
+
 ## 4.2.3
 
 ### Patch Changes

package/dist/{QuilttAuthProvider-client-C25Tg4_a.js → QuilttAuthProvider-12s-BZuGySu0.js}

@@ -2,59 +2,59 @@
 import { useCallback, useRef, useMemo, useEffect } from 'react';
 import { JsonWebTokenParse, QuilttClient, InMemoryCache } from '@quiltt/core';
 import '@apollo/client/react/hooks/useApolloClient.js';
-import './QuilttSettings-client-BK-0SQME.js';
-import './useSession-client-CCAvnROP.js';
+import './QuilttSettings-12s-BK-0SQME.js';
+import './useSession-12s-7GOn4sUn.js';
 import 'use-debounce';
 import { jsx } from 'react/jsx-runtime';
 import { ApolloProvider } from '@apollo/client/react/context/ApolloProvider.js';
-import { u as useQuilttSession } from './useQuilttSession-client-DhsbThvI.js';
+import { u as useQuilttSession } from './useQuilttSession-12s-CM6ALGSN.js';
 
-const useIdentifySession = (auth, setSession)=>{
-    const identifySession = useCallback(async (payload, callbacks)=>{
-        const response = await auth.identify(payload);
+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 202:
-                if (callbacks.onChallenged) return callbacks.onChallenged();
+            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.identify: Unexpected response status ${response.status}`);
+                throw new Error(`AuthAPI.authenticate: Unexpected response status ${response.status}`);
         }
     }, [
         auth,
         setSession
     ]);
-    return identifySession;
+    return authenticateSession;
 };
 
-const useAuthenticateSession = (auth, setSession)=>{
-    const authenticateSession = useCallback(async (payload, callbacks)=>{
-        const response = await auth.authenticate(payload);
+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 401:
-                if (callbacks.onFailure) return callbacks.onFailure();
+            case 202:
+                if (callbacks.onChallenged) return callbacks.onChallenged();
                 break;
             case 422:
                 if (callbacks.onError) return callbacks.onError(response.data);
                 break;
             default:
-                throw new Error(`AuthAPI.authenticate: Unexpected response status ${response.status}`);
+                throw new Error(`AuthAPI.identify: Unexpected response status ${response.status}`);
         }
     }, [
         auth,
         setSession
     ]);
-    return authenticateSession;
+    return identifySession;
 };
 
 /**
@@ -149,7 +149,7 @@ const useRevokeSession = (auth, session, setSession)=>{
     const keys2 = Object.keys(obj2);
     if (keys1.length !== keys2.length) return false;
     return keys1.every((key)=>{
-        return Object.prototype.hasOwnProperty.call(obj2, key) && isDeepEqual(obj1[key], obj2[key]);
+        return Object.hasOwn(obj2, key) && isDeepEqual(obj1[key], obj2[key]);
     });
 };
 
@@ -158,13 +158,15 @@ const useRevokeSession = (auth, session, setSession)=>{
  * 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 = ({ token, children })=>{
+ */ const QuilttAuthProvider = ({ graphqlClient, token, children })=>{
     const { session, importSession } = useQuilttSession();
     const previousSessionRef = useRef(session);
-    // @todo: extract into a provider so it can accessed by child components
-    const graphQLClient = useMemo(()=>new QuilttClient({
+    // Memoize the client to avoid unnecessary re-renders
+    const apolloClient = useMemo(()=>graphqlClient || new QuilttClient({
             cache: new InMemoryCache()
-        }), []);
+        }), [
+        graphqlClient
+    ]);
     // Import passed in token
     useEffect(()=>{
         if (token) importSession(token);
@@ -175,15 +177,15 @@ const useRevokeSession = (auth, session, setSession)=>{
     // Reset Client Store when session changes (using deep comparison)
     useEffect(()=>{
         if (!isDeepEqual(session, previousSessionRef.current)) {
-            graphQLClient.resetStore();
+            apolloClient.resetStore();
             previousSessionRef.current = session;
         }
     }, [
         session,
-        graphQLClient
+        apolloClient
     ]);
     return /*#__PURE__*/ jsx(ApolloProvider, {
-        client: graphQLClient,
+        client: apolloClient,
         children: children
     });
 };

package/dist/{QuilttSettingsProvider-client-Va7uJ_dQ.js → QuilttSettingsProvider-12s-ZcmFmOiZ.js}

@@ -1,7 +1,7 @@
 'use client';
 import { jsx } from 'react/jsx-runtime';
 import { useState } from 'react';
-import { Q as QuilttSettings } from './QuilttSettings-client-BK-0SQME.js';
+import { Q as QuilttSettings } from './QuilttSettings-12s-BK-0SQME.js';
 
 const QuilttSettingsProvider = ({ clientId, children })=>{
     const [_clientId] = useState(clientId);

package/dist/index.d.ts

@@ -1,8 +1,58 @@
-import { Maybe, QuilttJWT, UsernamePayload, UnprocessableData, AuthAPI, PasscodePayload, ConnectorSDKConnectorOptions, InstitutionsData, ConnectorSDKCallbacks } from '@quiltt/core';
+import { ConnectorSDKCallbacks, Maybe, QuilttJWT, PasscodePayload, UnprocessableData, AuthAPI, UsernamePayload, ConnectorSDKConnectorOptions, InstitutionsData, QuilttClient } from '@quiltt/core';
 export * from '@quiltt/core';
-import { RefObject, useEffect, Dispatch, SetStateAction, FC, PropsWithChildren, JSX, ComponentType, ElementType, MouseEvent } from 'react';
-import { useApolloClient } from '@apollo/client/react/hooks/useApolloClient.js';
 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;
+
+type BaseQuilttButtonProps<T extends ElementType> = {
+    as?: T;
+    connectorId: string;
+    connectionId?: string;
+    institution?: string;
+    /**
+     * Forces complete remount when connectionId changes.
+     * Useful as a fallback for ensuring clean state.
+     * @default false
+     */
+    forceRemountOnConnectionChange?: boolean;
+    onClick?: (event: MouseEvent<HTMLElement>) => void;
+};
+type QuilttCallbackProps = Omit<ConnectorSDKCallbacks, 'onLoad'> & {
+    onLoad?: ConnectorSDKCallbacks['onLoad'];
+    onHtmlLoad?: React.ReactEventHandler<HTMLElement>;
+};
+type QuilttButtonProps<T extends ElementType> = PropsWithChildren<BaseQuilttButtonProps<T> & QuilttCallbackProps>;
+/**
+ * QuilttButton provides a clickable interface to open Quiltt connectors.
+ *
+ * When connectionId changes, the button will automatically update the existing
+ * connector instance with the new connection details. If you need to force a
+ * complete remount instead, set forceRemountOnConnectionChange to true.
+ */
+declare const QuilttButton: <T extends ElementType = "button">({ as, connectorId, connectionId, institution, forceRemountOnConnectionChange, onEvent, onOpen, onLoad, onExit, onExitSuccess, onExitAbort, onExitError, onClick, onHtmlLoad, children, ...props }: QuilttButtonProps<T> & PropsOf<T>) => react_jsx_runtime.JSX.Element;
+
+type QuilttContainerProps<T extends ElementType> = PropsWithChildren<{
+    as?: T;
+    connectorId: string;
+    connectionId?: string;
+    /**
+     * Forces complete remount when connectionId changes.
+     * Useful as a fallback for ensuring clean state.
+     * @default false
+     */
+    forceRemountOnConnectionChange?: boolean;
+} & ConnectorSDKCallbacks>;
+/**
+ * QuilttContainer uses globally shared callbacks. It's recommended you only use
+ * one Container at a time.
+ *
+ * When connectionId changes, the container will automatically update the existing
+ * connector instance with the new connection details. If you need to force a
+ * complete remount instead, set forceRemountOnConnectionChange to true.
+ */
+declare const QuilttContainer: <T extends ElementType = "div">({ as, connectorId, connectionId, forceRemountOnConnectionChange, onEvent, onLoad, onExit, onExitSuccess, onExitAbort, onExitError, children, ...props }: QuilttContainerProps<T> & PropsOf<T>) => react_jsx_runtime.JSX.Element;
 
 declare function useEventListener<K extends keyof MediaQueryListEventMap>(eventName: K, handler: (event: MediaQueryListEventMap[K]) => void, element: RefObject<MediaQueryList>, options?: boolean | AddEventListenerOptions): void;
 declare function useEventListener<K extends keyof WindowEventMap>(eventName: K, handler: (event: WindowEventMap[K]) => void, element?: undefined, options?: boolean | AddEventListenerOptions): void;
@@ -31,15 +81,6 @@ type SetSession = Dispatch<SetStateAction<Maybe<string> | undefined>>;
  */
 declare const useSession: (storageKey?: string) => [Maybe<QuilttJWT> | undefined, SetSession];
 
-type IdentifySessionCallbacks = {
-    onSuccess?: () => unknown;
-    onChallenged?: () => unknown;
-    onError?: (errors: UnprocessableData) => unknown;
-};
-type IdentifySession = (payload: UsernamePayload, callbacks: IdentifySessionCallbacks) => Promise<unknown>;
-type UseIdentifySession = (auth: AuthAPI, setSession: SetSession) => IdentifySession;
-declare const useIdentifySession: UseIdentifySession;
-
 type AuthenticateSessionCallbacks = {
     onSuccess?: () => unknown;
     onFailure?: () => unknown;
@@ -49,6 +90,15 @@ type AuthenticateSession = (payload: PasscodePayload, callbacks: AuthenticateSes
 type UseAuthenticateSession = (auth: AuthAPI, setSession: SetSession) => AuthenticateSession;
 declare const useAuthenticateSession: UseAuthenticateSession;
 
+type IdentifySessionCallbacks = {
+    onSuccess?: () => unknown;
+    onChallenged?: () => unknown;
+    onError?: (errors: UnprocessableData) => unknown;
+};
+type IdentifySession = (payload: UsernamePayload, callbacks: IdentifySessionCallbacks) => Promise<unknown>;
+type UseIdentifySession = (auth: AuthAPI, setSession: SetSession) => IdentifySession;
+declare const useIdentifySession: UseIdentifySession;
+
 type ImportSession = (token: string) => Promise<boolean>;
 type UseImportSession = (auth: AuthAPI, session: Maybe<QuilttJWT> | undefined, setSession: SetSession, environmentId?: string) => ImportSession;
 /**
@@ -109,7 +159,9 @@ declare const useQuilttSettings: () => {
 declare const useStorage: <T>(key: string, initialState?: Maybe<T>) => [Maybe<T> | undefined, Dispatch<SetStateAction<Maybe<T> | undefined>>];
 
 type QuilttAuthProviderProps = PropsWithChildren & {
-    /** The Session token obtained from the server */
+    /** A custom QuilttClient instance to use instead of the default */
+    graphqlClient?: QuilttClient;
+    /** The Quiltt Session token obtained from the server */
     token?: string;
 };
 /**
@@ -120,69 +172,14 @@ type QuilttAuthProviderProps = PropsWithChildren & {
  */
 declare const QuilttAuthProvider: FC<QuilttAuthProviderProps>;
 
-type QuilttProviderProps = PropsWithChildren & {
-    /** The client ID for the client-side Auth API */
-    clientId?: string;
-    /** The Session token obtained from the server */
-    token?: string;
-};
-declare const QuilttProvider: FC<QuilttProviderProps>;
-
 type QuilttSettingsProviderProps = PropsWithChildren & {
-    /** The Client ID to use for the client-side Auth API */
+    /** The Client ID to use for the passwordless Auth API */
     clientId?: string;
 };
 declare const QuilttSettingsProvider: FC<QuilttSettingsProviderProps>;
 
-type PropsOf<Tag> = Tag extends keyof JSX.IntrinsicElements ? JSX.IntrinsicElements[Tag] : Tag extends ComponentType<infer Props> ? Props & JSX.IntrinsicAttributes : never;
-
-type BaseQuilttButtonProps<T extends ElementType> = {
-    as?: T;
-    connectorId: string;
-    connectionId?: string;
-    institution?: string;
-    /**
-     * Forces complete remount when connectionId changes.
-     * Useful as a fallback for ensuring clean state.
-     * @default false
-     */
-    forceRemountOnConnectionChange?: boolean;
-    onClick?: (event: MouseEvent<HTMLElement>) => void;
-};
-type QuilttCallbackProps = Omit<ConnectorSDKCallbacks, 'onLoad'> & {
-    onLoad?: ConnectorSDKCallbacks['onLoad'];
-    onHtmlLoad?: React.ReactEventHandler<HTMLElement>;
-};
-type QuilttButtonProps<T extends ElementType> = PropsWithChildren<BaseQuilttButtonProps<T> & QuilttCallbackProps>;
-/**
- * QuilttButton provides a clickable interface to open Quiltt connectors.
- *
- * When connectionId changes, the button will automatically update the existing
- * connector instance with the new connection details. If you need to force a
- * complete remount instead, set forceRemountOnConnectionChange to true.
- */
-declare const QuilttButton: <T extends ElementType = "button">({ as, connectorId, connectionId, institution, forceRemountOnConnectionChange, onEvent, onOpen, onLoad, onExit, onExitSuccess, onExitAbort, onExitError, onClick, onHtmlLoad, children, ...props }: QuilttButtonProps<T> & PropsOf<T>) => react_jsx_runtime.JSX.Element;
-
-type QuilttContainerProps<T extends ElementType> = PropsWithChildren<{
-    as?: T;
-    connectorId: string;
-    connectionId?: string;
-    /**
-     * Forces complete remount when connectionId changes.
-     * Useful as a fallback for ensuring clean state.
-     * @default false
-     */
-    forceRemountOnConnectionChange?: boolean;
-} & ConnectorSDKCallbacks>;
-/**
- * QuilttContainer uses globally shared callbacks. It's recommended you only use
- * one Container at a time.
- *
- * When connectionId changes, the container will automatically update the existing
- * connector instance with the new connection details. If you need to force a
- * complete remount instead, set forceRemountOnConnectionChange to true.
- */
-declare const QuilttContainer: <T extends ElementType = "div">({ as, connectorId, connectionId, forceRemountOnConnectionChange, onEvent, onLoad, onExit, onExitSuccess, onExitAbort, onExitError, children, ...props }: QuilttContainerProps<T> & PropsOf<T>) => react_jsx_runtime.JSX.Element;
+type QuilttProviderProps = QuilttSettingsProviderProps & QuilttAuthProviderProps;
+declare const QuilttProvider: FC<QuilttProviderProps>;
 
 export { QuilttAuthProvider, QuilttButton, QuilttContainer, QuilttProvider, QuilttSettingsProvider, useAuthenticateSession, useEventListener, useIdentifySession, useImportSession, useIsomorphicLayoutEffect, useQuilttClient, useQuilttConnector, useQuilttInstitutions, useQuilttSession, useQuilttSettings, useRevokeSession, useSession, useStorage };
-export type { AuthenticateSession, IdentifySession, ImportSession, RevokeSession, SetSession, UseQuilttInstitutions, UseQuilttSession };
+export type { AuthenticateSession, IdentifySession, ImportSession, QuilttAuthProviderProps, QuilttSettingsProviderProps, RevokeSession, SetSession, UseQuilttInstitutions, UseQuilttSession };

package/dist/index.js

@@ -1,28 +1,18 @@
 export * from '@quiltt/core';
-export { u as useEventListener } from './useEventListener-client-DVM5xwKY.js';
-export { u as useIsomorphicLayoutEffect } from './useIsomorphicLayoutEffect-client-DeTHOKz1.js';
-import { Q as QuilttAuthProvider, i as isDeepEqual } from './QuilttAuthProvider-client-C25Tg4_a.js';
-export { b as useAuthenticateSession, a as useIdentifySession, u as useImportSession, c as useRevokeSession } from './QuilttAuthProvider-client-C25Tg4_a.js';
-export { u as useQuilttClient } from './useQuilttClient-client-CAAUait1.js';
-import { u as useQuilttConnector } from './useQuilttConnector-client-aEGkRKpA.js';
-export { u as useQuilttInstitutions } from './useQuilttInstitutions-client-Dtapf_wl.js';
-export { u as useQuilttSession } from './useQuilttSession-client-DhsbThvI.js';
-export { u as useQuilttSettings } from './useQuilttSettings-client-BOCBjFXe.js';
-export { u as useSession } from './useSession-client-CCAvnROP.js';
-export { u as useStorage } from './useStorage-client-DHcq3Kuh.js';
 import { jsx } from 'react/jsx-runtime';
-import { Q as QuilttSettingsProvider } from './QuilttSettingsProvider-client-Va7uJ_dQ.js';
 import { useRef, useEffect } from 'react';
-
-const QuilttProvider = ({ clientId, token, children })=>{
-    return /*#__PURE__*/ jsx(QuilttSettingsProvider, {
-        clientId: clientId,
-        children: /*#__PURE__*/ jsx(QuilttAuthProvider, {
-            token: token,
-            children: children
-        })
-    });
-};
+import { u as useQuilttConnector } from './useQuilttConnector-12s-CL6uHdqe.js';
+import { i as isDeepEqual, Q as QuilttAuthProvider } from './QuilttAuthProvider-12s-BZuGySu0.js';
+export { b as useAuthenticateSession, a as useIdentifySession, u as useImportSession, c as useRevokeSession } from './QuilttAuthProvider-12s-BZuGySu0.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-FLdw-CQZ.js';
+export { u as useQuilttSession } from './useQuilttSession-12s-CM6ALGSN.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';
+import { Q as QuilttSettingsProvider } from './QuilttSettingsProvider-12s-ZcmFmOiZ.js';
 
 /**
  * QuilttButton provides a clickable interface to open Quiltt connectors.
@@ -169,4 +159,15 @@ const QuilttProvider = ({ clientId, token, children })=>{
     }, containerKey);
 };
 
+const QuilttProvider = ({ clientId, graphqlClient, token, children })=>{
+    return /*#__PURE__*/ jsx(QuilttSettingsProvider, {
+        clientId: clientId,
+        children: /*#__PURE__*/ jsx(QuilttAuthProvider, {
+            token: token,
+            graphqlClient: graphqlClient,
+            children: children
+        })
+    });
+};
+
 export { QuilttAuthProvider, QuilttButton, QuilttContainer, QuilttProvider, QuilttSettingsProvider, useQuilttConnector };

package/dist/{useEventListener-client-DVM5xwKY.js → useEventListener-12s-D_-6QIXa.js}

@@ -1,6 +1,6 @@
 'use client';
 import { useRef, useEffect } from 'react';
-import { u as useIsomorphicLayoutEffect } from './useIsomorphicLayoutEffect-client-DeTHOKz1.js';
+import { u as useIsomorphicLayoutEffect } from './useIsomorphicLayoutEffect-12s-DeTHOKz1.js';
 
 /**
  * Supports Window, Element and Document and custom events with almost

package/dist/{useQuilttConnector-client-aEGkRKpA.js → useQuilttConnector-12s-CL6uHdqe.js}

@@ -1,10 +1,10 @@
 'use client';
 import { useState, useRef, useEffect, useCallback } from 'react';
 import { cdnBase } from '@quiltt/core';
-import { u as useQuilttSession } from './useQuilttSession-client-DhsbThvI.js';
-import { u as useScript } from './useScript-client-JCgaTW9n.js';
+import { u as useQuilttSession } from './useQuilttSession-12s-CM6ALGSN.js';
+import { u as useScript } from './useScript-12s-JCgaTW9n.js';
 
-var version = "4.2.3";
+var version = "4.3.1";
 
 const useQuilttConnector = (connectorId, options)=>{
     const status = useScript(`${cdnBase}/v1/connector.js?agent=react-${version}`, {
@@ -19,6 +19,8 @@ const useQuilttConnector = (connectorId, options)=>{
     const prevConnectionIdRef = useRef(options?.connectionId);
     const prevConnectorIdRef = useRef(connectorId);
     const connectorCreatedRef = useRef(false);
+    // Track whether the connector is currently open
+    const isConnectorOpenRef = useRef(false);
     // Set Session
     // biome-ignore lint/correctness/useExhaustiveDependencies: trigger effects when script status changes too
     useEffect(()=>{
@@ -62,67 +64,55 @@ const useQuilttConnector = (connectorId, options)=>{
         options?.institution,
         status
     ]);
-    // onEvent
-    useEffect(()=>{
-        if (!connector || !options?.onEvent) return;
-        connector.onEvent(options.onEvent);
-        return ()=>connector.offEvent(options.onEvent);
-    }, [
-        connector,
-        options?.onEvent
-    ]);
-    // onOpen
-    useEffect(()=>{
-        if (!connector || !options?.onOpen) return;
-        connector.onOpen(options.onOpen);
-        return ()=>connector.offOpen(options.onOpen);
+    // Internal handlers to track connector state
+    const handleOpen = useCallback((metadata)=>{
+        isConnectorOpenRef.current = true;
+        options?.onOpen?.(metadata);
     }, [
-        connector,
         options?.onOpen
     ]);
-    // onLoad
-    useEffect(()=>{
-        if (!connector || !options?.onLoad) return;
-        connector.onLoad(options.onLoad);
-        return ()=>connector.offLoad(options.onLoad);
-    }, [
-        connector,
-        options?.onLoad
-    ]);
-    // onExit
-    useEffect(()=>{
-        if (!connector || !options?.onExit) return;
-        connector.onExit(options.onExit);
-        return ()=>connector.offExit(options.onExit);
+    const handleExit = useCallback((type, metadata)=>{
+        isConnectorOpenRef.current = false;
+        options?.onExit?.(type, metadata);
     }, [
-        connector,
         options?.onExit
     ]);
-    // onExitSuccess
-    useEffect(()=>{
-        if (!connector || !options?.onExitSuccess) return;
-        connector.onExitSuccess(options.onExitSuccess);
-        return ()=>connector.offExitSuccess(options.onExitSuccess);
-    }, [
-        connector,
-        options?.onExitSuccess
-    ]);
-    // onExitAbort
+    // Register event handlers
     useEffect(()=>{
-        if (!connector || !options?.onExitAbort) return;
-        connector.onExitAbort(options.onExitAbort);
-        return ()=>connector.offExitAbort(options.onExitAbort);
-    }, [
-        connector,
-        options?.onExitAbort
-    ]);
-    // onExitError
-    useEffect(()=>{
-        if (!connector || !options?.onExitError) return;
-        connector.onExitError(options.onExitError);
-        return ()=>connector.offExitError(options.onExitError);
+        if (!connector) return;
+        const handlers = {
+            onEvent: options?.onEvent,
+            onOpen: handleOpen,
+            onLoad: options?.onLoad,
+            onExit: handleExit,
+            onExitSuccess: options?.onExitSuccess,
+            onExitAbort: options?.onExitAbort,
+            onExitError: options?.onExitError
+        };
+        if (handlers.onEvent) connector.onEvent(handlers.onEvent);
+        if (handlers.onOpen) connector.onOpen(handlers.onOpen);
+        if (handlers.onLoad) connector.onLoad(handlers.onLoad);
+        if (handlers.onExit) connector.onExit(handlers.onExit);
+        if (handlers.onExitSuccess) connector.onExitSuccess(handlers.onExitSuccess);
+        if (handlers.onExitAbort) connector.onExitAbort(handlers.onExitAbort);
+        if (handlers.onExitError) connector.onExitError(handlers.onExitError);
+        return ()=>{
+            if (handlers.onEvent) connector.offEvent(handlers.onEvent);
+            if (handlers.onOpen) connector.offOpen(handlers.onOpen);
+            if (handlers.onLoad) connector.offLoad(handlers.onLoad);
+            if (handlers.onExit) connector.offExit(handlers.onExit);
+            if (handlers.onExitSuccess) connector.offExitSuccess(handlers.onExitSuccess);
+            if (handlers.onExitAbort) connector.offExitAbort(handlers.onExitAbort);
+            if (handlers.onExitError) connector.offExitError(handlers.onExitError);
+        };
     }, [
         connector,
+        options?.onEvent,
+        handleOpen,
+        options?.onLoad,
+        handleExit,
+        options?.onExitSuccess,
+        options?.onExitAbort,
         options?.onExitError
     ]);
     // This is used to hide any potential race conditions from usage; allowing
@@ -136,6 +126,14 @@ const useQuilttConnector = (connectorId, options)=>{
         connector,
         isOpening
     ]);
+    // Cleanup effect - runs when the hook is torn down
+    useEffect(()=>{
+        return ()=>{
+            if (isConnectorOpenRef.current) {
+                console.error('[Quiltt] useQuilttConnector: Component unmounted while Connector is still open. ' + 'This may lead to memory leaks or unexpected behavior. ' + 'Ensure the Connector is properly closed before component unmount.');
+            }
+        };
+    }, []);
     const open = useCallback(()=>{
         if (connectorId) {
             setIsOpening(true);

package/dist/{useQuilttInstitutions-client-Dtapf_wl.js → useQuilttInstitutions-12s-FLdw-CQZ.js}

@@ -1,9 +1,9 @@
 'use client';
 import { useMemo, useState, useCallback, useEffect } from 'react';
-import { useDebounce } from 'use-debounce';
 import { InstitutionsAPI } from '@quiltt/core';
-import { v as version } from './useQuilttConnector-client-aEGkRKpA.js';
-import { u as useSession } from './useSession-client-CCAvnROP.js';
+import { useDebounce } from 'use-debounce';
+import { v as version } from './useQuilttConnector-12s-CL6uHdqe.js';
+import { u as useSession } from './useSession-12s-7GOn4sUn.js';
 
 const useQuilttInstitutions = (connectorId, onErrorCallback)=>{
     const agent = useMemo(()=>{

package/dist/{useQuilttSession-client-DhsbThvI.js → useQuilttSession-12s-CM6ALGSN.js}

@@ -1,9 +1,9 @@
 'use client';
 import { useCallback } from 'react';
 import { AuthAPI } from '@quiltt/core';
-import { u as useImportSession, a as useIdentifySession, b as useAuthenticateSession, c as useRevokeSession } from './QuilttAuthProvider-client-C25Tg4_a.js';
-import { u as useQuilttSettings } from './useQuilttSettings-client-BOCBjFXe.js';
-import { u as useSession } from './useSession-client-CCAvnROP.js';
+import { u as useImportSession, a as useIdentifySession, b as useAuthenticateSession, c as useRevokeSession } from './QuilttAuthProvider-12s-BZuGySu0.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();

package/dist/{useQuilttSettings-client-BOCBjFXe.js → useQuilttSettings-12s--rCJoNHD.js}

@@ -1,6 +1,6 @@
 'use client';
 import { useContext } from 'react';
-import { Q as QuilttSettings } from './QuilttSettings-client-BK-0SQME.js';
+import { Q as QuilttSettings } from './QuilttSettings-12s-BK-0SQME.js';
 
 const useQuilttSettings = ()=>{
     const settings = useContext(QuilttSettings);

package/dist/{useSession-client-CCAvnROP.js → useSession-12s-7GOn4sUn.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-client-DHcq3Kuh.js';
+import { u as useStorage } from './useStorage-12s-DHcq3Kuh.js';
 
 // Initialize JWT parser with our specific claims type
 const parse = JsonWebTokenParse;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@quiltt/react",
-  "version": "4.2.3",
+  "version": "4.3.1",
   "description": "React Components and Hooks for Quiltt Connector",
   "keywords": [
     "quiltt",
@@ -34,20 +34,20 @@
   ],
   "main": "dist/index.js",
   "dependencies": {
-    "@apollo/client": "^3.12.4",
+    "@apollo/client": "^3.14.0",
     "use-debounce": "^10.0.4",
-    "@quiltt/core": "4.2.3"
+    "@quiltt/core": "4.3.1"
   },
   "devDependencies": {
-    "@biomejs/biome": "1.9.4",
-    "@types/node": "22.18.1",
-    "@types/react": "18.3.20",
-    "@types/react-dom": "18.3.5",
-    "bunchee": "6.3.4",
+    "@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.8.3"
+    "typescript": "5.9.2"
   },
   "peerDependencies": {
     "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",

package/src/components/QuilttButton.tsx

@@ -1,5 +1,5 @@
-import { useEffect, useRef } from 'react'
 import type { ElementType, MouseEvent, PropsWithChildren } from 'react'
+import { useEffect, useRef } from 'react'
 
 import type { ConnectorSDKCallbacks } from '@quiltt/core'
 

package/src/components/QuilttContainer.tsx

@@ -1,5 +1,5 @@
-import { useEffect, useRef } from 'react'
 import type { ElementType, PropsWithChildren } from 'react'
+import { useEffect, useRef } from 'react'
 
 import type { ConnectorSDKCallbacks } from '@quiltt/core'
 

package/src/hooks/helpers/useEventListener.ts

@@ -1,10 +1,13 @@
 'use client'
 
-import { useEffect, useRef } from 'react'
 import type { RefObject } from 'react'
+import { useEffect, useRef } from 'react'
 
 import useIsomorphicLayoutEffect from './useIsomorphicLayoutEffect'
 
+// Helper type for elements that support event listeners
+type EventTarget = HTMLElement | MediaQueryList | Document | Window
+
 // MediaQueryList Event based useEventListener interface
 export function useEventListener<K extends keyof MediaQueryListEventMap>(
   eventName: K,
@@ -48,8 +51,7 @@ export function useEventListener<
   KW extends keyof WindowEventMap,
   KH extends keyof HTMLElementEventMap,
   KM extends keyof MediaQueryListEventMap,
-  // biome-ignore lint/suspicious/noConfusingVoidType: <explanation>
-  T extends HTMLElement | MediaQueryList | void = void,
+  T extends HTMLElement | MediaQueryList | Document = HTMLElement,
 >(
   eventName: KW | KH | KM,
   handler: (
@@ -67,7 +69,7 @@ export function useEventListener<
 
   useEffect(() => {
     // Define the listening target
-    const targetElement: T | Window = element?.current ?? window
+    const targetElement: EventTarget = (element?.current ?? window) as EventTarget
 
     if (!targetElement?.addEventListener) return
 

package/src/hooks/session/index.ts

@@ -1,4 +1,4 @@
-export * from './useIdentifySession'
 export * from './useAuthenticateSession'
+export * from './useIdentifySession'
 export * from './useImportSession'
 export * from './useRevokeSession'

package/src/hooks/session/useImportSession.ts

@@ -1,8 +1,7 @@
 import { useCallback } from 'react'
 
-import type { AuthAPI, Maybe, QuilttJWT } from '@quiltt/core'
+import type { AuthAPI, Maybe, PrivateClaims, QuilttJWT } from '@quiltt/core'
 import { JsonWebTokenParse } from '@quiltt/core'
-import type { PrivateClaims } from '@quiltt/core'
 
 import type { SetSession } from '@/hooks/useSession'
 

package/src/hooks/useQuilttConnector.ts

@@ -2,12 +2,12 @@
 
 import { useCallback, useEffect, useRef, useState } from 'react'
 
-import { cdnBase } from '@quiltt/core'
 import type {
   ConnectorSDK,
   ConnectorSDKConnector,
   ConnectorSDKConnectorOptions,
 } from '@quiltt/core'
+import { cdnBase } from '@quiltt/core'
 
 import { useQuilttSession } from '@/hooks/useQuilttSession'
 import { useScript } from '@/hooks/useScript'
@@ -35,6 +35,9 @@ export const useQuilttConnector = (
   const prevConnectorIdRef = useRef<string | undefined>(connectorId)
   const connectorCreatedRef = useRef<boolean>(false)
 
+  // Track whether the connector is currently open
+  const isConnectorOpenRef = useRef<boolean>(false)
+
   // Set Session
   // biome-ignore lint/correctness/useExhaustiveDependencies: trigger effects when script status changes too
   useEffect(() => {
@@ -73,61 +76,64 @@ export const useQuilttConnector = (
     }
   }, [connectorId, options?.connectionId, options?.institution, status])
 
-  // onEvent
-  useEffect(() => {
-    if (!connector || !options?.onEvent) return
-
-    connector.onEvent(options.onEvent)
-    return () => connector.offEvent(options.onEvent as any)
-  }, [connector, options?.onEvent])
-
-  // onOpen
-  useEffect(() => {
-    if (!connector || !options?.onOpen) return
-
-    connector.onOpen(options.onOpen)
-    return () => connector.offOpen(options.onOpen as any)
-  }, [connector, options?.onOpen])
-
-  // onLoad
+  // Internal handlers to track connector state
+  const handleOpen = useCallback(
+    (metadata: any) => {
+      isConnectorOpenRef.current = true
+      options?.onOpen?.(metadata)
+    },
+    [options?.onOpen]
+  )
+
+  const handleExit = useCallback(
+    (type: any, metadata: any) => {
+      isConnectorOpenRef.current = false
+      options?.onExit?.(type, metadata)
+    },
+    [options?.onExit]
+  )
+
+  // Register event handlers
   useEffect(() => {
-    if (!connector || !options?.onLoad) return
-
-    connector.onLoad(options.onLoad)
-    return () => connector.offLoad(options.onLoad as any)
-  }, [connector, options?.onLoad])
-
-  // onExit
-  useEffect(() => {
-    if (!connector || !options?.onExit) return
-
-    connector.onExit(options.onExit)
-    return () => connector.offExit(options.onExit as any)
-  }, [connector, options?.onExit])
-
-  // onExitSuccess
-  useEffect(() => {
-    if (!connector || !options?.onExitSuccess) return
-
-    connector.onExitSuccess(options.onExitSuccess)
-    return () => connector.offExitSuccess(options.onExitSuccess as any)
-  }, [connector, options?.onExitSuccess])
-
-  // onExitAbort
-  useEffect(() => {
-    if (!connector || !options?.onExitAbort) return
-
-    connector.onExitAbort(options.onExitAbort)
-    return () => connector.offExitAbort(options.onExitAbort as any)
-  }, [connector, options?.onExitAbort])
-
-  // onExitError
-  useEffect(() => {
-    if (!connector || !options?.onExitError) return
+    if (!connector) return
+
+    const handlers = {
+      onEvent: options?.onEvent,
+      onOpen: handleOpen,
+      onLoad: options?.onLoad,
+      onExit: handleExit,
+      onExitSuccess: options?.onExitSuccess,
+      onExitAbort: options?.onExitAbort,
+      onExitError: options?.onExitError,
+    }
 
-    connector.onExitError(options.onExitError)
-    return () => connector.offExitError(options.onExitError as any)
-  }, [connector, options?.onExitError])
+    if (handlers.onEvent) connector.onEvent(handlers.onEvent)
+    if (handlers.onOpen) connector.onOpen(handlers.onOpen)
+    if (handlers.onLoad) connector.onLoad(handlers.onLoad)
+    if (handlers.onExit) connector.onExit(handlers.onExit)
+    if (handlers.onExitSuccess) connector.onExitSuccess(handlers.onExitSuccess)
+    if (handlers.onExitAbort) connector.onExitAbort(handlers.onExitAbort)
+    if (handlers.onExitError) connector.onExitError(handlers.onExitError)
+
+    return () => {
+      if (handlers.onEvent) connector.offEvent(handlers.onEvent)
+      if (handlers.onOpen) connector.offOpen(handlers.onOpen)
+      if (handlers.onLoad) connector.offLoad(handlers.onLoad)
+      if (handlers.onExit) connector.offExit(handlers.onExit)
+      if (handlers.onExitSuccess) connector.offExitSuccess(handlers.onExitSuccess)
+      if (handlers.onExitAbort) connector.offExitAbort(handlers.onExitAbort)
+      if (handlers.onExitError) connector.offExitError(handlers.onExitError)
+    }
+  }, [
+    connector,
+    options?.onEvent,
+    handleOpen,
+    options?.onLoad,
+    handleExit,
+    options?.onExitSuccess,
+    options?.onExitAbort,
+    options?.onExitError,
+  ])
 
   // This is used to hide any potential race conditions from usage; allowing
   // interaction before the script may have loaded.
@@ -138,6 +144,19 @@ export const useQuilttConnector = (
     }
   }, [connector, isOpening])
 
+  // Cleanup effect - runs when the hook is torn down
+  useEffect(() => {
+    return () => {
+      if (isConnectorOpenRef.current) {
+        console.error(
+          '[Quiltt] useQuilttConnector: Component unmounted while Connector is still open. ' +
+            'This may lead to memory leaks or unexpected behavior. ' +
+            'Ensure the Connector is properly closed before component unmount.'
+        )
+      }
+    }
+  }, [])
+
   const open = useCallback(() => {
     if (connectorId) {
       setIsOpening(true)

package/src/hooks/useQuilttInstitutions.ts

@@ -2,10 +2,9 @@
 
 import { useCallback, useEffect, useMemo, useState } from 'react'
 
-import { useDebounce } from 'use-debounce'
-
-import { InstitutionsAPI } from '@quiltt/core'
 import type { ErrorData, InstitutionsData } from '@quiltt/core'
+import { InstitutionsAPI } from '@quiltt/core'
+import { useDebounce } from 'use-debounce'
 
 import { version } from '../version'
 import useSession from './useSession'

package/src/hooks/useQuilttSession.ts

@@ -2,16 +2,16 @@
 
 import { useCallback } from 'react'
 
-import { AuthAPI } from '@quiltt/core'
 import type { Maybe, QuilttJWT } from '@quiltt/core'
+import { AuthAPI } from '@quiltt/core'
 
+import type { AuthenticateSession, IdentifySession, ImportSession, RevokeSession } from './session'
 import {
   useAuthenticateSession,
   useIdentifySession,
   useImportSession,
   useRevokeSession,
 } from './session'
-import type { AuthenticateSession, IdentifySession, ImportSession, RevokeSession } from './session'
 import { useQuilttSettings } from './useQuilttSettings'
 import { useSession } from './useSession'
 

package/src/hooks/useSession.ts

@@ -1,7 +1,7 @@
 'use client'
 
-import { useCallback, useEffect, useMemo } from 'react'
 import type { Dispatch, SetStateAction } from 'react'
+import { useCallback, useEffect, useMemo } from 'react'
 
 import type { Maybe, PrivateClaims, QuilttJWT } from '@quiltt/core'
 import { JsonWebTokenParse, Timeoutable } from '@quiltt/core'

package/src/index.ts

@@ -1,4 +1,5 @@
 export * from '@quiltt/core'
+
+export * from './components'
 export * from './hooks'
 export * from './providers'
-export * from './components'

package/src/providers/QuilttAuthProvider.tsx

@@ -1,7 +1,7 @@
 'use client'
 
-import { useEffect, useMemo, useRef } from 'react'
 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'
@@ -9,8 +9,10 @@ import { InMemoryCache, QuilttClient } from '@quiltt/core'
 import { useQuilttSession } from '@/hooks'
 import { isDeepEqual } from '@/utils'
 
-type QuilttAuthProviderProps = PropsWithChildren & {
-  /** The Session token obtained from the server */
+export type QuilttAuthProviderProps = PropsWithChildren & {
+  /** A custom QuilttClient instance to use instead of the default */
+  graphqlClient?: QuilttClient
+  /** The Quiltt Session token obtained from the server */
   token?: string
 }
 
@@ -20,17 +22,22 @@ type QuilttAuthProviderProps = PropsWithChildren & {
  * into a loading state and the children are not rendered to prevent race conditions
  * from triggering within the transitionary state.
  */
-export const QuilttAuthProvider: FC<QuilttAuthProviderProps> = ({ token, children }) => {
+export const QuilttAuthProvider: FC<QuilttAuthProviderProps> = ({
+  graphqlClient,
+  token,
+  children,
+}) => {
   const { session, importSession } = useQuilttSession()
   const previousSessionRef = useRef(session)
 
-  // @todo: extract into a provider so it can accessed by child components
-  const graphQLClient = useMemo(
+  // Memoize the client to avoid unnecessary re-renders
+  const apolloClient = useMemo(
     () =>
+      graphqlClient ||
       new QuilttClient({
         cache: new InMemoryCache(),
       }),
-    []
+    [graphqlClient]
   )
 
   // Import passed in token
@@ -41,12 +48,12 @@ export const QuilttAuthProvider: FC<QuilttAuthProviderProps> = ({ token, childre
   // Reset Client Store when session changes (using deep comparison)
   useEffect(() => {
     if (!isDeepEqual(session, previousSessionRef.current)) {
-      graphQLClient.resetStore()
+      apolloClient.resetStore()
       previousSessionRef.current = session
     }
-  }, [session, graphQLClient])
+  }, [session, apolloClient])
 
-  return <ApolloProvider client={graphQLClient}>{children}</ApolloProvider>
+  return <ApolloProvider client={apolloClient}>{children}</ApolloProvider>
 }
 
 export default QuilttAuthProvider

package/src/providers/QuilttProvider.tsx

@@ -1,19 +1,23 @@
-import type { FC, PropsWithChildren } from 'react'
+import type { FC } from 'react'
 
+import type { QuilttAuthProviderProps } from './QuilttAuthProvider'
 import { QuilttAuthProvider } from './QuilttAuthProvider'
+import type { QuilttSettingsProviderProps } from './QuilttSettingsProvider'
 import { QuilttSettingsProvider } from './QuilttSettingsProvider'
 
-type QuilttProviderProps = PropsWithChildren & {
-  /** The client ID for the client-side Auth API */
-  clientId?: string
-  /** The Session token obtained from the server */
-  token?: string
-}
+type QuilttProviderProps = QuilttSettingsProviderProps & QuilttAuthProviderProps
 
-export const QuilttProvider: FC<QuilttProviderProps> = ({ clientId, token, children }) => {
+export const QuilttProvider: FC<QuilttProviderProps> = ({
+  clientId,
+  graphqlClient,
+  token,
+  children,
+}) => {
   return (
     <QuilttSettingsProvider clientId={clientId}>
-      <QuilttAuthProvider token={token}>{children}</QuilttAuthProvider>
+      <QuilttAuthProvider token={token} graphqlClient={graphqlClient}>
+        {children}
+      </QuilttAuthProvider>
     </QuilttSettingsProvider>
   )
 }

package/src/providers/QuilttSettingsProvider.tsx

@@ -5,8 +5,8 @@ import { useState } from 'react'
 
 import { QuilttSettings } from '@/contexts/QuilttSettings'
 
-type QuilttSettingsProviderProps = PropsWithChildren & {
-  /** The Client ID to use for the client-side Auth API */
+export type QuilttSettingsProviderProps = PropsWithChildren & {
+  /** The Client ID to use for the passwordless Auth API */
   clientId?: string
 }
 

package/src/utils/isDeepEqual.ts

@@ -52,9 +52,6 @@ export const isDeepEqual = (obj1: unknown, obj2: unknown): boolean => {
   if (keys1.length !== keys2.length) return false
 
   return keys1.every((key) => {
-    return (
-      Object.prototype.hasOwnProperty.call(obj2, key) &&
-      isDeepEqual((obj1 as any)[key], (obj2 as any)[key])
-    )
+    return Object.hasOwn(obj2, key) && isDeepEqual((obj1 as any)[key], (obj2 as any)[key])
   })
 }