⚛️ 💸 Simple hooks for Plaid open banking on React Native.

Overview

react-native-use-plaid

⚛️ 💸 Simple hooks for Plaid open banking on React Native, which enables you to very quickly integrate with a user's bank account via a user-friendly onboarding process. What's contained here is the raw logic; you can customize the generic hooks arbitrarily for your own applications, navigation state and user journeys.

🚀 Getting Started

Using Yarn:

yarn add react-native-use-plaid react-native-webview

This project depends on the react-native-webview Native Module.

For vanilla React Native projects, you can install this as usual with yarn add react-native-webview. For Expo, you can use npx expo install react-native-webview.

✍️ Usage

This package manages user bank authentication using Plaid Link, which is used to orchestrate the authentication and permissions process necessary to interact with a user's bank account, to do things like view their transaction history or request a payment.

We provide the appropriate life cycle hooks to easily initiate, persist, consume and relinquish connections to user bank accounts. Additionally, all user-facing onboarding has been expressed using Plaid's WebView-optimized onboarding process, making the integration process as straight-forward as possible.

1. Configuring the <PlaidProvider /> 🔧

First you'll need to wrap your application in a PlaidProvider, which manages global application state for all login processes:

import * as React from 'react';
import {PlaidProvider} from 'react-native-use-plaid';

import {MyNativeApp} from './src';

export default function App(): JSX.Element {
  return (
    <PlaidProvider
      redirectUri="https://cdn.plaid.com/link/v2/stable/link.html" /* example */
      basePath="sandbox"
      clientName="cawfree's kitchen"
      redirectUri="<your-redirect-uri>"
      clientId="<your-client-id>"
      clientSecret="<your-client-secret>">
      <MyNativeApp />
    </PlaidProvider>
  );
}

This part is pretty straight forward; though you'll need to head over to the Plaid Developer Portal and create some API keys for your application.

For each application instance you register on Plaid, you're going to be given three different API keys for three different environments; sandbox, development and production. You'll see in the example above, we've configured our PlaidProvider's basePath to work using sandbox credentials.

⚠️ You must configure a redirectUri for your project from your project settings in Plaid, which is configured under the API tab in your Team Settings.

2. Connecting to accounts 👛

Once your application is wrapped in a PlaidProvider, you're free to start connecting with Plaid from any child component in your application.

To manage a connection, we call the usePlaidLinkState hook:

import {usePlaidLinkState} from 'react-native-use-plaid';

const client_user_id = '$myApplicationSpecificUserId';

const [state] = usePlaidLinkState({client_user_id});

The returned state will delcare how far along in the connection process your user currently is.

In Plaid, we identify users using the client_user_id field; this is a unique identifier for an individual user native to your application stack.

To check if a client_user_id's account is connected, you can use:

import {PlaidLinkStage} from 'react-native-use-plaid';

const {stage} = state;

const isConnected = stage === PlaidLinkStage.SUCCESS;

When a user is connected, their state will contain their Plaid Access Token:

import {PlaidLinkSuccessState} from 'react-native-use-plaid';

const {access_token} = state as PlaidLinkSuccessState;

The access_token can be used to perform operations on a user account, for example, listing their transactions using the client instance returned by a call to usePlaidLinkState:

import {PlaidLinkStage, usePlaidLinkState} from 'react-native-use-plaid';

const [state, {client}] = usePlaidLinkState({client_user_id});

const {stage} = state;

if (stage !== PlaidLinkStage.SUCCESS) return;

const {data} = await client.transactionsGet({
  access_token: state.access_token,
  start_date: '2018-01-01',
  end_date: '2018-02-01',
});

Note: If we've checked that stage === PlaidLinkStage.SUCCESS, it is not necessary to cast the state as PlaidLinkSuccessState since this type will be automatically inferred.

Finally, we need to see how to actually connect to a user. This is also done using the usePlaidLinkState hook, where we can call the connect function:

import {CountryCode, Products} from 'plaid';

const [, {connect, disconnect}] = usePlaidLinkState({
  client_user_id,
});

await connect({
  country_codes: [CountryCode.Gb],
  language: 'en',
  products: [Products.Auth, Products.Transactions],
});

When you call connect, react-native-use-plaid will manage the entire authentication process based on the given parameters end-to-end.

There is only a single obligation you have as the implementor: you need to find somewhere to render a PlaidProviderLinkWebView:

import {PlaidProviderLinkWebView} from 'react-native-use-plaid';

return (
  <PlaidProviderLinkWebView
    client_user_id="$myApplicationSpecificUserId"
  />
);

The PlaidProviderLinkWebView is the user-facing component of Plaid Link.

All you need to do is present it; you could mount it in a <Modal visible />, navigate to a dedicated screen using react-navigation, you can use any mechanism you desire to present this content to the user; what's important is you do render it!

Without the PlaidProviderLinkWebView visible to the user, they will be unable to complete the authentication process. Please check the example for a simple demonstration of this concept.

3. Persistence 💾

Although the link process is relatively quick and simple for a user, it's something we should avoid doing too often since this inconveniences the user.

In the PlaidProvider, you can specify three additional properties to help you resume authentication state:

import * as React from 'react';
import {PlaidProvider} from 'react-native-use-plaid';

export default function App(): JSX.Element {
  return (
    <PlaidProvider
      // On launch, we can synchronously resume user sessions
      // for individual users if we pass an access_token. Here
      // we can track the authentication state of multiple users.
      initialAccessTokens={React.useMemo(() => ({
        '$myApplicationSpecificUserId': 'someAccessTokenFromPreviousSession',
      }), [])}
      // When a user begins a new session, onConnect is called providing
      // the client_user_id and their access_token.
      onConnect={React.useCallback(({client_user_id, access_token}) => {
        console.log(`${client_user_id}'s access_token is "${access_token}"!`);
      }, [])}
      // When a user disconnects, `onDisconnect` is called.
      onDisconnect={React.useCallback(({client_user_id}) => {
        console.log(`${client_user_id} has disconnected.`);
      }, [])}
    />
  );
}

In combination with a client persistence library such as react-native-async-storage or react-native-mmkv, user session state can be stored between launches of your application.

✌️ License

MIT

You might also like...
A text-to-speech library for React Native.

React Native Speech React Native Speech is a text-to-speech library for React Native. Documentation Install Usage Example Methods License Install npm

A Recorder element for react-native

react-native-screcorder A react native component to capture pictures and record Video with Vine-like tap to record, animatable filters, slow motion, s

A modern and comprehensive CameraRoll/iCloud-library-API for React Native 📸 📹

react-native-photos-framework Example project NOTE: This is not a GUI-component, it's an API. The example project just shows off some of the the capab

Small audio player library for react native

react-native-audioplayer Small audio player library for react native ##Installation First you need to install react-native-audioplayer: npm install re

Media player for React Native

React-Native-Player Media Player for React-Native Only Android support now. Integrate Android Install via npm npm i react-native-player --save-dev Add

VLC Player for react-native

react-native-vlc-player Getting started $ npm install react-native-vlc-player --save Dependencies $ npm install react-native-vector-icons --save Manua

React Native VolumeView component
React Native VolumeView component

React Native VolumeSlider component MPVolumeView bridge to React Native (NOTE: MPVolumeView works only on physical devices) Default styles Custom styl

react-native-sound demo project for iOS and Android
react-native-sound demo project for iOS and Android

react-native-sound-demo react-native-sound demo project for iOS and Android. There are a series of basic test for different audio formats and location

🖼 A React Native component to display a gallery of images.
🖼 A React Native component to display a gallery of images.

react-native-interactive-image-gallery A React Native component to display a gallery of images. Getting started $ yarn addreact-native-interactive-ima

This repo has been moved to https://github.com/react-native-webrtc/react-native-incall-manager

react-native-incall-manager Handling media-routes/sensors/events during a audio/video chat on React Native Purpose: The purpose of this module is to h

zxcpoiu 28 Dec 22, 2021
Native Video editing/trimming/compressing :movie_camera: library for React-Native

react-native-video-processing Getting Started npm install react-native-video-processing --save yarn add react-native-video-processing You can check te

Shahen Hovhannisyan 1.1k Dec 27, 2022
A Camera component for React Native. Also supports barcode scanning!

React Native Camera ?? ?? Looking for maintainers and backers ?? ?? See this issue We are looking for maintainers for this package, or to depreciate t

null 9.6k Jan 6, 2023
A Video component for react-native

react-native-video A <Video> component for react-native, as seen in react-native-login! Version 5.x recommends react-native >= 0.60.0 for Android 64bi

null 6.4k Jan 5, 2023
React Native module for playing sound clips

react-native-sound React Native module for playing sound clips on iOS, Android, and Windows. Be warned, this software is alpha quality and may have bu

Zhen Wang 2.6k Jan 3, 2023
Audio recorder library for React Native

Record audio in iOS or Android React Native apps. MAINTENANCE STATUS This project is no longer actively maintained by me, the original author. I will

Joshua Sierles 1.1k Nov 29, 2022
Cross-platform audio library for React Native

This is a cross-platform (Android and iOS) audio library for React Native. Both audio playback and recording is supported. In addition to basic functi

null 984 Dec 20, 2022
A high performance, easy to use, rock solid camera library for React Native apps.

?? React Native Camera Kit A high performance, easy to use, rock solid camera library for React Native apps. Cross Platform (iOS and Android) Optimize

Tesla, Inc. 1.9k Jan 3, 2023
iOS & Android react native module to play an audio stream, with background support and media controls

react-native-audio-streaming THIS PROJECT IS NOT MAINTAINED react-native-audio-streaming is not maintained anymore. The main purpose was to play shout

Thibault Lenclos 769 Jan 2, 2023
📷 A React Native component providing images selection from camera roll

react-native-camera-roll-picker CameraRoll Picker component for React native Requires react-native >=0.43.0 Add to Project Install component through n

Jean Pan 414 Oct 28, 2022