@quiltt/react 4.3.0 → 4.3.1

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # @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

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

@@ -7,7 +7,7 @@ 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-12s-QlPCR8A-.js';
+import { u as useQuilttSession } from './useQuilttSession-12s-CM6ALGSN.js';
 
 const useAuthenticateSession = (auth, setSession)=>{
     const authenticateSession = useCallback(async (payload, callbacks)=>{
@@ -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/index.d.ts

@@ -1,4 +1,4 @@
-import { ConnectorSDKCallbacks, Maybe, QuilttJWT, PasscodePayload, UnprocessableData, AuthAPI, UsernamePayload, ConnectorSDKConnectorOptions, InstitutionsData } from '@quiltt/core';
+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';
@@ -159,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;
 };
 /**
@@ -170,19 +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 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,14 +1,14 @@
 export * from '@quiltt/core';
 import { jsx } from 'react/jsx-runtime';
 import { useRef, useEffect } from 'react';
-import { u as useQuilttConnector } from './useQuilttConnector-12s-BaTUXD56.js';
-import { i as isDeepEqual, Q as QuilttAuthProvider } from './QuilttAuthProvider-12s-DNnAmo8E.js';
-export { b as useAuthenticateSession, a as useIdentifySession, u as useImportSession, c as useRevokeSession } from './QuilttAuthProvider-12s-DNnAmo8E.js';
+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-Djd5k9Ae.js';
-export { u as useQuilttSession } from './useQuilttSession-12s-QlPCR8A-.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';
@@ -159,11 +159,12 @@ import { Q as QuilttSettingsProvider } from './QuilttSettingsProvider-12s-ZcmFmO
     }, containerKey);
 };
 
-const QuilttProvider = ({ clientId, token, children })=>{
+const QuilttProvider = ({ clientId, graphqlClient, token, children })=>{
     return /*#__PURE__*/ jsx(QuilttSettingsProvider, {
         clientId: clientId,
         children: /*#__PURE__*/ jsx(QuilttAuthProvider, {
             token: token,
+            graphqlClient: graphqlClient,
             children: children
         })
     });

package/dist/{useQuilttConnector-12s-BaTUXD56.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-12s-QlPCR8A-.js';
+import { u as useQuilttSession } from './useQuilttSession-12s-CM6ALGSN.js';
 import { u as useScript } from './useScript-12s-JCgaTW9n.js';
 
-var version = "4.3.0";
+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,14 +64,27 @@ const useQuilttConnector = (connectorId, options)=>{
         options?.institution,
         status
     ]);
+    // Internal handlers to track connector state
+    const handleOpen = useCallback((metadata)=>{
+        isConnectorOpenRef.current = true;
+        options?.onOpen?.(metadata);
+    }, [
+        options?.onOpen
+    ]);
+    const handleExit = useCallback((type, metadata)=>{
+        isConnectorOpenRef.current = false;
+        options?.onExit?.(type, metadata);
+    }, [
+        options?.onExit
+    ]);
     // Register event handlers
     useEffect(()=>{
         if (!connector) return;
         const handlers = {
             onEvent: options?.onEvent,
-            onOpen: options?.onOpen,
+            onOpen: handleOpen,
             onLoad: options?.onLoad,
-            onExit: options?.onExit,
+            onExit: handleExit,
             onExitSuccess: options?.onExitSuccess,
             onExitAbort: options?.onExitAbort,
             onExitError: options?.onExitError
@@ -93,9 +108,9 @@ const useQuilttConnector = (connectorId, options)=>{
     }, [
         connector,
         options?.onEvent,
-        options?.onOpen,
+        handleOpen,
         options?.onLoad,
-        options?.onExit,
+        handleExit,
         options?.onExitSuccess,
         options?.onExitAbort,
         options?.onExitError
@@ -111,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-12s-Djd5k9Ae.js → useQuilttInstitutions-12s-FLdw-CQZ.js}

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

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

@@ -1,7 +1,7 @@
 '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-12s-DNnAmo8E.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';
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@quiltt/react",
-  "version": "4.3.0",
+  "version": "4.3.1",
   "description": "React Components and Hooks for Quiltt Connector",
   "keywords": [
     "quiltt",
@@ -36,7 +36,7 @@
   "dependencies": {
     "@apollo/client": "^3.14.0",
     "use-debounce": "^10.0.4",
-    "@quiltt/core": "4.3.0"
+    "@quiltt/core": "4.3.1"
   },
   "devDependencies": {
     "@biomejs/biome": "2.2.4",

package/src/hooks/useQuilttConnector.ts

@@ -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,15 +76,32 @@ export const useQuilttConnector = (
     }
   }, [connectorId, options?.connectionId, options?.institution, status])
 
+  // 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) return
 
     const handlers = {
       onEvent: options?.onEvent,
-      onOpen: options?.onOpen,
+      onOpen: handleOpen,
       onLoad: options?.onLoad,
-      onExit: options?.onExit,
+      onExit: handleExit,
       onExitSuccess: options?.onExitSuccess,
       onExitAbort: options?.onExitAbort,
       onExitError: options?.onExitError,
@@ -107,9 +127,9 @@ export const useQuilttConnector = (
   }, [
     connector,
     options?.onEvent,
-    options?.onOpen,
+    handleOpen,
     options?.onLoad,
-    options?.onExit,
+    handleExit,
     options?.onExitSuccess,
     options?.onExitAbort,
     options?.onExitError,
@@ -124,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/providers/QuilttAuthProvider.tsx

@@ -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
 }