npm - @tryfinch/react-connect - Versions diffs - 4.1.0 → 5.0.0 - Mend

@tryfinch/react-connect 4.1.0 → 5.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (43) hide show

package/README.md +72 -5
package/dist/core.d.ts +11 -0
package/dist/index-with-react.d.ts +2 -0
package/dist/index.d.ts +12 -46
package/dist/index.es.js +160 -98
package/dist/index.js +150 -128
package/dist/react.d.ts +6 -0
package/dist/react.es.js +181 -0
package/dist/types.d.ts +57 -0
package/dist/umd.d.ts +2 -0
package/dist/utils.d.ts +11 -0
package/package.json +45 -27
package/.eslintignore +0 -5
package/.eslintrc.js +0 -62
package/.github/pull_request_template.md +0 -66
package/.github/workflows/pr.yml +0 -92
package/.github/workflows/release.yml +0 -80
package/.nvmrc +0 -1
package/.prettierrc.js +0 -5
package/CHANGELOG.md +0 -11
package/LICENSE +0 -21
package/dist/index.d.ts.map +0 -1
package/dist/index.es.js.map +0 -1
package/dist/index.js.map +0 -1
package/dist/index.test.d.ts +0 -2
package/dist/index.test.d.ts.map +0 -1
package/example/README.md +0 -2026
package/example/package-lock.json +0 -31464
package/example/package.json +0 -35
package/example/public/index.html +0 -20
package/example/public/manifest.json +0 -8
package/example/src/App.css +0 -49
package/example/src/App.tsx +0 -80
package/example/src/Result.tsx +0 -26
package/example/src/index.css +0 -11
package/example/src/index.js +0 -7
package/example/src/react-app-env.d.ts +0 -1
package/example/tsconfig.json +0 -26
package/jest.config.js +0 -7
package/rollup.config.js +0 -22
package/src/index.test.ts +0 -111
package/src/index.ts +0 -253
package/tsconfig.json +0 -15

package/README.md CHANGED Viewed

@@ -1,16 +1,30 @@
-# @tryfinch/react-connect
+# Finch Connect SDK
 [![NPM](https://img.shields.io/npm/v/@tryfinch/react-connect)](https://www.npmjs.com/package/@tryfinch/react-connect)
-## Install
+The SDK for [Finch's](https://www.tryfinch.com/) authorization flow, Finch Connect
+## Installation
+### React
+Available on npm at `@tryfinch/react-connect`:
 ```bash
-npm install --save @tryfinch/react-connect
+npm install @tryfinch/connect
+```
+### JavaScript
+Available via CDN:
+```html
+<script src="https://prod-cdn.tryfinch.com/latest/connect.js"></script>
 ```
 ## Usage
-See the example app at `example/src` for a functional example
+### React
 ```jsx
 import React, { useState } from 'react';
@@ -32,7 +46,8 @@ const App = () => {
    *    - 'validation_error': Finch Connect failed to open due to validation error
    *    - 'employer_connection_error': The errors employers see within the Finch Connect flow
    */
-  const onError = ({ errorMessage, errorType }) => console.error(errorMessage, errorType);
+  const onError = ({ errorMessage, errorType }) =>
+    console.error(errorMessage, errorType);
   const onClose = () => console.log('User exited Finch Connect');
   // Initialize the FinchConnect hook
@@ -58,3 +73,55 @@ const App = () => {
   );
 };
 ```
+### JavaScript
+```html
+<html>
+  <head>
+    <script src="https://prod-cdn.tryfinch.com/latest/connect.js"></script>
+  </head>
+  <body>
+    <button id="connect-button">Open Finch Connect</button>
+    <script>
+      // Define callbacks
+      /**
+       * @param {string} code - The authorization code to exchange for an access token
+       * @param {string?} state - The state value that was provided when launching Connect
+       */
+      const onSuccess = ({ code, state }) => {
+        // Exchange code for access token via your server
+      };
+      /**
+       * @param {string} errorMessage - The error message
+       * @param {'validation_error' | 'employer_error'} errorType - The type of error
+       *    - 'validation_error': Finch Connect failed to open due to validation error
+       *    - 'employer_connection_error': The errors employers see within the Finch Connect flow
+       */
+      const onError = ({ errorMessage }) => {
+        console.error(errorMessage);
+      };
+      const onClose = () => {
+        console.log('Connect closed');
+      };
+      const connect = FinchConnect.initialize({
+        onSuccess,
+        onError,
+        onClose,
+      });
+      // Generate a session ID using the /connect/sessions endpoint on the Finch API
+      // See the docs here https://developer.tryfinch.com/api-reference/connect/new-session#create-a-new-connect-session
+      const sessionId = '';
+      const button = document.getElementById('connect-button');
+      button.addEventListener('click', () => {
+        connect.open({ sessionId });
+      });
+    </script>
+  </body>
+</html>
+```

package/dist/core.d.ts ADDED Viewed

@@ -0,0 +1,11 @@
+import { ConnectInitializeArgs, FinchConnectInterface } from './types';
+export declare const POST_MESSAGE_NAME: "finch-auth-message-v2";
+export declare const BASE_FINCH_CONNECT_URI = "https://connect.tryfinch.com";
+export declare const FINCH_CONNECT_IFRAME_ID = "finch-connect-iframe";
+export declare const createAndAttachIFrame: ({ src, zIndex, }: {
+    src: string;
+    zIndex?: number;
+}) => HTMLIFrameElement;
+export declare const removeIFrame: () => void;
+export declare const createMessageHandler: (callbacks: ConnectInitializeArgs, closeFn: () => void) => (event: MessageEvent<any>) => void;
+export declare const createFinchConnectCore: (callbacks: ConnectInitializeArgs) => FinchConnectInterface;

package/dist/index-with-react.d.ts ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ export * from './index';
2	+ export { useFinchConnect } from './react';

package/dist/index.d.ts CHANGED Viewed

@@ -1,46 +1,12 @@
-export type SuccessEvent = {
-    code: string;
-    state?: string;
-    idpRedirectUri?: string;
-};
-type ErrorType = 'validation_error' | 'employer_connection_error';
-export type ErrorEvent = {
-    errorMessage: string;
-    errorType?: ErrorType;
-};
-type ApiConfig = {
-    connectUrl: string;
-};
-export type ConnectInitializeArgs = {
-    onSuccess: (e: SuccessEvent) => void;
-    onError: (e: ErrorEvent) => void;
-    onClose: () => void;
-    apiConfig?: ApiConfig;
-};
-export type ConnectLaunchArgs = {
-    sessionId: string;
-    state?: string;
-    zIndex?: number;
-};
-export type ConnectPreviewLaunchArgs = {
-    clientId: string;
-    products: string[];
-};
-type OpenFn = (args: ConnectLaunchArgs) => void;
-type OpenPreviewFn = (args: ConnectPreviewLaunchArgs) => void;
-export declare const constructAuthUrl: ({ sessionId, state, apiConfig, }: {
-    sessionId: string;
-    state?: string | undefined;
-    apiConfig?: ApiConfig | undefined;
-}) => string;
-export declare const constructPreviewUrl: ({ clientId, products, apiConfig, }: {
-    clientId: string;
-    products: string[];
-    apiConfig?: ApiConfig | undefined;
-}) => string;
-export declare const useFinchConnect: (initializeArgs: ConnectInitializeArgs) => {
-    open: OpenFn;
-    openPreview: OpenPreviewFn;
-};
-export {};
-//# sourceMappingURL=index.d.ts.map
+import { ConnectInitializeArgs, ConnectLaunchArgs, ConnectPreviewLaunchArgs, FinchConnectInterface } from './types';
+export * from './types';
+export default class FinchConnect implements FinchConnectInterface {
+    private core;
+    private constructor();
+    static initialize(args: ConnectInitializeArgs): FinchConnect;
+    open: (args: ConnectLaunchArgs) => void;
+    openPreview: (args: ConnectPreviewLaunchArgs) => void;
+    close: () => void;
+    destroy: () => void;
+}
+export { FinchConnect };

package/dist/index.es.js CHANGED Viewed

@@ -1,17 +1,13 @@
 import { useRef, useEffect } from 'react';
-const POST_MESSAGE_NAME = 'finch-auth-message-v2';
-const BASE_FINCH_CONNECT_URI = 'https://connect.tryfinch.com';
-const FINCH_CONNECT_IFRAME_ID = 'finch-connect-iframe';
 const appendBaseParams = (url) => {
     url.searchParams.append('app_type', 'spa');
-    // The host URL of the SDK. This is used to store the referrer for postMessage purposes
     url.searchParams.append('sdk_host_url', window.location.origin);
     url.searchParams.append('mode', 'employer');
-    // replace with actual SDK version by rollup
-    url.searchParams.append('sdk_version', 'react-4.1.0');
+    url.searchParams.append('sdk_version', 'unified-5.0.0');
 };
 const constructAuthUrl = ({ sessionId, state, apiConfig, }) => {
+    const BASE_FINCH_CONNECT_URI = 'https://connect.tryfinch.com';
     const CONNECT_URL = (apiConfig === null || apiConfig === void 0 ? void 0 : apiConfig.connectUrl) || BASE_FINCH_CONNECT_URI;
     const authUrl = new URL(`${CONNECT_URL}/authorize`);
     authUrl.searchParams.append('session', sessionId);
@@ -21,20 +17,160 @@ const constructAuthUrl = ({ sessionId, state, apiConfig, }) => {
     return authUrl.href;
 };
 const constructPreviewUrl = ({ clientId, products, apiConfig, }) => {
+    const BASE_FINCH_CONNECT_URI = 'https://connect.tryfinch.com';
     const CONNECT_URL = (apiConfig === null || apiConfig === void 0 ? void 0 : apiConfig.connectUrl) || BASE_FINCH_CONNECT_URI;
     const previewUrl = new URL(`${CONNECT_URL}/authorize`);
     previewUrl.searchParams.append('preview', 'true');
     previewUrl.searchParams.append('client_id', clientId);
-    previewUrl.searchParams.append('products', (products !== null && products !== void 0 ? products : []).join(' '));
-    // This will be replaced by a universally allowed redirect URI in the backend
-    // We won't ever redirect to anything in preview mode, so we just need a value to pass validation
+    previewUrl.searchParams.append('products', products.join(' '));
     previewUrl.searchParams.append('redirect_uri', 'https://www.tryfinch.com');
     appendBaseParams(previewUrl);
     return previewUrl.href;
 };
+const POST_MESSAGE_NAME = 'finch-auth-message-v2';
+const BASE_FINCH_CONNECT_URI = 'https://connect.tryfinch.com';
+const FINCH_CONNECT_IFRAME_ID = 'finch-connect-iframe';
+const createAndAttachIFrame = ({ src, zIndex = 999, }) => {
+    const existingIframe = document.getElementById(FINCH_CONNECT_IFRAME_ID);
+    if (existingIframe) {
+        existingIframe.remove();
+    }
+    const iframe = document.createElement('iframe');
+    iframe.src = src;
+    iframe.frameBorder = '0';
+    iframe.id = FINCH_CONNECT_IFRAME_ID;
+    iframe.style.position = 'fixed';
+    iframe.style.zIndex = zIndex.toString();
+    iframe.style.height = '100%';
+    iframe.style.width = '100%';
+    iframe.style.top = '0';
+    iframe.style.backgroundColor = 'none transparent';
+    iframe.style.border = 'none';
+    iframe.allow = 'clipboard-write; clipboard-read';
+    document.body.prepend(iframe);
+    document.body.style.overflow = 'hidden';
+    return iframe;
+};
+const removeIFrame = () => {
+    const frameToRemove = document.getElementById(FINCH_CONNECT_IFRAME_ID);
+    if (frameToRemove) {
+        frameToRemove.remove();
+        document.body.style.overflow = 'inherit';
+    }
+};
+const createMessageHandler = (callbacks, closeFn) => {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    return (event) => {
+        var _a, _b, _c, _d;
+        const typedEvent = event;
+        if (!typedEvent.data)
+            return;
+        if (typedEvent.data.name !== POST_MESSAGE_NAME)
+            return;
+        const CONNECT_URL = ((_a = callbacks.apiConfig) === null || _a === void 0 ? void 0 : _a.connectUrl) || BASE_FINCH_CONNECT_URI;
+        if (!typedEvent.origin.startsWith(CONNECT_URL))
+            return;
+        if (typedEvent.data.kind !== 'error')
+            closeFn();
+        switch (typedEvent.data.kind) {
+            case 'closed':
+                callbacks.onClose();
+                break;
+            case 'error':
+                if ((_b = typedEvent.data.error) === null || _b === void 0 ? void 0 : _b.shouldClose)
+                    closeFn();
+                callbacks.onError({
+                    errorMessage: ((_c = typedEvent.data.error) === null || _c === void 0 ? void 0 : _c.message) || 'Unknown error',
+                    errorType: (_d = typedEvent.data.error) === null || _d === void 0 ? void 0 : _d.type,
+                });
+                break;
+            case 'success':
+                callbacks.onSuccess({
+                    code: typedEvent.data.code,
+                    state: typedEvent.data.state,
+                    idpRedirectUri: typedEvent.data.idpRedirectUri,
+                });
+                break;
+            default:
+                callbacks.onError({
+                    errorMessage: `Report to developers@tryfinch.com: unable to handle window.postMessage for: ${JSON.stringify(typedEvent.data)}`,
+                });
+        }
+    };
+};
+const createFinchConnectCore = (callbacks) => {
+    const close = () => {
+        removeIFrame();
+    };
+    const messageHandler = createMessageHandler(callbacks, close);
+    const open = (args) => {
+        const url = constructAuthUrl({
+            sessionId: args.sessionId,
+            state: args.state,
+            apiConfig: callbacks.apiConfig,
+        });
+        createAndAttachIFrame({
+            src: url,
+            zIndex: args.zIndex,
+        });
+    };
+    const openPreview = (args) => {
+        const url = constructPreviewUrl({
+            clientId: args.clientId,
+            products: args.products,
+            apiConfig: callbacks.apiConfig,
+        });
+        createAndAttachIFrame({
+            src: url,
+        });
+    };
+    const destroy = () => {
+        close();
+        window.removeEventListener('message', messageHandler);
+    };
+    window.addEventListener('message', messageHandler);
+    return {
+        open,
+        openPreview,
+        close,
+        destroy,
+    };
+};
+let isInitialized = false;
+class FinchConnect {
+    constructor(args) {
+        this.open = (args) => {
+            this.core.open(args);
+        };
+        this.openPreview = (args) => {
+            this.core.openPreview(args);
+        };
+        this.close = () => {
+            this.core.close();
+        };
+        this.destroy = () => {
+            this.core.destroy();
+            isInitialized = false;
+        };
+        if (isInitialized) {
+            console.error('FinchConnect.initialize has already been called. Please ensure to only call FinchConnect.initialize once to avoid your event callbacks being triggered multiple times.');
+        }
+        else {
+            isInitialized = true;
+        }
+        this.core = createFinchConnectCore(args);
+    }
+    static initialize(args) {
+        return new FinchConnect(args);
+    }
+}
 let isUseFinchConnectInitialized = false;
 const useFinchConnect = (initializeArgs) => {
     const isHookMounted = useRef(false);
+    const coreRef = useRef(null);
     useEffect(() => {
         if (!isHookMounted.current) {
             if (isUseFinchConnectInitialized) {
@@ -44,105 +180,31 @@ const useFinchConnect = (initializeArgs) => {
                 isUseFinchConnectInitialized = true;
             }
             isHookMounted.current = true;
+            coreRef.current = createFinchConnectCore(initializeArgs);
         }
     }, []);
-    const createAndAttachIFrame = ({ src, zIndexOverride, }) => {
-        if (!document.getElementById(FINCH_CONNECT_IFRAME_ID)) {
-            const iframe = document.createElement('iframe');
-            iframe.src = src;
-            iframe.frameBorder = '0';
-            iframe.id = FINCH_CONNECT_IFRAME_ID;
-            iframe.style.position = 'fixed';
-            iframe.style.zIndex = (zIndexOverride === null || zIndexOverride === void 0 ? void 0 : zIndexOverride.toString()) || '999';
-            iframe.style.height = '100%';
-            iframe.style.width = '100%';
-            iframe.style.top = '0';
-            iframe.style.backgroundColor = 'none transparent';
-            iframe.style.border = 'none';
-            iframe.allow = 'clipboard-write; clipboard-read';
-            document.body.prepend(iframe);
-            document.body.style.overflow = 'hidden';
-        }
-    };
+    useEffect(() => {
+        return () => {
+            if (coreRef.current) {
+                coreRef.current.destroy();
+            }
+            isUseFinchConnectInitialized = false;
+        };
+    }, []);
     const open = (launchArgs) => {
-        const iframeSrc = constructAuthUrl({
-            sessionId: launchArgs.sessionId,
-            state: launchArgs.state,
-            apiConfig: initializeArgs.apiConfig,
-        });
-        createAndAttachIFrame({
-            src: iframeSrc,
-            zIndexOverride: launchArgs.zIndex,
-        });
+        if (coreRef.current) {
+            coreRef.current.open(launchArgs);
+        }
     };
     const openPreview = (launchArgs) => {
-        const iframeSrc = constructPreviewUrl({
-            clientId: launchArgs.clientId,
-            products: launchArgs.products,
-            apiConfig: initializeArgs.apiConfig,
-        });
-        createAndAttachIFrame({
-            src: iframeSrc,
-        });
-    };
-    const close = () => {
-        var _a;
-        const frameToRemove = document.getElementById(FINCH_CONNECT_IFRAME_ID);
-        if (frameToRemove) {
-            (_a = frameToRemove.parentNode) === null || _a === void 0 ? void 0 : _a.removeChild(frameToRemove);
-            document.body.style.overflow = 'inherit';
+        if (coreRef.current) {
+            coreRef.current.openPreview(launchArgs);
         }
     };
-    useEffect(() => {
-        function handleFinchAuth(event) {
-            var _a, _b, _c, _d;
-            const CONNECT_URL = ((_a = initializeArgs.apiConfig) === null || _a === void 0 ? void 0 : _a.connectUrl) || BASE_FINCH_CONNECT_URI;
-            if (!event.data)
-                return;
-            if (event.data.name !== POST_MESSAGE_NAME)
-                return;
-            if (!event.origin.startsWith(CONNECT_URL))
-                return;
-            if (event.data.kind !== 'error')
-                close();
-            switch (event.data.kind) {
-                case 'closed':
-                    initializeArgs.onClose();
-                    break;
-                case 'error':
-                    if ((_b = event.data.error) === null || _b === void 0 ? void 0 : _b.shouldClose)
-                        close();
-                    initializeArgs.onError({
-                        errorMessage: (_c = event.data.error) === null || _c === void 0 ? void 0 : _c.message,
-                        errorType: (_d = event.data.error) === null || _d === void 0 ? void 0 : _d.type,
-                    });
-                    break;
-                case 'success':
-                    initializeArgs.onSuccess({
-                        code: event.data.code,
-                        state: event.data.state,
-                        idpRedirectUri: event.data.idpRedirectUri,
-                    });
-                    break;
-                default: {
-                    // This case should never happen, if it does it should be reported to us
-                    initializeArgs.onError({
-                        errorMessage: `Report to developers@tryfinch.com: unable to handle window.postMessage for:  ${JSON.stringify(event.data)}`,
-                    });
-                }
-            }
-        }
-        window.addEventListener('message', handleFinchAuth);
-        return () => {
-            window.removeEventListener('message', handleFinchAuth);
-            isUseFinchConnectInitialized = false;
-        };
-    }, [initializeArgs.onClose, initializeArgs.onError, initializeArgs.onSuccess]);
     return {
         open,
         openPreview,
     };
 };
-export { constructAuthUrl, constructPreviewUrl, useFinchConnect };
-//# sourceMappingURL=index.es.js.map
+export { FinchConnect, useFinchConnect };