How to Use Plaid with React in Under 30 Minutes (2024)

Odds are if you’ve ever linked your bank account to an app, you’ve come into contact with Plaid.

Plaid powers some of the largest fintech companies in the world, including Venmo, Coinbase, Robinhood, and Acorns.

💵 Plaid has investments from Citi, American Express, Google and Goldman Sachs, and was most recently valued at $2.65B.

From a technical standpoint, Plaid allows developers to securely access financial data from a users bank account. This data includes transactions, balances, investments, income and more. Oh, and Plaid links with over 10,000 financial institutions.

If you’re a developer that has any interest at all in the financial space, then you’d be doing yourself a favor to learn the basics of Plaid.

When I wanted to get started with Plaid in React, it took me a few days to find good resources and finally get things set up.

This article will save you time spent researching, and get you up and running with Plaid in under 30 minutes.

Shameless Plug 🔌 — I hand-pick the best remote developer jobs and send them out in a newsletter each Thursday. If you want to get the hottest jobs in your inbox every week, check out my remote dev jobs newsletter here.

To get familiar with how Plaid works, we’re going to make a super simple app that displays a users bank transactions to the console.

To keep the tutorial short, we’re going to focus on the setup of Plaid in React. This will give you a good understanding of how to get things rolling — and you can use the code we write together as a starting point to build your own applications!

We’ll be using the following technologies:

• Express & Node for our backend
• React for our frontend
• Plaid to let users link their bank accounts
• react-plaid-link to easily integrate our React component with Link

The app will allow you to:

• Link a bank account
• View transactions inside of your console

The goal of this tutorial is to get you working with Plaid as quickly as possible, so we’re not going to build out a frontend that displays the transactions.

To make calls to the Plaid API, and thus get the data from your users’ bank, you need an access token. To get the access token, you first create a public token (which expires after 30 minutes) and then exchange it for an access token.

Plaid has an awesome drop-in module called Link, which simplifies this entire process.

In Plaid’s words:

“Plaid Link is a drop-in module that provides a secure, elegant authentication flow for each institution that Plaid supports. Link makes it secure and easy for users to connect their bank accounts to Plaid.”

Below is an image of the Link module.

Great! Now you know what Link is, and that it’s pretty awesome.

We’re going to start from scratch. So let’s go ahead and run Create React App and cd into the folder.

npx create-react-app react-plaid-setup
cd react-plaid-setup

Now that we have our app created, let’s learn a little more about how Plaid works.

🚨 Quick Note: The explanations in this post are aimed to grasp the core concepts quickly and will not encapsulate all of the information that you should know if you’re building a production application. I highly suggest you read the docs after this tutorial to get a complete view of the process.

Let’s open up our React App in a code editor and get started on the server.

1. Install dependencies

If you haven’t already, make sure that Node.js is installed on your system.

Next, let’s install Express.js:

npm install express

2. Create files and paste in the code

Now that we have everything installed, go ahead and create a folder titled server in the root of your app, and then add a JavaScript file titled index.js inside of the server folder you just created.

Add the following code to your index.js file:

const express = require("express");const app = express();const PORT = 4090;app.use(express.json());app.listen(PORT, () => {console.log(`Server running on ${PORT}`);});

The code above creates a server on port 4090, and then (if successful) will log to the console when we get to that point.

3. Add a proxy to package.json

To make sure that our API calls can hit the endpoints, we’re going to add a proxy to our package.json file. Below the last object in your package.json, add the proxy to our server port like shown below.

"proxy": "http://localhost:4090"

4. Make sure the server is running

Let’s check and make sure everything’s working correctly by running nodemon. From your terminal, inside of the root directory, run the command:

nodemon server/

You should see something similar to the following logged to your terminal:

[nodemon] 1.18.10
[nodemon] to restart at any time, enter `rs`
[nodemon] watching: *.*
[nodemon] starting `node server/`
Server running on 4090

If you see that, awesome! Let’s move on. If you don’t, make sure you have nodemon installed by running this command:

npm install nodemon

Our server is now up and running, so let’s switch our focus to the frontend.

1. Get Your API Keys 🔑

First things first, let’s go ahead and get your API keys from Plaid. To do that, follow these steps:

• Go to Plaid’s website and create an account
• Click “Get API Keys” and get your keys for the Sandbox Environment. If you can’t find it, just click here and you’ll go straight to your keys.
• Take note of your client_id, public_key, and secret_key.

2. Install dependencies

First, let’s install Plaid:

npm install plaid

We’re going to be using the npm package react-plaid-link, which lets us easily integrate with the Plaid Link module. To install it, just run:

npm install react-plaid-link --save

We’ll also be using axios to connect our frontend to our backend. Install it with:

npm install axios

3. Create your component and paste in the code

Inside of your src folder, create a folder called components, then create a JavaScript file titled Link.js inside of thecomponents folder.

Paste the following code into your Link.js file:

🚨 Make sure to add your custom public key on line 41 🚨

🚨 Make sure to add your custom public key on line 41 🚨

This code sets up a Link module on your frontend, which creates a public token and sends it to your backend. It also has a GET request which will allow us to hit the backend endpoint that actually fetches the transactions and displays them to the console.

This is the extent of your frontend code, and you’ll start to see how it works once we finish up the backend.

Now we’re going to create some endpoints, fetch the data, and finish up by displaying it in our console.

1. Create endpoints, finalize our index.js file

Add the following bolded code to your index.js file:

const express = require("express");const app = express();const PORT = 4090;const {
receivePublicToken,
getTransactions
} = require("./controllers/controller");app.use(express.json());// Get the public token and exchange it for an access token
app.post("/auth/public_token", receivePublicToken);// Get Transactions
app.get("/transactions", getTransactions);app.listen(PORT, () => {console.log(`Server running on ${PORT}`);});

2. Install dependencies and create a controller file

We’ll be using Moment.js to handle dates and times. Install it with:

npm install moment --save

Inside of your server folder, create a folder called controllers, then create a JavaScript file titled controller.js inside of thecontrollers folder.

Paste the following code into your controller.js file:

🚨 Make sure to add your custom API keys to lines 4, 5 and 6 🚨

🚨 Make sure to add your custom API keys to lines 4, 5 and 6 🚨

The above code is modified from the Plaid API Quickstart Docs.

This code receives the public token that we got from the frontend using Link, exchanges it for an access token, then uses that access token to make an API call and fetch the users bank transactions from the last 30 days.

In the next step, we’ll display our Link component. This will let us move through the whole process and display the transactions in the console.

1. Remove boilerplate code from App.js and display the Link component

Navigate to App.js, remove all of the code, and paste in the following code:

2. Run it!

Run the following command to open up your application in localhost:

npm start

Click on the button that reads “Open Link and connect your bank!”

Login to any bank with the following credentials:

Username: user_good

Password: pass_good

After you successfully link a bank account, hit the “Get Transactions” button.

🔥 You should now be able to see the transaction objects logged into your console!

If you’re using Visual Studio Code, it’ll look something like this:

Remember that this console.log is coming from line 57 in controller.js — manipulate and play around with it however you like!

🎉 Congrats! You’ve successfully linked Plaid with React, used Link to connect a bank account, and fetched transaction data from a bank account.

You’ve just begun scratching the surface of what Plaid is capable of — but the real limitation is your mind. The possibilities are endless with an API like this, and I’m excited to see what you can build on it!

💡 If you’re not sure of what to build, but want to keep learning about the Plaid API, here are some ideas:

• A dashboard that shows transactions from all of a users bank accounts
• A dashboard that shows the users total net worth, by linking in all of their accounts
• A money manager that shows a user what categories they are spending the most in (like Mint)
• A personal finance helper that sends an email every time a person spends over $50 (using Nodemailer)

I hope this article helped you get a head start on building with Plaid in React.

Go build something awesome!