Creating a Financial App with the Plaid API, Node.js/Express, and React

Cathy D'Onofrio
6 min readJan 12, 2021
Photo by Austin Distel on Unsplash

My final project for Flatiron was a budgeting tool, where users can create budgets by category and month and analyze them against their expenses. I’d have preferred to have done this with live transactions using the Plaid API, but unfortunately there wasn’t a ton of documentation for Ruby on Rails, which is the backend I was using. With 1.5 weeks to complete the project, I ended up creating my own list of transactions.

I was determined to figure out the Plaid API after graduation. I had to decide whether I wanted to make the API work with Rails (which should be possible using Plaid’s Sinatra docs), or if I wanted to learn another language where they had more sufficient documentation. I ultimately decided to learn Node.js since I already knew Javascript.

After getting my feet wet with Node/Express, I went back to working with Plaid, and the backend became a bit easier to figure out, but their Quickstart used jQuery. The Plaid React Link documentation is great, and I found great resources by others who had successfully built a Plaid app with a Node/Express backend and React frontend, including here and here. However, the blog posts ask you to take note of your public_key, which Plaid stopped providing as of July 2020. With their revised flow, the app server makes a request to Plaid to generate a temporary link_token(rather than the public_key provided upfront with the secret_key and client_key). The link_token is then sent back to the app server and and then client side.

The rest of the process is similar to what it was previously— Plaid responds to the initialized link_token with the public_token, which is sent back to the the app server in exchange for a permanent access_token.

The Plaid Flow per the Quickstart docs https://plaid.com/docs/quickstart/

To summarize it more succinctly:

  1. The app server makes a requests to Plaid for a temporary link_token
  2. The link_token is sent to the client, where the user can initialize Link
  3. If Link successfully initializes, a public_token is generated and sent to the app server
  4. The app server makes a request to Plaid to exchange the public_token for the permanent access_token

If we were using a database for this example, we’d store the access_token to the user so they wouldn’t need to authenticate at every login. A good way to understand this is by using a financial app like Venmo as an example: you only need to authenticate your bank account once, because Plaid’s access token is stored to your account. However, you still need to log in and out of Venmo to send or receive money, you just don’t have to use Plaid to authenticate your account every time because of your access_token.

I’ll use a login and database in a future example, but for today, I want to show the flow between Node/Express, React, and Plaid to generate a list of transactions from Plaid. This blog post assumes you have some working knowledge of Node/Express and React. The end result will look something like this:

Getting Started

To save time setting up the file structure and installing dependencies separately, you can clone the skeleton here, and install all dependencies at once:

cd server && npm install
cd client && npm install

Note — package.json in the server is configured to run the backend and frontend at the same time using npm run dev.

You also will need to create a free Plaid account to get keys, which you can do here. Once you have the keys, you need to create the keys file. Under server, cd config, thentouch keys.js .

In the file, add the following:

module.exports = {
PLAID_CLIENT_ID: 'ADD CLIENT KEY',
PLAID_SECRET: 'ADD SANDBOX SECRET KEY'
};

Optional: If you want to push your work to Github, remember to hide your keys by doing the following:

In server, enter touch .gitignore in your terminal. In the .gitignore file, add keys.js and save.

Setting up the backend

In the server directory, navigate to the index.js file. Add the below requirements.

const express = require('express');
const bodyParser = require('body-parser');
const keys = require('./config/keys');
const cors = require('cors');
const plaid = require('plaid');
const app = express();
app.use(cors())
app.use(bodyParser.json());
//add code hereconst PORT = 5000;app.listen(PORT, () => console.log(`listening on port ${PORT}!`));

To confirm the server is running, run npm run dev in your terminal. Make sure our console confirms that it’s running on port 5000. You can terminate the server with ctrl c if you don’t want it to run while you update your code.

You’ll initialize an instance of a Plaid client by adding the following code.

const client = new plaid.Client({
clientID: keys.PLAID_CLIENT_ID,
secret: keys.PLAID_SECRET,
env: plaid.environments.sandbox
});

I highly recommend confirming that your keys are working by adding console.log(client)after this block of code, otherwise the next step won’t work. If you run npm run dev, the client object with the API keys. (If your server is already running, you may have to reboot it.)

Creating the Link Token

To create the temporary link_token, the app server needs to make a request to Plaid. The example below uses sample user credentials, which would need to be updated if you’re using a database.

Add the code below to get information about the link_token you just created.

Handling the link token on the client side

Next, navigate to App.js inside your client folder. Add the following code for the App class. This fetches the link_token your app server retrieved from Plaid, and ensures that the client side can access it upon page load.

Navigate to the Link.js file in the src folder and update with the code below (based on the Link docs.) We’re passing down props from App to ensure the component has access to the link_token.

At this point, you can now run npm run dev in your terminal to initialize Link! If you click on the button, you can enter the test credentials user_good and pass_good and begin the Plaid auth process. However, it’s not the whole auth process, and you won’t have access to the data yet. That’s where the public_token and access_token come in.

Exchanging the public token for the access token

When the user credentials have been submitted in Link, we are provided with a public_token via the onSuccess callback. We need to exchange this for the permanent access_token. In the Link.js file, update the functional component with the following code:

In the App.js file, update the code as below. This sends the public_token generated by Plaid from the client side to the app server. Make sure you update the props that passes down the .getAccessToken function.

Update the index.js in your server with the code below. This will trigger the server to exchange the public_token for the access_token from Plaid.

You should now be completely connected! Now, let’s get some transactions to appear…

Creating Transactions

Since this post is more about the the flow between Plaid, the app server, and the client and less about React, I provided some code just to show that we can now render transactions.

First, add this toindex.js. The console log on line 14 will show the full JSON object on the console, which is useful if you’d like to adjust any of the data. Note — if you are getting an empty array but no error, you may need to adjust your date range to be sometime within the past 30 days.

To render the transactions to the front end, you’ll need to add the snippet below to App.js. Again, the rest of the code is already in the template I set up.

At this point, you should be able to go through the full Link process and see the transactions! (Reminder — this is a sample account and not my transactions :) )

And there you have it! As you can see, there’s quite a bit of work going on under the hood for what seems like a simple authentication process, but the result is worth it. Once you’re connected to Plaid, there are a lot of financial apps you can build. Again, this is without a database, but I hope this helps you get started!

--

--