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

@tryfinch/react-connect 4.0.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 (39) 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 -35
package/dist/index.es.js +176 -82
package/dist/index.js +150 -95
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 -61
package/.prettierrc.js +0 -5
package/CHANGELOG.md +0 -6
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 -54
package/src/index.ts +0 -186
package/tsconfig.json +0 -15

package/example/package.json DELETED Viewed

@@ -1,35 +0,0 @@
-{
-  "name": "react-finch-connect-example",
-  "homepage": "https://.github.io/react-finch-connect",
-  "version": "0.0.0",
-  "license": "MIT",
-  "private": true,
-  "dependencies": {
-    "@tryfinch/react-connect": "file:..",
-    "@types/react": "^17.0.37",
-    "prop-types": "^15.6.2",
-    "react": "file:../node_modules/react",
-    "react-dom": "^16.9.0"
-  },
-  "scripts": {
-    "start": "react-scripts start",
-    "build": "react-scripts build",
-    "test": "react-scripts test --env=jsdom",
-    "eject": "react-scripts eject"
-  },
-  "eslintConfig": {
-    "extends": [
-      "react-app",
-      "react-app/jest"
-    ]
-  },
-  "browserslist": [
-    ">0.2%",
-    "not dead",
-    "not ie <= 11",
-    "not op_mini all"
-  ],
-  "devDependencies": {
-    "react-scripts": "^5.0.1"
-  }
-}

package/example/public/index.html DELETED Viewed

@@ -1,20 +0,0 @@
-<!doctype html>
-<html lang="en">
-  <head>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-    <meta name="theme-color" content="#000000">
-    <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
-    <title>react-finch-connect</title>
-  </head>
-  <body>
-    <noscript>
-      You need to enable JavaScript to run this app.
-    </noscript>
-    <div id="root"></div>
-  </body>
-</html>

package/example/public/manifest.json DELETED Viewed

@@ -1,8 +0,0 @@
-{
-  "short_name": "react-finch-connect",
-  "name": "react-finch-connect",
-  "start_url": "./index.html",
-  "display": "standalone",
-  "theme_color": "#000000",
-  "background_color": "#ffffff"
-}

package/example/src/App.css DELETED Viewed

@@ -1,49 +0,0 @@
-.container {
-  text-align: center;
-  background-color: #282c34;
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  font-size: calc(7px + 2vmin);
-  color: white;
-}
-a {
-  color: white;
-}
-.actions {
-  background-color: #4f4f4f;
-  padding: 1em;
-  border-radius: 10px;
-  margin: 1em 0;
-}
-.cta {
-  font-size: calc(7px + 2vmin);
-  padding: .5em;
-}
-.row {
-  margin: 2em 0;
-}
-.top-label {
-  display: block;
-  margin-bottom: .2em;
-}
-input[type=checkbox] {
-  width: 2em;
-  height: 2em;
-}
-.results {
-  background-color: #4f4f4f;
-  padding: 1em;
-  border-radius: 10px;
-  text-align: left;
-  margin: 1em 0;
-}

package/example/src/App.tsx DELETED Viewed

@@ -1,80 +0,0 @@
-import React, { useState } from 'react';
-import { useFinchConnect, SuccessEvent, ErrorEvent } from '@tryfinch/react-connect';
-import Result, { ResultContainer } from './Result';
-import './App.css';
-const App = () => {
-  const [sessionId, setSessionId] = useState<string>('');
-  const [sendState, setSendState] = useState<boolean>(false);
-  const [result, setResult] = useState<ResultContainer>();
-  // Define callbacks
-  const onSuccess = (value: SuccessEvent) => setResult({ kind: 'success', value });
-  const onError = (value: ErrorEvent) => setResult({ kind: 'error', value });
-  const onClose = () => setResult({ kind: 'closed' });
-  // Initialize the FinchConnect hook
-  const { open } = useFinchConnect({
-    onSuccess,
-    onError,
-    onClose,
-  });
-  // Call the open method when submitting the form
-  const submissionHandler: React.FormEventHandler<HTMLFormElement> = (e) => {
-    e.preventDefault();
-    open({
-      // 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
-      sessionId: sessionId.trim(),
-      // An optional state parameter can be passed
-      // https://datatracker.ietf.org/doc/html/rfc6749#section-10.12
-      ...(sendState ? { state: new Date().toISOString() } : {}),
-      // An optional value for the z-index of the Finch Connect iframe
-      // Defaults to 999 if not provided
-      // zIndex: 998,
-    });
-  };
-  return (
-    <div className="container">
-      <h2>
-        <a href="https://www.npmjs.com/package/@tryfinch/react-connect">@tryfinch/react-connect</a>{' '}
-        Example App
-      </h2>
-      <form className="actions" onSubmit={submissionHandler}>
-        <div className="row">
-          <label className="top-label">Session UUID:</label>
-          <input
-            type="text"
-            placeholder="Enter session UUID"
-            value={sessionId}
-            onChange={(e) => setSessionId(e.target.value)}
-          />
-        </div>
-        <div className="row">
-          <label className="top-label">Include State:</label>
-          <input
-            type="checkbox"
-            checked={sendState}
-            onChange={() => setSendState((prev) => !prev)}
-          />
-        </div>
-        <div className="row">
-          <button className="cta" type="submit">
-            Open Finch Connect
-          </button>
-        </div>
-      </form>
-      <div className="results">
-        {!result && (
-          <p>Complete a Finch Connect session and the success event will be displayed here</p>
-        )}
-        {result && <Result result={result} />}
-      </div>
-    </div>
-  );
-};
-export default App;

package/example/src/Result.tsx DELETED Viewed

@@ -1,26 +0,0 @@
-import { SuccessEvent, ErrorEvent } from '@tryfinch/react-connect';
-export type ResultContainer = {
-  kind: 'success';
-  value: SuccessEvent;
-} | {
-  kind: 'error';
-  value: ErrorEvent;
-} | {
-  kind: 'closed',
-};
-const Result = ({ result }: { result: ResultContainer }) => {
-  if (result.kind === 'closed') {
-    return <>
-      <p>Closed!</p>
-    </>;
-  }
-  return <>
-    <p>{ result.kind === 'error' ? 'Error' : 'Success' }:</p>
-    <pre>{ JSON.stringify(result.value, null, 2) }</pre>
-  </>;
-};
-export default Result

package/example/src/index.css DELETED Viewed

@@ -1,11 +0,0 @@
-body {
-  margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu',
-    'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace;
-}

package/example/src/index.js DELETED Viewed

@@ -1,7 +0,0 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-import './index.css';
-import App from './App';
-ReactDOM.render(<App />, document.getElementById('root'));

package/example/src/react-app-env.d.ts DELETED Viewed

	@@ -1 +0,0 @@
1	- /// <reference types="react-scripts" />

package/example/tsconfig.json DELETED Viewed

@@ -1,26 +0,0 @@
-{
-  "compilerOptions": {
-    "target": "es5",
-    "lib": [
-      "dom",
-      "dom.iterable",
-      "esnext"
-    ],
-    "allowJs": true,
-    "skipLibCheck": true,
-    "esModuleInterop": true,
-    "allowSyntheticDefaultImports": true,
-    "strict": true,
-    "forceConsistentCasingInFileNames": true,
-    "module": "esnext",
-    "moduleResolution": "node",
-    "resolveJsonModule": true,
-    "isolatedModules": true,
-    "noEmit": true,
-    "jsx": "react-jsx",
-    "noFallthroughCasesInSwitch": true
-  },
-  "include": [
-    "src"
-  ]
-}

package/jest.config.js DELETED Viewed

@@ -1,7 +0,0 @@
-module.exports = {
-  preset: 'ts-jest',
-  testEnvironment: 'jsdom',
-  roots: ['<rootDir>/src'],
-  testMatch: ['**/__tests__/**/*.test.ts', '**/*.test.ts'],
-  collectCoverageFrom: ['src/**/*.{ts,tsx}', '!src/**/*.d.ts'],
-};

package/rollup.config.js DELETED Viewed

@@ -1,22 +0,0 @@
-import external from 'rollup-plugin-peer-deps-external';
-import replace from '@rollup/plugin-replace';
-import typescript from '@rollup/plugin-typescript';
-import pkg from './package.json';
-const plugins = [
-  external(),
-  replace({ SDK_VERSION: pkg.version }),
-  typescript({ sourceRoot: '.' }),
-];
-export default [
-  {
-    input: 'src/index.ts',
-    output: [
-      { file: pkg.main, format: 'cjs', sourcemap: true },
-      { file: pkg.module, format: 'es', sourcemap: true },
-    ],
-    plugins,
-  },
-];

package/src/index.test.ts DELETED Viewed

@@ -1,54 +0,0 @@
-import { constructAuthUrl } from './index';
-const NOOP_CALLBACKS = {
-  onSuccess: jest.fn(),
-  onError: jest.fn(),
-  onClose: jest.fn(),
-  zIndex: 999,
-};
-describe('Finch React SDK', () => {
-  describe('constructAuthUrl', () => {
-    it('adds the session parameter', () => {
-      const authUrl = constructAuthUrl({
-        sessionId: 'test-session-id',
-      });
-      expect(authUrl).toContain('session=test-session-id');
-    });
-    it('adds all the expected base parameters to the auth URL', () => {
-      const expectedParameters = {
-        app_type: 'spa',
-        sdk_host_url: encodeURIComponent('http://localhost'),
-        mode: 'employer',
-        sdk_version: 'react-SDK_VERSION',
-      };
-      const authUrl = constructAuthUrl({
-        sessionId: 'test-session-id',
-      });
-      Object.entries(expectedParameters).forEach(([key, value]) => {
-        expect(authUrl).toContain(`${key}=${value}`);
-      });
-    });
-    it('adds the state parameter if it is provided', () => {
-      const testOptions = { sessionId: 'test-session-id', state: 'test-state', ...NOOP_CALLBACKS };
-      const authUrl = constructAuthUrl(testOptions);
-      expect(authUrl).toContain('state=test-state');
-    });
-    it('uses the provided connectUrl if provided', () => {
-      const authUrl = constructAuthUrl({
-        sessionId: '123',
-        apiConfig: {
-          connectUrl: 'https://cool.site',
-        },
-        ...NOOP_CALLBACKS,
-      });
-      expect(authUrl.startsWith('https://cool.site/authorize?')).toBe(true);
-    });
-  });
-});

package/src/index.ts DELETED Viewed

@@ -1,186 +0,0 @@
-import { useEffect, useRef } from 'react';
-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;
-};
-type OpenFn = (args: ConnectLaunchArgs) => void;
-const POST_MESSAGE_NAME = 'finch-auth-message-v2' as const;
-type FinchConnectAuthMessage = { name: typeof POST_MESSAGE_NAME } & (
-  | {
-      kind: 'closed';
-    }
-  | {
-      kind: 'success';
-      code: string;
-      state?: string;
-      idpRedirectUri?: string;
-    }
-  | {
-      kind: 'error';
-      error: { shouldClose: boolean; message: string; type: ErrorType };
-    }
-);
-interface FinchConnectPostMessage {
-  data: FinchConnectAuthMessage;
-  origin: string;
-}
-const BASE_FINCH_CONNECT_URI = 'https://connect.tryfinch.com';
-const FINCH_CONNECT_IFRAME_ID = 'finch-connect-iframe';
-export const constructAuthUrl = ({
-  sessionId,
-  state,
-  apiConfig,
-}: {
-  sessionId: string;
-  state?: string;
-  apiConfig?: ApiConfig;
-}) => {
-  const CONNECT_URL = apiConfig?.connectUrl || BASE_FINCH_CONNECT_URI;
-  const authUrl = new URL(`${CONNECT_URL}/authorize`);
-  authUrl.searchParams.append('session', sessionId);
-  authUrl.searchParams.append('app_type', 'spa');
-  /** The host URL of the SDK. This is used to store the referrer for postMessage purposes */
-  authUrl.searchParams.append('sdk_host_url', window.location.origin);
-  authUrl.searchParams.append('mode', 'employer');
-  if (state) authUrl.searchParams.append('state', state);
-  // replace with actual SDK version by rollup
-  authUrl.searchParams.append('sdk_version', 'react-SDK_VERSION');
-  return authUrl.href;
-};
-let isUseFinchConnectInitialized = false;
-export const useFinchConnect = (initializeArgs: ConnectInitializeArgs): { open: OpenFn } => {
-  const isHookMounted = useRef(false);
-  useEffect(() => {
-    if (!isHookMounted.current) {
-      if (isUseFinchConnectInitialized) {
-        console.error(
-          'One useFinchConnect hook has already been registered. Please ensure to only call useFinchConnect once to avoid your event callbacks getting called more than once. You can pass in override options to the open function if you so require.'
-        );
-      } else {
-        isUseFinchConnectInitialized = true;
-      }
-      isHookMounted.current = true;
-    }
-  }, []);
-  const open: OpenFn = (launchArgs) => {
-    if (!document.getElementById(FINCH_CONNECT_IFRAME_ID)) {
-      const iframe = document.createElement('iframe');
-      iframe.src = constructAuthUrl({
-        sessionId: launchArgs.sessionId,
-        state: launchArgs.state,
-        apiConfig: initializeArgs.apiConfig,
-      });
-      iframe.frameBorder = '0';
-      iframe.id = FINCH_CONNECT_IFRAME_ID;
-      iframe.style.position = 'fixed';
-      iframe.style.zIndex = launchArgs.zIndex?.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';
-    }
-  };
-  const close = () => {
-    const frameToRemove = document.getElementById(FINCH_CONNECT_IFRAME_ID);
-    if (frameToRemove) {
-      frameToRemove.parentNode?.removeChild(frameToRemove);
-      document.body.style.overflow = 'inherit';
-    }
-  };
-  useEffect(() => {
-    function handleFinchAuth(event: FinchConnectPostMessage) {
-      const CONNECT_URL = initializeArgs.apiConfig?.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 (event.data.error?.shouldClose) close();
-          initializeArgs.onError({
-            errorMessage: event.data.error?.message,
-            errorType: event.data.error?.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,
-  };
-};

package/tsconfig.json DELETED Viewed

@@ -1,15 +0,0 @@
-{
-  "compilerOptions": {
-    "target": "es2016",
-    "module": "esnext",
-    "declaration": true,
-    "declarationMap": true,
-    "sourceMap": true,
-    "outDir": "./",
-    "esModuleInterop": true,
-    "forceConsistentCasingInFileNames": true,
-    "strict": true
-  },
-  "include": ["src/**/*"],
-  "exclude": ["node_modules", "example/**/*"]
-}