Code Monkey home page Code Monkey logo

react-native-plaid-link-sdk's Introduction

Getting Started version

In your react-native project directory:

npm install --save react-native-plaid-link-sdk

For a full guide and migration guides please vist our docs

iOS setup

Add Plaid to your project’s Podfile as follows (likely located at ios/Podfile). The latest version is version.

pod 'Plaid', '~> <insert latest version>'

Then install your cocoapods dependencies:

(cd ios && pod install)

That's it if using a recent react-native version with autolinking support.

Manual Integration

If using a version of react-native without autolinking support, then you will need to:

react-native link react-native-plaid-link-sdk

followed by

  1. In Xcode, in the project navigator, right click LibrariesAdd Files to [your project's name]
  2. Go to node_modulesreact-native-plaid-link-sdkios and add RNLinksdk.xcodeproj
  3. In Xcode, in the project navigator, select your project. Add libRNLinksdk.a to your project's Build PhasesLink Binary With Libraries
  4. Run your project (Cmd+R)<

OAuth Requirements

For iOS OAuth to work, specific requirements must be met.

  • Redirect URIs must be registered, and set up as universal links (docs)
  • Deep linking must be set up in the application delegate class (see code sample below)
  • The exported useDeepLinkRedirector method must be invoked. If you are using the PlaidLink component it is invoked automatically, but if you are calling openLink programatically you must invoke useDeepLinkRedirector.
#import "AppDelegate.h"
...
#import <React/RCTLinkingManager.h>

...

@implementation AppDelegate

...

- (BOOL)application:(UIApplication *)app
            openURL:(NSURL *)url
            options:(NSDictionary<UIApplicationOpenURLOptionsKey,id> *)options
{
  return [RCTLinkingManager application:app openURL:url options:options];
}

// Needed for universal links, which are required for Plaid iOS OAuth.
- (BOOL)application:(UIApplication *)application
            continueUserActivity:(NSUserActivity *)userActivity
            restorationHandler:(void (^)(NSArray<id<UIUserActivityRestoring>> * _Nullable))restorationHandler
{
  return [RCTLinkingManager application:application
                   continueUserActivity:userActivity
                     restorationHandler:restorationHandler];
}

...

@end

Android setup

Autolinking unfortunately isn't supported for Android, because the SDK makes use of TurboModules to speed up app cold starts. Have a look at #306 for more context.

1. Register your app id

  1. Log into your Plaid Dashboard at the API page
  2. Next to Allowed Android package names click "Configure" then "Add New Android Package Name"
  3. Enter your package name, for example com.plaid.example
  4. Click "Save Changes", you may be prompted to re-enter your password

2. Add PlaidPackage to your application

  1. Go to android/app/src/main/java/<AppName>/MainApplication.java
  2. Add import com.plaid.PlaidPackage; to the imports section
  3. Add packages.add(new PlaidPackage()); to List<ReactPackage> getPackages();

3. Configure Gradle

  1. Go to the project level android/app/build.gradle
  2. Make sure you are using a min sdk >= 21
  3. Add the following dependencies:
dependencies {
    // ...
    implementation project(':react-native-plaid-link-sdk')
}
  1. Go to android/settings.gradle
  2. Add the following lines:
include ':react-native-plaid-link-sdk'
project(':react-native-plaid-link-sdk').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-plaid-link-sdk/android')
  1. (Optional) Run npx react-native link

React native setup

To initialize PlaidLink, you will need to first create a link_token at /link/token/create. After creating a link_token, you'll need to pass it into your app and use it to launch Link:

import { Text } from 'react-native';
import { PlaidLink, LinkSuccess, LinkExit } from 'react-native-plaid-link-sdk';

const MyPlaidComponent = () => {
  return (
    <PlaidLink
        tokenConfig={{
            token: "#GENERATED_LINK_TOKEN#",
        }}
        onSuccess={(success: LinkSuccess) => { console.log(success) }}
        onExit={(exit: LinkExit) => { console.log(exit) }}
    >
        <Text>Add Account</Text>
    </PlaidLink>
  );
};

PlaidLink wraps the view you provide as a child with a Pressable component and intercepts the onPress event.

OAuth requirements

For Link Token based OAuth support, you must configure your link_token with a redirect_uri to support OAuth on iOS. Other than setting the redirect_uri, which must be a universal link, when you create the link_token no further configuration is required. Notably, no props are required on the React Native side.

For non-Link Token based OAuth support, you must pass two props to the PlaidLink React Native component:

  1. oauthRedirectUri this is the same uri you would pass to the redirect_uri for Link Token based OAuth. It must be registered as a universal link.
  2. oauthNonce this is a 16 character nonce.

In order for the React Native app to respond to the universal link, you will need to update your AppDelegate to inform the React Native Linking library when the universal link is received. See OAuth requirements for more information.

To receive onEvent callbacks:

The React Native Plaid module emits onEvent events throughout the account linking process — see details here. To receive these events in your React Native app, wrap the PlaidLink react component with the following in order to listen for those events:

import React from 'react';
import { Text, NativeEventEmitter, NativeModules, Platform } from 'react-native';

class PlaidEventContainer extends React.Component {

  componentDidMount() {
    const emitter = new NativeEventEmitter(Platform.OS === 'ios' ? NativeModules.RNLinksdk : NativeModules.PlaidAndroid);
    this._listener = emitter.addListener('onEvent', (e) => console.log(e));
  }

  componentWillUnmount() {
    if (this._listener) {
      this._listener.remove();
    }
  }

  ...
}

You can also use the usePlaidEmitter hook in react functional components:

  usePlaidEmitter((event: LinkEvent) => {
    console.log(event)
  })

Versions and release candidates

We create release candidates (e.g. 7.0.0-rc1) as beta previews for developers. These are helpful for customers who either are 1. waiting for a specific fix or 2. extremely eager for specific features. They do not hold the same quality guarantee as our official releases, and should NOT be used in production. The official releases come ~2 weeks after the first release candidate (rc1).

The latest stable version is the highest version without the suffix -rcX.

Updating from previous versions.

When upgrading from a previous major version of this library, see the following notes for additional instructions:

Version compatibility

React Native SDK Android SDK iOS SDK Status
8.x.x [3.10.1+] >=3.1.0 Active, supports Xcode 14
7.x.x [3.2.0+] >=2.0.11 Active, supports Xcode <= 13
6.x.x [3.0.0-3.2.0) >=2.0.1 Deprecated
5.x.x [2.1.0-3.0.0) >=1.1.34 Deprecated
4.x.x [2.0.0-2.1.0) <=1.1.33 Deprecated
3.x.x [1.0.0-2.0.0) <=1.1.33 Deprecated
2.x.x [0.3.0-1.0.0) <=1.1.27 Deprecated
1.x.x [0.1.0-0.3.0) <=1.1.24 Deprecated

react-native-plaid-link-sdk's People

Contributors

amytang0 avatar zsweigart avatar jeroenmols avatar pladaub avatar wkiefer avatar afh avatar phoenixy1 avatar jhurray avatar jwoogerd avatar prometheas avatar otherchen avatar krisztiaan avatar vafada avatar dustinhorton avatar averyv avatar shaharyarmaroof avatar abejfehr avatar artemmysik avatar caroaguilar avatar celwell avatar yawnr avatar pbernasconi avatar shaharyarmaroof-em avatar stoyand avatar taylor123 avatar jamesrperkins avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.