Socket
Book a DemoInstallSign in
Socket

@tryfinch/react-connect

Package Overview
Dependencies
Maintainers
6
Versions
20
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@tryfinch/react-connect

The SDK for Finch's authorization flow, Finch Connect

latest
Source
npmnpm
Version
5.0.0
Version published
Weekly downloads
12K
6.5%
Maintainers
6
Weekly downloads
 
Created
Source

Finch Connect SDK

NPM

The SDK for Finch's authorization flow, Finch Connect

Installation

React

Available on npm at @tryfinch/react-connect:

npm install @tryfinch/connect

JavaScript

Available via CDN:

<script src="https://prod-cdn.tryfinch.com/latest/connect.js"></script>

Usage

React

import React, { useState } from 'react';
import { useFinchConnect } from '@tryfinch/react-connect';

const App = () => {
  const [code, setCode] = useState(null);

  // 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 }) => setCode(code);
  /**
   * @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, errorType }) =>
    console.error(errorMessage, errorType);
  const onClose = () => console.log('User exited Finch Connect');

  // Initialize the FinchConnect hook
  const { open } = useFinchConnect({
    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 = '';

  return (
    <div>
      <header>
        <p>Code: {code}</p>
        <button type="button" onClick={() => open({ sessionId })}>
          Open Finch Connect
        </button>
      </header>
    </div>
  );
};

JavaScript

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

Keywords

finch

FAQs

Package last updated on 19 Sep 2025

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts