Finch Demo - Next.js

Integrating Finch with your frontend and backend can be daunting. Managing access tokens, handling null data, knowing which API endpoints to call when, etc. This sample application is meant to help you get started to see how an application can properly implement Finch. Start by running the application locally on your computer and then search through the code for any pages or components that you find interesting.

Since Finch requires having a frontend and a backend (for application security reasons), Next.js is perfect platform since it bundles a React client-side frontend with a server-side backend API running as serverless functions.

🚀 Getting Started

Prerequisites

1. Register for a Finch Sandbox Application.
2. Configure the following Redirect URL for this application under the "Redirect URIs" section of the "Sandbox" page: http://localhost:3000/api/finch/callback
3. Take note of the Client ID and Client Secret. You'll need these values in the next step. You will need to regenerate the Client Secret the first time before using.

Basic Setup

Create a .env.local file under your root project directory (or copy our example file by running cp .env.local.example .env.local in the terminal).

Define the necessary Finch configuration values as follows:

BASE_URL=http://localhost:3000

FINCH_API_URL=https://api.tryfinch.com
FINCH_SANDBOX_URL=https://api.tryfinch.com

FINCH_CLIENT_ID=
FINCH_CLIENT_SECRET=
NEXT_PUBLIC_FINCH_REDIRECT_URI=http://localhost:3000/api/finch/callback

NEXT_PUBLIC_BASE_URL=http://localhost:3000

NEXT_PUBLIC_FINCH_API_URL=https://api.tryfinch.com
NEXT_PUBLIC_FINCH_SANDBOX_URL=https://api.tryfinch.com

NEXT_PUBLIC_FINCH_CLIENT_ID=
NEXT_PUBLIC_FINCH_CLIENT_SECRET=

Start Local Application

1. Start by installing the dependencies of this project: npm install or yarn install.

2. Then, run the development server: npm run dev or yarn dev.

3. Open http://localhost:3000 with your browser to see the result.

4. Create a new connection by either selecting Redirect Flow or Embed Flow.

You can start editing the app by modifying components/finch-connect.tsx or components/navbar.tsx or pages/api/finch. The pages auto-update as you edit the files.

Notes

• This app uses node-json-db package as a "stand-in" database to make it easy to store access tokens. Replace /util/database.ts with your preference of database.

• This app uses swr package to fetch API requests. A global fetcher function is used which includes a progress bar when loading. Editable in components/layout.tsx and pages/_app.tsx.

• If you want to manually set the current_connection, overide the access token located in ./database.json (after running the application locally).

• Always try to check for null values when displaying data in a user interface ex: (employee?.email)

Using Gitpod (optional)

The benefits of using Gitpod vs running locally is that this entire application can be built completely in a browser - no additional machine software dependencies required.

1. Copy our example configuration file by running cp .env.local.example .env.local in the terminal).

2. Then, run the development server: npm run dev or yarn dev

3. Open http://localhost:3000 with your browser to see the result.