Planned support for Managed Expo apps?

Momics commented 4 years ago

First of all, thanks for the great work on the Plaid platform!

I've been fiddling around with the Plaid API today, using the web and react native demo's. They all work great. However, when trying to integrate Plaid Link with an Expo RN app it throws an unhandled promise rejection as detailed earlier in this issue.

I was wondering if you guys have plans to support Expo apps in a way that does not require ejecting the app. Or perhaps I have overseen documentation on how to properly implement Plaid Link for Expo somewhere? For our usecase, a tiny Netherlands based startup, Expo has advantages that we'd like to keep (quickly iterate, test, share etc).

xsats commented 4 years ago

I'm in a similar situation and found this: https://www.npmjs.com/package/expo-plaid-link

Disclaimer - I have not yet attempted to integrate, but plan to soon.

karlvd commented 4 years ago

The problem with the current implementation is that it redirects to pladLink:// which is not a registered URL scheme. For this to work, the call has to be intercepted in the Webview which can only be done in native code.

A lot of React Native apps are built using Expo which is great, though using Expo you can´t just add any native code to your RN app without other implications like ejecting and missing out on a bunch of benefits which comes with the expo eco-system.

Suggestion to the Plaid team

Make an optional property "callback" and make it possible to override the url scheme used in the callback to the app
Default to plaidLink:// if not set for backward compatibility

This would be sent as an url encoded parameter to link.html For example: link.html?key=xxx&env=sanbox&callback=myscheme%3A%2F%2F%0A

This could be implemented with full backward compatibility and no breaking changes for existing users.

Benefits

React Native applications can utilize Plaid with pure Javascript, no native code required.
You could simplify your exising Android and iOS which would utilize the callback instead of platform specific link interception code to make it work.
This would be fully supported by Expo, no need to eject
Avoid non supported solutions and libraries which solves to problem by injecting javascript into the webview and monkey patches your code
Linking in React Native can be used with Expo.WebBrowser and even with the openAuthSessionAsync which double checks that the callback url is the registered url scheme of the app. Utilizing the inapp Webbrowser would show users that the form is actually provided by Plaid using https and not a fake form in any app.

Until then, the best solution is to use https://www.npmjs.com/package/expo-plaid-link or create a Webview manually and inject the necessary javascript.

zsweigart commented 4 years ago

Hi @Momics Thanks for the idea. The React Native Plaid Link SDK is a React Native wrapper around our native SDKs. Because of this, it cannot be easily migrated to expo. While @karlvd makes some interesting points, there are some complexities around some of the features in our SDK that would make building an Expo non-trivial. A non-native SDK is not currently on our roadmap.

nandorojo commented 3 years ago

If anyone managed to get a webview to work with Plaid link since they got rid of the key field, it would be awesome to see a code sample. The existing Expo + webview examples are all outdated and don't use the token.

JBaczuk commented 3 years ago

@nandorojo I'm trying to do the same, but I'm not able to subscribe to the events in order to receive the public_token. It seems that the events are not accessible, even if you try to inject javascript. @zsweigart is there any way to do that? We are kind of stuck in Expo without an SDK or some type of documentation about which javascript we should inject in order to subscribe to the events.

nandorojo commented 3 years ago

I think I may have made some progress, are you sure you don't get any window.postMessage if you inject the script? I'll see if I can get something to work. You'll have to use the new token implementation in a webview.

JBaczuk commented 3 years ago

I have tried this, and I get nothing:

  const injectedJavaScript = `(function() {
    window.postMessage = (message, origin) => {
      window.ReactNativeWebView.postMessage(message);
    }
  })()`;

I've also tried overwriting all of these functions:

window.location.replace
window.location.assign
window.navigate

JBaczuk commented 3 years ago

@Momics @nandorojo I got it working, here is how:

<WebView
  source={{
    uri: `https://cdn.plaid.com/link/v2/stable/link.html?isWebview=true&token=${linkToken}`,
  }}
  ref={(ref) => (webviewRef = ref)}
  originWhitelist={['https://*', 'plaidlink://*']}
  onShouldStartLoadWithRequest={handleNavigationStateChange}
/>

Inside the handleNavigationStateChange function, if it is a plaidlink:// url, I return false (so it won't try to navigate there).

I published a component which is an attempt to have a similar api as this one (react-native-plaid-link-sdk), probably needs a few more things added, but I hope it's helpful:

https://www.npmjs.com/package/@burstware/expo-plaid-link

pandasonic-collective commented 3 years ago

@Momics @nandorojo I got it working, here is how:
<WebView
  source={{
    uri: `https://cdn.plaid.com/link/v2/stable/link.html?isWebview=true&token=${linkToken}`,
  }}
  ref={(ref) => (webviewRef = ref)}
  originWhitelist={['https://*', 'plaidlink://*']}
  onShouldStartLoadWithRequest={handleNavigationStateChange}
/>
Inside the handleNavigationStateChange function, if it is a plaidlink:// url, I return false (so it won't try to navigate there).

I published a component which is an attempt to have a similar api as this one (react-native-plaid-link-sdk), probably needs a few more things added, but I hope it's helpful:

https://www.npmjs.com/package/@burstware/expo-plaid-link

Gonna give this a try tomorrow! Been waiting for something to work with expo for months now. Can't finish my app without it 😅

pandasonic-collective commented 3 years ago

@JBaczuk Love this! You rock! It's working perfectly. Can finally move my app forward. Thanks!

afahim12 commented 3 years ago

Hi It looks l like the solution I have been looking for. However I still am on Expo 37 and i got some native module missing errors. Do you need sdk 40 for this expo-plaid-link to work? I am just a bit scared to upgrade to 40 right now and have other pieces in my code to break. Any way to show us the webview version handlenavigationstatechange function in the meantime as I never used webviews before so it seems a bit opaque to me? Thank you very much for this!

afahim12 commented 3 years ago

Actually I got it to work by mostly copying your handleNavigationStateChange so thank you for that! However it doesnt seem that events are fired up beyond the original one (at least in sandbox mode in the ios simulator) and therefore I dont seem to be able to capture the connected event for instance. Any idea what could be happening behind the scene? Again the plaid link flow works but I dont seem to receive the publicToken as the plaidlink://connected doesnt seem to get fired. Thanks again in advance!

pandasonic-collective commented 3 years ago

Actually I got it to work by mostly copying your handleNavigationStateChange so thank you for that! However it doesnt seem that events are fired up beyond the original one (at least in sandbox mode in the ios simulator) and therefore I dont seem to be able to capture the connected event for instance. Any idea what could be happening behind the scene? Again the plaid link flow works but I dont seem to receive the publicToken as the plaidlink://connected doesnt seem to get fired. Thanks again in advance!

What are you getting back from the success console log?

afahim12 commented 3 years ago

Actually I got it to work by mostly copying your handleNavigationStateChange so thank you for that! However it doesnt seem that events are fired up beyond the original one (at least in sandbox mode in the ios simulator) and therefore I dont seem to be able to capture the connected event for instance. Any idea what could be happening behind the scene? Again the plaid link flow works but I dont seem to receive the publicToken as the plaidlink://connected doesnt seem to get fired. Thanks again in advance!

What are you getting back from the success console log?

I finally got it to work. typo in WebView=true vs. Webview=true in the link that was somehow showing the plaid link flow but not activating the navigation state. It's all working great for now in my sandbox testing! Thank you Adam and the others for the help!

rasck commented 2 years ago

@zsweigart Could you support expo if you made a config plugin? Then I think you will only need your users to use expo dev client and your plugin to have expo support

isaachinman commented 2 years ago

@zsweigart @amytang0 Any update on roadmap prioritisation, given Expo config plugins?

AlexArendsen commented 2 years ago

@zsweigart @amytang0 Until Expo is supported, it would really help folks save time by mentioning the current state of Expo support in the official docs -- I know personally I would have saved at least an hour.

nandorojo commented 2 years ago

Pretty sure this should work with Expo SDK 44. You’ll just need to use a custom dev client and EAS.

Be sure to see the patch from https://github.com/plaid/react-native-plaid-link-sdk/issues/436

codebutler commented 2 years ago

Here's a config plugin that adds plaid support on android to managed (dev client) expo apps: https://gist.github.com/codebutler/a14b1117d85fa2c1db7fffa5e4288361

iOS seems to work fine without any additional changes.

erquhart commented 2 years ago

Confirming this does indeed work on iOS - not in Expo Go, but with the dev client. No plugins, patches, etc. required.

plaid / react-native-plaid-link-sdk

Planned support for Managed Expo apps? #99