How to establish a Link to Plaid’s API using ReactJS and Node.JS

For those that don’t know, Plaid is a company that created the infrastructure to connect a users financial information to applications such as Venmo. Their API allows developers to connect their own applications to users’ bank accounts without actually having to go through every single bank’s API (many banks don’t actually allow small projects to connect to their API’s without submitting a request and being approved).

To get started you will need to register an account with Plaid. I won’t document the process of registering an account, but you will need to do so in order to gain access to developer keys to access their API. Feel free to go through their Quick Start project to gain an understanding of how their Link integration works!

Plaid Documentation: https://plaid.com/docs/

A “Link” is the client-side component that your users will interact with in order to link their accounts to Plaid and allow you to access their accounts via the Plaid API. I created a React component that will serve as a quick-drop in feature that will establish a Link connection to be able to actually make API calls; the use of Plaid’s API all starts with the Link! This year Plaid recently changed their token flow and switched from having a public_token to using a new link_token. Unfortunately their community links for ReactJS were still using the public_token flow which forced me to have to approach this project without clear guidance so hopefully this article will serve as a guide for someone else :)

Project Setup

1. Create your React app by using the create-react-app package. (https://github.com/facebook/create-react-app)

2. After your project is created, we will need to add a .env file and a server.js file to the root of the folder.

• Add a ‘.env’ file, this is where we will add in our global variables to create our Plaid client. Go ahead and populate this file with the ‘example.env’ file found in Plaids QuickStart repo (https://github.com/plaid/quickstart/blob/master/.env.example) and plug in your own ClientId and ClientSecret for the sandbox environment. I chose to rename my variables to contain REACT_APP_ since that is standard syntax for create-react-app .env variables.

• Add a file called ‘server.js’, this is where will create our node.js server that will serve as our middleware for this project.
• Take notice how we use the variables that we set in our .env file to create our Plaid client. The client will be used to make api calls later on. We will look further into the endpoints later on.

3. Now that both of these files have been added to the root folder, you should be able to run your React app by running “npm start” in your terminal and start your server by running “node server.js”. The React app will run on port 3000 and the server will run on port 4090.

Link Flow

Before we break down the React component, lets review the Link flow for Plaid’s API.

The diagram below shows a model of how Link is used to obtain a public_token, which can then be exchanged for an access_token, which is used to authenticate requests to the Plaid API.

The Plaid flow begins when your user wants to connect their bank account to your app.

1. Make a request to create a link_token and pass the temporary token to your app's client.

2. Use the link_token to open Link for your user. In the onSuccess callback, send the temporary public_token to your app's server.

3. Make a request to exchange the public_token for a permanent access_token and item_id for the new Item.

4. Store the access_token and use it to make product requests for your user's Item.

In code, this flow is initiated by creating a link_token and using it to initialize Link. The link_token can be configured with the Plaid products you will be using and the countries you will need to support. Once the user has logged in via Link, Link will issue a callback containing a public_token. The exact details of this flow, including how to initialize Link, will vary by platform. For detailed instructions, see the page for your specific platform.

The React Link Component

Now that our react app and server is set up, and we have a grasp on the link flow, lets dive into the Link component.

1. Create a folder to hold your react app’s components and create a class based component called ‘Link.jsx’.

• We will be using the npm package “react-plaid-link” that acts as a drop in function for React to establish the Link connection.

1. The first step of the link flow is to call the endpoint that creates a link token.

• In our componentDidMount() function we use axios to make a post request to our node server’s “/create_link_token” endpoint. Referring back to our servers code, we see that this endpoint uses the Plaid client to call Plaid’s API to create a link token and return the token to the front end in JSON notation.
• Once the link_token is returned to the front end, we will set our components “linkToken” state to the tokens value.

2. The second step of the flow is to open a Link connection by passing in the link token we set in our state to our <PlaidLink> component and then trade it for a public token in the OnSuccess callback function.

• Set the token prop of the <PlaidLink> component to your state variable to open the Link connection.
• When a Link connection is successfully opened through the use of the <PlaidLink> component, the public token will be passed in through props of the OnSuccess callback function.

3. The third step of the flow is to trade our public token for an access token.

• In our function handleOnSuccess() we again use axios to make a post request to our servers “/exchange_public_token” endpoint. The endpoint will call upon the Plaid API to trade the public token that we pass in through the post request’s body and return an access token in place.

4. The fourth and final step of the link flow is to store our access token.

• Where you choose to store your access token is a personal choice that you should make while considering and measuring your apps security and risk tolerance. For the sake of this tutorial I chose to store it in session storage.

Once you store your access token you will be able to make calls to the Plaid API and get financial data. This is the part that really gets fun, you can make a dashboard of users account balances, view transactions, monitor activity and so much more! I hope this article helps you get started and connected to Plaid.. now go build something GREAT!