Layer Quickstart Application

This application demonstrates how you can use Layer to quickly and easily sign up a new user. It demonstrates...

• How to use Layer's eligibility API to determine if a user is eligible for Layer
• Using Layer to gather both identity and connected bank information for a user
• Adding Enhanced Autofill as a backup method to retrieve identity information
• Falling back to your application's traditional sign-up flow if the user isn't eligible for Layer or EA.
• How to initialize Link as soon as possible to minimize latency

This app uses NodeJS on the backend, and React + Vite + TypeScript on the frontend.

Getting started

Installation

Install all the requirements

npm i

Setting up your Plaid environment

Copy your .env.template file over to .env

cp .env.template .env

Next, go to the Keys panel of the Plaid Dashboard, and copy over the Client ID and Secret values into your .env file.

Finally, go to the Plaid Dashboard and on the left-hand side, click on Layer -> Layer Template Editor to create a new template. If you don't see this option, talk to your Account Manager or the Sales team to have Layer activated for your account.

• Feel free to select whatever values you'd like in the Basic Setup panel.
• In the Eligibility panel, leave "Attempt to collect user identity" checked. If you wish to use Extended Autofill, set "Collect financial accounts" to optional. Leave "Plaid products" set to its default value.
• Leave all other options in the Intro and Financial Accounts set to their default values. (Or change them if you feel like experimenting!)
• Click Publish Changes, and then make sure to copy the Template ID. Paste that value into your .env file.

To run

You can start both the client and server in a single command by entering:

npm start

This will run vite on the front-end (which will automatically reload changes), and nodemon on your server (which will automatically reload changes if anything in the /server directory changes)

You can then view the running application by visiting the URL generated by your client. By default, this is http://localhost:5173/

If you wish to start the two services separately, you may do so by entering in two different terminal windows:

npm run start:server

and

npm run start:client

Using the application

The Layer application represents a situation where a user is not signed into your app and is creating an account for the first time. You will be using Layer to speed up the process by retrieving their identity information and also connecting to a financial institution that the user has connect to in the past.

To see Layer in action:

• After clicking the Create new account button, enter a phone number that is in Layer's system, such as 415-555-0011.
• Complete the Layer process by entering the SMS code (123456) and agreeing to share your information
• When you're done, the server will make a call to Plaid and retrieve the user's identity information, as well as some basic information about the financial institution that Plaid has connected to.

To see Extended Autofill in action:

• After clicking the Create new account button, enter a phone number that is not in Layer's system, such as 415-555-0000.
• Enter a birthday that represents an Extended Autofill user, such as 01/18/1975.
• Complete the Layer process, by entering the SMS code (123456) and agreeing to share your information
  • If you do not see Layer appear here, make sure you set "Collect financial accounts" to optional in the Layer Template Editor.
• When you're done, the server will make a call to Plaid and retrieve the user's identity information.
  • You will not receive any connected financial institutions. This is typical for Extended Autofill.

How does it work?

We recommend reading the Layer documentation for a complete understanding of the Layer process. But here's a quick summary of what this application does:

• As soon as the application sees it might not have a signed-in user, the server makes a call to /session/token/create.
• This generates a Link token, which the server passes to the client. The client, in turn, initializes Link and generates a linkHandler by calling usePlaidLink, passing in a Link configuration object.
• After the user submits their phone number, the client calls submit on the linkHandler, passing in the phone number.
  • This will trigger a LAYER_AVAILABLE event if the user is eligible for Layer (that is, they're in Plaid's system and Plaid has all of the data that you marked as required in your template). Otherwise, it will trigger a LAYER_NOT_AVAILABLE event.
• If the user is not eligible for layer, the client will ask the user for their date of birth, and then make a second submit call on the linkHandler, passing in the birthdate.
  • This will trigger a LAYER_AVAILABLE event if the user is eligible for Extended Autofill (that is, Plaid is capable of retrieving all of the data that you marked as required in your template). Otherwise, it will trigger a AUTOFILL_NOT_AVAILABLE event.
• If the user is not eligible for Layer or Extended Autofill, the application shows the user a standard sign-up form, and the user can complete sign-up the old fashioned way.
• If the user is eligible for either Layer or Extended Autofill, the client calls open on the linkHandler, which displays the Layer UI. The user goes through the process of confirming their phone number and agreeing to share their information with your application.
• Upon successfully completing Link, the client is left with a public token. This token is passed down to the server, which calls /user_account/session/get with this token. The server receives the identity information that the user chose to share, along with an item_id and access_token, if available, for the connected financial institution.
• The server uses the access_token to make a call to /accounts/get to retrieve basic information about the connected bank and its accounts.
  • Typically you would save this information, including the access_token, in a database somewhere. In our application, our server simply sends that information back to the client.