Update Plaid Link Component #6362

TomatoToaster · 2021-11-18T16:26:03Z

Details

Refactors this component as functional so we can use the Plaid Hooks.

Fixed Issues

$ https://github.com/Expensify/Expensify/issues/182956

Tests

Same as QA done locally and android

QA Steps

This should be tested on iOS

Create a new user and a workspace in NewDot.
Go to workspace settings and Connect a Bank
Follow the screenshots to go through the plaid oauth setup for PlatypusOAuth bank. You can enter empty fields for Purple OAuth forms like in the screenshots.
Reach the final screenshot where you back to the expensify app

Tested On

Screenshots

Screenshots take a lot of the screen so click here to expand/collapse them!

iOS

(scroll to the bottom)

…update

marcaaron

Gonna test this now, but LGTM. There's a small improvement that could be made in a follow up. Just going to give this a test and then merge if everything looks good.

marcaaron · 2021-11-22T15:45:24Z

src/components/PlaidLink/index.native.js

        const emitter = new NativeEventEmitter(nativeModule);
-        this.listener = emitter.addListener('onEvent', this.onEvent.bind(this));
+        listener = emitter.addListener('onEvent', (event) => {


This looks like it will work, but I noticed there's also this in the docs

https://github.com/plaid/react-native-plaid-link-sdk#to-receive-onevent-callbacks

marcaaron · 2021-11-22T15:59:43Z

Works great on iOS. Testing Android next.

TomatoToaster · 2021-11-22T16:04:45Z

I think we should CP this to Staging so it goes live sooner. But feel free to remove the label if you think otherwise.

github-actions · 2021-11-22T16:05:10Z

⚠️ ⚠️ Heads up! This pull request has the CP Staging label. ⚠️ ⚠️
Merging it will cause it to be immediately deployed to staging, even if the open StagingDeployCash deploy checklist is locked.

marcaaron · 2021-11-22T17:23:28Z

Having some trouble testing Android. I'm not able to create workspace policies for some reason. I think probably there is some issue with my dev environment - working through it now.

marcaaron · 2021-11-22T17:28:31Z

Ok fixed the dev environment issue, but not able to complete the link handoff on Android. I'm just getting this spinner after going through the OAuth flow and it fails with endless spinner when trying to put me back into the app.

What should we try next @TomatoToaster ?

marcaaron · 2021-11-22T17:40:08Z

I think this is probably not working because we are not yet passing the Android package ~~version~~ name?

TomatoToaster · 2021-11-22T17:45:57Z

Hmm which android package do you think we should update?

TomatoToaster · 2021-11-22T17:53:08Z

Updated steps to test this OAuth flow on iOS only for now.

marcaaron · 2021-11-22T17:53:55Z

Sorry, to clarify, we need to specify an android_package name when calling Web-Secure which is com.expensify.chat. And then pass that when calling Plaid_GetLinkToken. But I'm not sure if this has been added on production yet - maybe @Dal-Papa knows?

marcaaron · 2021-11-22T17:57:04Z

FWIW added this and it works on Android for me but we can do this in a follow up.

diff --git a/src/libs/API.js b/src/libs/API.js
index d7d8c6d6b..1d5017601 100644
--- a/src/libs/API.js
+++ b/src/libs/API.js
@@ -883,7 +883,7 @@ function Wallet_GetOnfidoSDKToken() {
  * @returns {Promise}
  */
 function Plaid_GetLinkToken() {
-    return Network.post('Plaid_GetLinkToken', {}, CONST.NETWORK.METHOD.POST, true);
+    return Network.post('Plaid_GetLinkToken', {android_package: 'com.expensify.chat'}, CONST.NETWORK.METHOD.POST, true);
 }

TomatoToaster · 2021-11-22T18:11:45Z

@marcaaron I also updated the podfile/ios package information. I had the podfile and workspace file change when I ran pod install and it wouldn't work on the emulator without these changes. Let me know if I shouldn't include them.

I was able to test this on iOS and it worked with the plaid event emitter changes.

marcaaron · 2021-11-22T18:17:05Z

@marcaaron I also updated the podfile/ios package information. I had the podfile and workspace file change when I ran pod install and it wouldn't work on the emulator without these changes. Let me know if I shouldn't include them.

Hmm seems fine to include or not? I don't know much about podfile tbh but unsure why main should end up different from a local build - maybe the changes were not committed from a previous PR.

marcaaron · 2021-11-22T18:23:13Z

I guess one other thing is that I'm a little confused how this is working and wonder if it will actually work on staging.

If you read this you'll see it mentions linking to a "blank page" -> https://plaid.com/docs/link/oauth/#ios-sdk-react-native-ios

We added this here:

App/apple-app-site-association

Line 16 in 8d0298c

"/partners/plaid/oauth_ios"

But are not passing a redirect_uri here

So why does this still work?

I think (but I'm not sure) it's because we don't need the redirect to actually deliver us to that page - just drop us back into the app (which has already handled the success response). Only thing is... I don't see where we registered /partners/plaid/oauth_ios?

marcaaron · 2021-11-22T18:32:08Z

Also interesting as this blurb says we cannot test "app to app" flows in the sandbox -> https://plaid.com/docs/link/oauth/#app-to-app-authentication

But the Platypus OAuth option seems to work fine 🤔

marcaaron · 2021-11-22T18:44:59Z

I'm good to merge this because I don't think it will break anything, but I think to actually test whether this works we need to try a connection that uses OAuth (and I have a good feeling it won't work).

When using the "Platypus OAuth" test we don't ever really leave the app on iOS so we don't need a redirect_uri - but for other cases we will need to send the universal link as a param which is why we added it to the apple-app-site-association.json.

Update Plaid Link Component (cherry picked from commit 1a8b4fa)

OSBotify · 2021-11-22T21:18:32Z

🚀 Cherry-picked to staging by @marcaaron in version: 1.1.15-21 🚀

platform	result
🤖 android 🤖	success ✅
🖥 desktop 🖥	failure ❌
🍎 iOS 🍎	success ✅
🕸 web 🕸	failure ❌

@Expensify/applauseleads please QA this PR and check it off on the deploy checklist if it passes.

OSBotify · 2021-11-22T21:24:03Z

🚀 Deployed to staging by @marcaaron in version: 1.1.16-0 🚀

platform	result
🤖 android 🤖	success ✅
🖥 desktop 🖥	failure ❌
🍎 iOS 🍎	success ✅
🕸 web 🕸	failure ❌

isagoico · 2021-11-24T00:49:44Z

@marcaaron @TomatoToaster Is this QAble by us? I don't think we have access to the Platypus bank account credentials yet. Let us know if this is internal or not 😬 Thanks in advance!

marcaaron · 2021-11-24T01:02:31Z

Ah can we please test that Chase bank credentials are still working for now?

Also, there are no credentials for Platypus bank account just enter anything and it should succeed.

isagoico · 2021-11-24T01:17:14Z

Ohh ok! Tested it and it works on iOS for the Platypus Bank! 🎉 Also chase bank account credentials are still working

OSBotify · 2021-11-29T18:47:33Z

🚀 Deployed to production by @roryabraham in version: 1.1.16-10 🚀

platform	result
🤖 android 🤖	success ✅
🖥 desktop 🖥	success ✅
🍎 iOS 🍎	success ✅
🕸 web 🕸	success ✅

OSBotify · 2021-11-29T18:47:36Z

🚀 Deployed to production by @roryabraham in version: 1.1.16-10 🚀

platform	result
🤖 android 🤖	success ✅
🖥 desktop 🖥	success ✅
🍎 iOS 🍎	success ✅
🕸 web 🕸	success ✅

Update Plaid Link Component

e7bb233

TomatoToaster self-assigned this Nov 18, 2021

Amal Nazeem added 5 commits November 18, 2021 11:38

remove unused import

796bdc8

Merge branch 'main' of github.com:Expensify/App into amal-plaid-link-…

958e98c

…update

Update Componet to be functional to use useDeepLinkRedirector

843bb91

Fix spacing

bd05f59

Fix style issues

2549f9a

TomatoToaster requested a review from marcaaron November 20, 2021 00:01

TomatoToaster marked this pull request as ready for review November 20, 2021 00:01

TomatoToaster requested a review from a team as a code owner November 20, 2021 00:01

MelvinBot requested review from jasperhuangg and removed request for a team November 20, 2021 00:01

marcaaron reviewed Nov 22, 2021

View reviewed changes

TomatoToaster added the CP Staging label Nov 22, 2021

jasperhuangg removed their request for review November 22, 2021 17:13

Use emitter hook instead

29c9816

marcaaron previously approved these changes Nov 22, 2021

View reviewed changes

Update package information for iOS

5b586a5

TomatoToaster dismissed marcaaron’s stale review via 5b586a5 November 22, 2021 18:09

marcaaron approved these changes Nov 22, 2021

View reviewed changes

marcaaron merged commit 1a8b4fa into main Nov 22, 2021

marcaaron deleted the amal-plaid-link-update branch November 22, 2021 20:04

github-actions bot pushed a commit that referenced this pull request Nov 22, 2021

Merge pull request #6362 from Expensify/amal-plaid-link-update

ae4dac7

Update Plaid Link Component (cherry picked from commit 1a8b4fa)

This was referenced Nov 22, 2021

🍒 Cherry pick PR #6362 to staging 🍒 #6405

Merged

Deploy Checklist: New Expensify 2021-11-22 #6399

Closed

marcaaron mentioned this pull request Nov 22, 2021

Get parameters for Plaid link token based on platform #6411

Merged

5 tasks

nickmurray47 mentioned this pull request Dec 1, 2021

[PlaidLink OAuth] Add web redirect_uri to /bank-accounts page #6259

Merged

29 tasks

OSBotify mentioned this pull request Aug 16, 2022

Deploy Checklist: New Expensify 2022-08-04 #10253

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Update Plaid Link Component #6362

Update Plaid Link Component #6362

TomatoToaster commented Nov 18, 2021 •

edited

Loading

marcaaron left a comment

marcaaron Nov 22, 2021

marcaaron commented Nov 22, 2021

TomatoToaster commented Nov 22, 2021

github-actions bot commented Nov 22, 2021

marcaaron commented Nov 22, 2021

marcaaron commented Nov 22, 2021

marcaaron commented Nov 22, 2021 •

edited

Loading

TomatoToaster commented Nov 22, 2021

TomatoToaster commented Nov 22, 2021

marcaaron commented Nov 22, 2021

marcaaron commented Nov 22, 2021

TomatoToaster commented Nov 22, 2021

marcaaron commented Nov 22, 2021

marcaaron commented Nov 22, 2021

marcaaron commented Nov 22, 2021

marcaaron commented Nov 22, 2021

OSBotify commented Nov 22, 2021

OSBotify commented Nov 22, 2021

isagoico commented Nov 24, 2021

marcaaron commented Nov 24, 2021

isagoico commented Nov 24, 2021 •

edited

Loading

OSBotify commented Nov 29, 2021

OSBotify commented Nov 29, 2021

Update Plaid Link Component #6362

Update Plaid Link Component #6362

Conversation

TomatoToaster commented Nov 18, 2021 • edited Loading

Details

Fixed Issues

Tests

QA Steps

Tested On

Screenshots

iOS

marcaaron left a comment

Choose a reason for hiding this comment

marcaaron Nov 22, 2021

Choose a reason for hiding this comment

marcaaron commented Nov 22, 2021

TomatoToaster commented Nov 22, 2021

github-actions bot commented Nov 22, 2021

marcaaron commented Nov 22, 2021

marcaaron commented Nov 22, 2021

marcaaron commented Nov 22, 2021 • edited Loading

TomatoToaster commented Nov 22, 2021

TomatoToaster commented Nov 22, 2021

marcaaron commented Nov 22, 2021

marcaaron commented Nov 22, 2021

TomatoToaster commented Nov 22, 2021

marcaaron commented Nov 22, 2021

marcaaron commented Nov 22, 2021

marcaaron commented Nov 22, 2021

marcaaron commented Nov 22, 2021

OSBotify commented Nov 22, 2021

OSBotify commented Nov 22, 2021

isagoico commented Nov 24, 2021

marcaaron commented Nov 24, 2021

isagoico commented Nov 24, 2021 • edited Loading

OSBotify commented Nov 29, 2021

OSBotify commented Nov 29, 2021

TomatoToaster commented Nov 18, 2021 •

edited

Loading

marcaaron commented Nov 22, 2021 •

edited

Loading

isagoico commented Nov 24, 2021 •

edited

Loading